:root{
    --RBMGreen: #42ae5e; 
    --RBMBlue: #4285f4;
    --RBMRed: #ea4335;
    --lightBlue: #00bcd4;
    --WAbg: linear-gradient(313deg, #23b33a, #50ce5d);
    --vh100: 600px;
    --modalLeft: 0px;
    --modalTop: 0px;
    --modalRight: unset;
    --modalBottom: unset;
    --keybordPoint: 45px;
}
/* For the ripple effect */

.rippled {
   width: 40px;
   height: 40px;
  margin-top: -20px;
  margin-left: -20px;
   background: radial-gradient(transparent, #2196F355);
   position: fixed;
   opacity: 1;
   border-radius: 50%;
   z-index: 1000000000;
   border: 0.1px solid #002644;
}
.rippled2 {
   /*background: none;*/
}

@keyframes ripple-effect {
  0%  {
      transform: scale(0);
      opacity: 1;
      /*background: radial-gradient(transparent, #000);*/
  }
  75%  {
      transform: scale(0.75);
      opacity: 0.8;
      /*background: radial-gradient(transparent, #000);*/
  }
  100% {
      transform: scale(1);
      opacity: 0;
      /*background: radial-gradient(transparent, #00000);*/
  }
}


/* Dental only */
/* Top fixed element */
.screen .elementContainer > div.topFixedElement {
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
}

.screen .elementContainer > div.topFixedElement .calendarContainer {
    margin: 0;
}

/*Txn Splitter*/

.screen .elementContainer > div.topStandardSplitter {
    display: flex;
    width: 100%;
    overflow: hidden;
    margin: 0;
    /* border-bottom: solid 1px #CCC; */
    box-shadow: none;
    z-index: 1;
    justify-content: space-around;
    background: #dee1e6;
    padding-top: 10px;
}


.screen .elementContainer > div.topStandardSplitter > div {
    max-width: 50%;
    padding: 10px 0;
    text-align: center;
    display: flex;
    margin: 0;
    justify-content: center;
    font-size: 14px;
    line-height: 20px;
    border-bottom: solid 1px white;
    background: #dee1e6;
    color: #3c4043;
    transition: none;
    transition: border-radius 0.4s, background 0.2s, box-shadow 0.2s;
    border-radius: 0 0 0 0;
}

.screen .elementContainer > div.topStandardSplitter > div:hover {
    color: black;
    background: #e7e7e7;
    z-index: 2;
    box-shadow: none;
    position: relative;
    border: none;
    box-shadow: -5px -5px 8px -10px #000, 8px -6px 8px -13px #000;
    border-radius: 10px 10px 0 0;
    border: none !important;
    border-bottom: solid 1px #fff !important;
}

.screen .elementContainer > div.topStandardSplitter > div::after, 
.screen .elementContainer > div.topStandardSplitter > div::before {
    content: " ";
    pointer-events: none;
    position: absolute;
    display: block;
    height: 80%;
    width: 100%;
    bottom: 0px;
    z-index: 4;
    opacity: 1;
}
.screen .elementContainer > div.topStandardSplitter > div:hover::before {
    left: -100%;
    border-radius: 0 0 10px 0;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 14px 0.25em 0 -4px #e7e7e7;
}
.screen .elementContainer > div.topStandardSplitter > div:hover::after {
    right: -100%;
    border-radius: 0 0 0 10px;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: -14px 0.25em 0 -4px #e7e7e7;
}

.screen .elementContainer > div.topStandardSplitter > div:hover::after,
.screen .elementContainer > div.topStandardSplitter > div:hover::before{
}

.screen .elementContainer > div.topStandardSplitter > div:not(.active):not(:hover) + div:not(.active){
  border-left: solid 1px #b5b5b5;
}

.screen .elementContainer > div.topStandardSplitter > div.active {
    color: black;
    background: white;
    z-index: 3;
    box-shadow: none;
    position: relative;
    border: none;
    box-shadow: -5px -5px 8px -10px #000, 8px -6px 8px -13px #000;
    border-radius: 10px 10px 0 0;
}

.screen .elementContainer > div.topStandardSplitter > div.active::after,
.screen .elementContainer > div.topStandardSplitter > div.active::before {
    content: " ";
    pointer-events: none;
    position: absolute;
    display: block;
    height: 80%;
    width: 100%;
    bottom: 0px;
    z-index: 4;
    opacity: 0;
    opacity: 1;
}

.screen .elementContainer > div.topStandardSplitter > div.active::before {
    left: -100%;
    border-radius: 0 0 10px 0;
    box-shadow: 14px 0.25em 0 -4px white;
}
.screen .elementContainer > div.topStandardSplitter > div.active::after {    
    right: -100%;
    border-radius: 0 0 0 10px;
    box-shadow: -14px 0.25em 0 -4px white;
}

/* Outer appointment view */
.screen .elementContainer > div.topSplitter {
    display: flex;
    width: 100%;
    margin: 0;
    border-bottom: solid 1px #CCC;
    box-shadow: 0 2px 5px -2px #ddd;
    z-index: 1;
    justify-content: space-around;
    background: #d1f0ff;
}

.screen .elementContainer > div.topSplitter > div {
    width: 30%;
    padding: 10px 0;
    border-right: solid 1px #CCC;
    text-align: center;
    display: flex;
    margin: 0;
    justify-content: center;
    font-size: 14px;
    line-height: 20px;
    border-bottom: solid 2px transparent;
}

.screen .elementContainer > div.topSplitter > div:last-child {
    border-right: none;
    width: 20%;
    font-size: 20px;
}
.screen .elementContainer > div.topSplitter > div:nth-child(3) {
     width: 20%;
     font-size: 20px;
}

.screen .elementContainer > div.topSplitter > div.active {
    border-bottom: solid 2px #0390ff;
}

/* Calendar system */

.calendarContainer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0px 10px;
}

.calendarContainer.slots{
  margin-top: 5px;
}
.calendarContainer.slots.limited
{
    overflow: auto;
    max-height: calc(100vh - 250px);
    border-bottom: solid 1px #BBB;
    box-shadow: 0px 3px 5px 0px #0004;
    border-radius: 10px;
}
.calendarContainer:first-child{
    margin-bottom: 30px;
    border: solid 1px #eee;
    border-bottom: none;
    border-right: none;
}

.calendarContainer .monthName {
    display: flex;
    width: 100%;
    /* border: solid 1px #4285f46e; */
    justify-content: space-around;
    text-align: center;
    height: 35px;
    font-size: 17px;
    line-height: 35px;
    color: #000000;
    /* background: #cffaff; */
    font-family: "Poppins";
    font-weight: 300;
}
.calendarContainer .monthName .monthNameHolder{
    width: calc(100% - 60px);
    font-family: inherit;
    text-align: left;
    padding: 0 10px;
    font-weight: 500;
    color: #222;
    box-shadow: inset 0 -2px 5px 1px rgba(0, 0, 0, 0.1);
    border-radius: 5px 5px 0 0;
    background: #cffaff;
}
.calendarContainer.slots .monthName .monthNameHolder{
  width: 100%;
}
.calendarContainer .monthName .prevMonth,
.calendarContainer .monthName .nextMonth{
    width: 30px;
    font-size: 26px;
    font-family: "Material Symbols Outlined";
    background: #cffaff;
    margin-left: 2px;
    border-radius: 5px 5px 0 0;
    box-shadow: inset 0 -2px 5px 1px rgba(0, 0, 0, 0.1);
}

.calendarContainer .dates,
.calendarContainer .slots {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow: hidden;
    border-left: solid 1px #eee;
    border-right: none;
    border-bottom: none;
}
.calendarContainer .slots.listView.document{
  margin: 0;
  height: fit-content;
  border: solid 1px #eee;
  border-bottom: none;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.calendarContainer .weekday.date{
    width: calc(100%/7);
    height: 20px;
    line-height: 20px;
    position: relative;
    padding: 0;
    font-size: 11px;
    font-family: poppins;
    font-weight: 300;
    /* border-right: solid 1px #4285f46e; */
    /* border-bottom: solid 1px #4285f46e; */
    text-align: center;
    justify-content: center;
    box-shadow: inset -4px -3px 8px -9px;
}

.calendarContainer .date{
    width: calc(100%/7);
    height: 40px;
    border: aliceblue;
    position: relative;
    padding: 4px;
    padding-left: 9px;
    font-size: 16px;
    font-family: poppins;
    font-weight: 400;
    /* border-right: solid 1px #4285f46e; */
    /* border-bottom: solid 1px #4285f46e; */
    display: flex;
    justify-content: flex-start;
    line-height: 1;
    align-items: center;
    box-shadow: inset -4px -3px 8px -9px;
}

.calendarContainer .date.active{
    background: #ff9800 linear-gradient(313deg, #0003, transparent) !important;
    color: white;
    transform: scale(1.1);
    box-shadow: 1px 1px 5px -1px #000;
    z-index: 1;
}
.date.today::after {
    content: " ";
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 11px;
    /* border: solid 5px #F00; */
    border-radius: 20px;
}
.date.today {
    border: solid 1px #03A9F4;
    box-shadow: inset 0px 0px 2px 0px #03a9f4;
}
.calendarContainer .slot {
    width: calc(100%/6);
    height: 40px;
    border: aliceblue;
    position: relative;
    padding: 4px;
    font-size: 14px;
    font-family: poppins;
    font-weight: 400;
    /* border-right: solid 1px #4285f46e; */
    /* border-bottom: solid 1px #4285f46e; */
    display: flex;
    justify-content: flex-start;
    align-content: flex-end;
    line-height: 1;
    align-items: flex-end;
    background: white;
    box-shadow: inset -4px -3px 8px -9px;
}




.calendarContainer .oldDate{
    background: #eee;
    color: #555;
}

.calendarContainer .slot.active{
    background: #ff9800 linear-gradient(313deg, #fff3, transparent) !important;
    color: white;
}
.calendarContainer .slot.booked {
    background: #c6c8fb;
}
.calendarContainer .slot.booked.procedure {
    /*
  background: #6b71f7 linear-gradient(313deg, #0003, transparent) !important;
    color: white;
  */
}

.calendarContainer .slot.booked.active{
    background: #ff3434 !important;
    color: white;
}
.calendarContainer .slot.booked.active::after{
    content: "Conflict";
    position: absolute;
    top: 3px;
    left: 0;
    font-size: 13px;
    text-align: center;
    width: 100%;
}

@media only screen and (max-height: 669px) {    
    .calendarContainer {
        /* transform: scale(0.8); */
        /* margin-top: -36px; */
    }
    .calendarContainer .slot,
    .calendarContainer .date{
        height: 30px;
        font-size: 12px;
        padding: 2px 5px;
    }
    
    .calendarContainer .slot.booked.active::after{
        font-size: 12px;
    }
}
@media only screen and (max-height: 600px) { 
    .calendarContainer .slot,
    .calendarContainer .date{
        height: 27px;
        font-size: 11px;
        font-weight: bold;
        padding: 2px 5px;
    }
    
    .calendarContainer .slot.booked.active::after{
        font-size: 10px;
    }
}

.calendarContainer .date .booked, 
.calendarContainer .date .procedure {
    position: absolute;
    bottom: 0px;
    right: 0px;
    height: 13px;
    line-height: 13px;
    text-align: center;
    /* border-radius: 20px; */
    background: #55b5ff;
    font-size: 11px;
    padding: 0 4px;
    color: white;
    /* font-weight: bold; */
    width: fit-content;
    display: block;
}

.calendarContainer .date .procedure {
    top: 19px;
    background: #ffbf00;
    display: none;
}

.calendarContainer .date:nth-child(7n+1) {
    /* border-left: solid 1px #4285f46e; */
}
.calendarContainer .slot:nth-child(6n+1) {
    /* border-left: solid 1px #4285f46e; */
}


.date-legend {
  display: flex;
  align-items: center;
  margin: 5px auto;
  padding: 0;
  border-bottom: solid 3px transparent;
  max-width: 260px;
}


.date-legend:first-child{
  margin-top: 20px;
}
.date-legend:last-child{
  margin-bottom: 20px;
}

.date-color{
  height: 35px;
  width: 35px;
  border: solid 0.5px #a7a7a7;
  border-radius: 0px;
  box-shadow: inset -4px -3px 8px -9px;
  padding: 15px 0 0 19px;
  position: relative;
}

.popup .date-legend span{
  height: 35px;
  overflow: hidden;
  width: calc(100% - 35px);
  padding: 0 10px;
  line-height: 14px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  font-size: 14px;
}

.date-legend .past-date,
.date-legend .past-slot {
  background-color: #eee;
}

.date-legend .future-date,
.date-legend .available-slot {
  background-color: #fff;
}

.date-legend .selected-slot ,
.date-legend .selected-date {
  background: #ff9800 linear-gradient(313deg, #0003, transparent) !important;
}

.date-legend .booked-consultation {
  background-color: #c6c8fb;
}

.date-legend .conflict {
  background-color: #ff3434 !important
}

.date-legend .count-box {
  position: absolute;
  bottom: 0px;
  right: 0px;
  height: 13px;
  line-height: 13px;
  text-align: center;
  background: #55b5ff;
  font-size: 11px;
  padding: 0 4px;
  color: white;
  width: fit-content;
  display: block;
}


*{
    box-sizing: border-box;
    font-family: 'Roboto', SANS-SERIF;
    transition: 0.4s;
    -webkit-tap-highlight-color: transparent;
}
html, body {
    margin: 0  !important;
    padding: 0  !important;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    position: relative;
    /*touch-action: none;*/
}
body{
    display: flex;
    height: var(--vh100);
    height: 100vh;
    position: relative;
    overflow: hidden;
    /* background: #0ff2; */
    /*touch-action: none;*/
}
/*
body > *{
    overflow: hidden !important;
}
*/
body.hideAll > #navbar,
body.hideAll > #navbar2,
body.hideAll > #statusBar,
body.hideAll > #appSpace,
body.hideAll > #bottomLinksWrapper,
body.hideAll > #sidebarContainer,
body.hideAll > .settingsPage{
   display: none !important;
}
    
    
body.hideAll{
    height: 100px;
}
.loader.fadeOut{
    opacity: 0 !important;
}
/* brought from other CSS*/
/* This is the css for the whole app. the individual parts to be transferred out later */
/************************* STANDARD *******************************/
.info{
    /*background:#00b2ca !important;*/
    background: #00b2ca linear-gradient(313deg, #0003, transparent) !important;
    color: white;
}
.danger{
    /*background:#ff3434 !important;*/
    background: #ff3434 linear-gradient(313deg, #0003, transparent) !important;
    color: white;
}
.warning{
    /*background: #ff9601 !important;*/
    background: #ff9601 linear-gradient(313deg, #0003, transparent) !important;
    color: white;
}
.scheduled{
    /*background: #ff9601 !important;*/
    background: #ffff12 linear-gradient(313deg, #0003, transparent) !important;
    color: #444 !important;
}
.success{
    /*background: #34c85a !important;*/
    background: #34c85a linear-gradient(313deg, #0003, transparent) !important;
    color: white;
}
.googleBlue{
    background:#4285f4 !important;
}
.googleRed{
    background:#ea4335 !important;
}
.googleGreen{
    background:#42ae5e !important;
}
.waGreen{
    background: linear-gradient(313deg, #23b33a, #50ce5d) !important;
}

.circle{
    border-radius: 20px;
    width: 25px;
    height: 25px;
    margin: 0 10px;
    line-height: 25px;
    font-size: 13px;
    text-align: center;
    margin-top: -3px;
    margin-bottom: -2px;
}
.pull-right{
    margin-left: auto;
}

/************************* Screen Cards ********************************/
.screen .elementContainer > div{
    background: white;
    padding: 0px;
    cursor: default;
    transition: 0.4s;
    position: relative;
    margin: 10px 0;
    /* box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%), 0px 0px 0px 24px rgb(222 225 230); */
    display: block;
    float: left;
    min-width: 50.1%;
    /*TODO find another way for the above */
}
.screen .document.centerAlign{
    margin-left: auto;
    margin-right: auto;
}
.screen .elementContainer > .document:last-of-type{
    /* this is accomodate the floating ball and the bottomlinks */
    margin-bottom: 60px !important;
}

/******************* Special Table *****************************/
.screen .elementContainer .document.table {
    height: auto;
    overflow: hidden;
    padding:0;
}
.screen .elementContainer .document.table.miniTable{
    display: flex;
    height:calc(70px + 70px + 70px + 70px + 10px + 10px + 10px);
    margin:0 10px 10px 0;
    flex-wrap: wrap;
    overflow: auto;
}
.screen .elementContainer .table .title{
    padding: 6px 15px;
    background-color: #11b8cc;
    color: #fff;
    border-bottom: solid 1px #eee;
    text-align: left;
    margin: 0;
    font-weight: 100;
    font-size: 1.6em;
    padding-top: 15px;
    display: flex;
    width:100%;
}
.screen .elementContainer .table .title span.tableTitle{
    display: block;
    width: calc(100% - 42px);
    float: left;
    overflow: auto;
}
.screen .elementContainer .table .title .iconHolder{
    border-radius: 4px;
    border: solid 1px #fff5;
    display: flex;
    justify-content: space-around;
    font-size: 17px;
    overflow:hidden;
}
.screen .elementContainer .table .title .iconHolder  span.material-symbols-outlined{
    color: white;
}
.screen .elementContainer .table .title .iconHolder:hover{
    background: #1D6F4299;
    margin-left: -65px;
    width: 100px;
}
.screen .elementContainer .table .title .iconHolder:hover::after{
    content: ' Export';
}
.screen .elementContainer .table .tableContainer{
    width: 100%;
    overflow: auto;
}
.screen .elementContainer .table table{
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    font-size: 0.9em;
    font-family: sans-serif;
}
.screen .elementContainer .table table thead td, 
.screen .elementContainer .table table tbody td{
    padding: 10px 10px;
    border-right: solid 1px #0005;
    min-width: 20px;
    max-width: 300px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.screen .elementContainer .longtable table thead td{
    white-space: normal;
    padding: 4px 15px;
}
.screen .elementContainer .table table thead td{
    padding-right: 50px; /* For the sort and filter icons */
    
}
.screen .elementContainer .table table thead tr {
    background-color: #11b8cc;
    color: #ffffff;
    text-align: left;
}
.screen .elementContainer .table table tbody tr {
    border-bottom: 1px solid #dddddd;
    transition: 0.4s;
    color: #444;
}
.screen .elementContainer .table table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}
.screen .elementContainer .table table tbody .active-row {
    font-weight: bold;
    color: #11b8cc;
}
.screen .elementContainer .table table tbody tr:hover {
    background-color: #11b8cc22;
    color: black;
}
.screen .elementContainer .table table tbody td.txnLinkedCell{
   text-decoration: underline;
   color: #11b8cc;
}


/************************* FORMS ************************************/


.screen .document.form{
    background: #fff;
    max-width: 680px;
    overflow: hidden;
    width: 100%;
}
.screen .document.form form{
    overflow:auto;
}

.screen .document .inputGroup{
    display: flex;
    float: left;
    margin: 10px 0px 0 0px;
    font-size: 14px;
    background: #fff;
    border-radius: 4px;
    height: 52px;
    padding: 10px 10px 0 10px;
    line-height: 30px;
    color: #000;
    overflow: hidden;
    position: relative;
}
.screen .document .inputGroup.size11{
    height: fit-content;
}


.screen .document .inputGroup > label{
    padding: 0px;
    margin: 0px;
    margin-left: 0;
    margin-top: 3px;
    font-size: 1em;
    height: 13px;
    line-height: 1em;
    width: 100%;
    color: #5f6368;
    overflow: visible !important;
}

.screen .document .inputGroup > input,
.screen .document .inputGroup > label{
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipses;
}

.screen .document.form button {
    padding: 12px 30px;
    font-size: .75rem;
    cursor: pointer;
    border: solid 1px #0000;
    transition: 0.4s;
    color: #fff;
    box-shadow: 0px 0px 1px -1px rgb(60 64 67 / 30%), 0px 1px 5px 1px rgb(60 64 67 / 15%);
    margin-left: auto;
    margin-right: 5px;
    border-radius: 5px;
    margin-top: 20px;
}

.screen .document.form button:hover, 
.screen .document.form button:focus{    border: solid 1px #007f8f;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);
    filter: brightness(1.1);
    border-radius: 0px;
}

.screen .document.form button.pressed{
    box-shadow: inset 0 0 10px 4px #0005 !important;
    filter: brightness(1) !important;
    transform: scale(0.95);
    pointer-events: none;
    transition: 0.1s !important;
    color: #0000;
    position: relative;
}

input, select{
	-webkit-appearance: none;
	-moz-appearance:none;
	appearance:none;
	
    border-radius: 3px 3px 0 0;
    margin-top: 5px;
    color: #202124;
    padding: 6px 7px;
    box-sizing: border-box;
    font-family: inherit;
    transition: 0.4s;
    height: 36px;
    font-size: 1em;
}
select{
    -webkit-appearance: auto;
    appearance: auto;
    padding: 6px 3px;
}



textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    width: 100%;
    font-family: inherit;
    border-radius: 3px 3px 0 0;
    margin-top: 5px;
    padding: 6px 7px;
    box-sizing: border-box;
    transition: 0.4s;
    resize: vertical;
}

.screen .document .inputGroup input,
.screen .document .inputGroup textarea{
    border-bottom: solid 1px #ff9800;
    background: #fffaec;
}
.screen .document .inputGroup input.isfilled,
.screen .document .inputGroup textarea.isfilled{
    border: solid 1px #dedede;
    background: #fff;
}
.screen .document .inputGroup input:focus,
.screen .document .inputGroup textarea:focus{
    outline: none;
    border-radius: 3px 3px 0 0;
    border-bottom: solid 1px #2196f3;
    background: #eef8ff;
}

.screen .document .inputGroup input:disabled, 
.screen .document .inputGroup textarea:disabled{
    outline: none;
    border-radius: 3px;
    border: solid 1px #ddd;
    background: #eee;
}

.screen .document .inputGroup input+label{
    position: absolute;
    /*top: 24px;*/
    /*left: 0.9rem;*/
    pointer-events: none;
    transition: 0.4s;
    
    top: -0.2rem;
    left: 11px;
    font-size: 0.7em;
    text-transform: uppercase;
    
    font-weight: bolder;
    
}


.screen .document .inputGroup textarea+label{
    position: absolute;
    /*top: 24px;*/
    /*left: 0.9rem;*/
    pointer-events: none;
    transition: 0.4s;
    
    top: -0.2rem;
    left: 11px;
    font-size: 0.7em;
    text-transform: uppercase;
    
    font-weight: bolder;
}


.screen .document .inputGroup input[type=time] + label,
.screen .document .inputGroup input[type=date] + label,
.screen .document .inputGroup input[type=datetime-local] + label,
.screen .document .inputGroup input[type=month] + label,
.screen .document .inputGroup input[type=week] + label,
.screen .document .inputGroup input[type=radio] + label,
.screen .document .inputGroup input[type=range] + label,
.screen .document .inputGroup input[type=color] + label,
.screen .document .inputGroup input[type=file] + label{
    top: -0.2rem;
    left: 11px;
    font-size: 0.7em;
    text-transform: uppercase;
}

.screen .document .inputGroup input:focus + label, 
.screen .document .inputGroup textarea:focus + label{
    top: -0.2rem;
    left: 11px;
    font-size: 0.7em;
    
    color: #11b8cc;
    font-weight: bolder;
    text-transform: uppercase;
}
.screen .document .inputGroup input:disabled + label, 
.screen .document .inputGroup .isfilled + label{
    top: -0.2rem;
    left: 11px;
    font-size: 0.7em;
    
    color: #9e9e9e;
    font-weight: bolder;
    text-transform: uppercase;
}


.screen .document .inputGroup input[type=checkbox]{
    float: none;
    height: 20px;
    width: 20px;
    margin: 5px 0;
    
	-webkit-appearance: auto;
	-moz-appearance:auto;
	appearance:auto;
}

.screen .document .inputGroup input[type=checkbox]:focus + label,
.screen .document .inputGroup input[type=checkbox] + label{
    top: 0;
    position: relative;
    left: 0;
    font-size: 1.1em;
    font-weight: normal;
    color: #5f6368;
    height: auto;
    line-height: 30px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 7px;
    pointer-events: all;
    box-sizing: border-box;
    width: calc(100% - 27px);
}

.screen .document .inputGroup input[type=checkbox]:checked + label{
    color: #11b8cc;
}


.screen .document .inputGroup input[type=checkbox]:hover + label,
.screen .document .inputGroup input[type=checkbox] + label:hover,
.screen .document .inputGroup input[type=checkbox]:focus + label {
    background: #11b8cc55;
    color: #5f6368;
}

/* DOCUMENTS */
.screen .document{
    height: auto;
    top: 0 !important;
    max-width: 680px;
    margin: 0 max(0px, 50% - 340px) 30px max(0px, 50% - 340px);
    padding: 0;
    overflow: hidden;
}

.screen .document .documentContainer{
    padding: 10px;
    overflow:auto;
    background: white;
}

.screen .documentSection{
    margin: 10px auto 0 3px;
    font-size: 1.2em;
    font-weight: 400;
    border-bottom: solid 1px #bbb;
    font-family: 'Poppins', sans-serif;
    display: block;
    float: left;
}

.screen .documentSection:first-child {
    margin-top: 0;
}

.screen .document .field{
    display: block;
    float: left;
    margin: 10px 1px;
    font-size: 14px;
    height: 47px;
    padding: 0 10px;
    line-height: 30px;
    color: #000;
    overflow: hidden;
}


.screen .document .field > span{
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipses;
    height: 30px;
}

.screen .document .field .fieldName{
    padding: 0;
    margin: 0;
    margin-left: 0;
    margin-top: 3px;
    font-size: 0.8em;
    height: 13px;
    line-height: 0.9em;
    width: 100%;
    color: #00b6cc;
    font-weight: normal;
    text-transform: uppercase;
}


.screen .document .field .fieldValue{
    height: auto;
    border-bottom: solid 1px #ccc;
    border-bottom-style: dotted;
    line-height: 25px;
    min-height: 25px;
    margin-left: 4px;
    max-height: 200px;
    overflow:auto;
}

.screen .document > .title{
    width: 100%;
    margin-bottom: 5px;
    padding: 6px 15px;
    background-color: #11b8cc;
    color: #fff;
    font-size: 1em;
    text-align: left;
    margin: 0;
    font-weight: 100;
    font-size: 1.6em;
    padding-top: 15px;
}

.screen .document.notification .title{
    display:none;
}

/* Standard Modifiers */
 .width20 {
    width: 20%;
}
 .width40 {
    width: 40%;
}
 .width60 {
    width: 60%;
}
 .width80 {
    width: 80%;
}
 .width100 {
    width: 100%;
}

 .width25 {
    width: 25%;
}
 .width50 {
    width: 50%;
}
 .width75 {
    width: 75%;
}

 .width33 {
    width: 33%;
}
 .width34 {
    width: 34%;
}
 .width67 {
    width: 67%;
}

/************ Datasheet Type ****************/

.screen .elementContainer > div.document.viewElement {
    width: max(490px, 100%);
    font-weight: 300;
    padding: 0;
    margin: 0 0 20px 0;
}

.screen .elementContainer > div.document.viewElement > .title{    
    padding: 6px 15px;
    background-color: #11b8cc;
    color: #fff;
    text-align: left;
    margin: 0;
    font-weight: 100;
    font-size: 1.6em;
    padding-top: 15px;
    display: flex;
    width: 100%;
}

.screen .elementContainer > div.document.viewElement > div {
    padding: 12px 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.screen .elementContainer > div.document.viewElement .by1,
.screen .elementContainer > div.document.viewElement .by2,
.screen .elementContainer > div.document.viewElement .by3,
.screen .elementContainer > div.document.viewElement .by4{
    display: flex;
    flex-wrap: wrap;
}


.screen .elementContainer > div.document.viewElement .by1{
    width: 100%;
}
.screen .elementContainer > div.document.viewElement .by2 {
    width: 50%;
}
.screen .elementContainer > div.document.viewElement .by3 {
    width: 33.33%;
}
.screen .elementContainer > div.document.viewElement .by4 {
    width: 25%;
}


.screen .elementContainer > div.document.viewElement .mob20 {
    width: 20%;
}
.screen .elementContainer > div.document.viewElement .mob40 {
    width: 40%;
}
.screen .elementContainer > div.document.viewElement .mob60 {
    width: 60%;
}
.screen .elementContainer > div.document.viewElement .mob80 {
    width: 80%;
}
.screen .elementContainer > div.document.viewElement .mob100 {
    width: 100%;
}

.screen .elementContainer > div.document.viewElement .mob25 {
    width: 25%;
}
.screen .elementContainer > div.document.viewElement .mob50 {
    width: 50%;
}
.screen .elementContainer > div.document.viewElement .mob75 {
    width: 75%;
}

.screen .elementContainer > div.document.viewElement .mob33 {
    width: 33%;
}
.screen .elementContainer > div.document.viewElement .mob34 {
    width: 34%;
}
.screen .elementContainer > div.document.viewElement .mob67 {
    width: 67%;
}

.screen .elementContainer .mb0{
    margin-bottom: 0 !important;
}
.screen .elementContainer .mt0{
    margin-top: 0 !important;
}

.screen .elementContainer .pb0{
    padding-bottom: 0 !important;
}
.screen .elementContainer .pt0{
    padding-top: 0 !important;
}



.screen .elementContainer > div.document.viewElement .mainDataHolder {
    width: calc(100% - 75px);
    padding: 15px 80px 15px 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    position: relative;
}
.screen .elementContainer > div.document.viewElement .leftCircleContainer{
    width: 75px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: center;
    margin: 0 auto;
}
.screen .elementContainer > div.document.viewElement .leftCircle {    
    width: 60px;
    height: 60px;
    border-radius: 30px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: default;
    margin: 0;
    margin-bottom: auto;
    margin-top: 10px;
    color: white;
    font-weight: 400;
    background: #4285f4;
    text-align: center;
    margin: auto;
}


.screen .elementContainer > div.document.viewElement span {
    border-left: solid 1px #eee;
    padding: 0 10px;
    width: 100%;
    display: block;
}
.screen .elementContainer > div.document.viewElement span.title {
    font-size: 19px;
}

/*
.screen .elementContainer > div.document.viewElement .subHeading{
    padding: 0px;
}
.screen .elementContainer > div.document.viewElement .subHeading span{
    color: black;
    line-height: 25px;
    font-weight: 400;
    border-left: none;
    border-top: solid 1px #eee;
    border-bottom: solid 1px #eee;
    padding: 5px 10px;
    font-size: 17px;
    background: #cffaff;
}
*/

.screen .elementContainer > div.document.viewElement .link{
    padding: 0px;
}
.screen .elementContainer > div.document.viewElement .link:hover {
    cursor: pointer;
    filter: brightness(0.9);
    transform: translateX(2px);
}
.screen .elementContainer > div.document.viewElement .link span{
    font-size: 17px;
    color: #4285f4;
    line-height: 25px;
    font-weight: 400;
    border-left: none;
    border-top: solid 1px #eee;
    border-bottom: solid 1px #eee;
    padding: 10px;
}
.screen .elementContainer > div.document.viewElement .link.smallLink span {
    font-size: 14px;
    line-height: 14px;
    padding: 4px 10px;
    border: none;
}
.screen .elementContainer > div.document.viewElement .link span::after{
    content: "arrow_forward_ios";
    font-family: "Material Symbols Outlined";
    vertical-align: middle;
    display: inline-block;
    padding-left: 3px;
    margin-top: -1px;
}



.screen .elementContainer > div.document.viewElement .simpleLink{
  color: #4285f4 !important;
  text-decoration: underline;
  font-weight: 500 !important;
  cursor: pointer;
  width: fit-content;
  min-width: 51%;
  max-width: 100%;
}

.screen .elementContainer > div.document.viewElement span.label {
    text-transform: uppercase;
    font-size: 12px;
    padding-left: 10px;
    color: black;
    font-weight: 600;
    line-height: 20px;
}
.screen .elementContainer > div.document.viewElement span.details {
    font-size: 16px;
    font-weight: 400;
    color: #444;
    line-height: 19px;
}
.screen .elementContainer > div.document.viewElement span.details.smalldetails {
    font-size: 13px;
}

.screen .elementContainer > div.document.viewElement span.details.smalldetails .historicalDate {
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: underline;
    font-size: 12px;
}
.screen .elementContainer > div.boxContainer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.screen .elementContainer > div.boxContainer .box {
    width: calc(50% - 10px);
    border: solid 1px;
    margin: 5px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #008eff, #69d1ff);
    color: white;
}

.screen .elementContainer > div.boxContainer .box .title,
.screen .elementContainer > div.boxContainer .box .simpleLink,
.screen .elementContainer > div.boxContainer .box .value {
    width: 100%;
    display: block;
    text-align: center;
    line-height: 30px;
}

.screen .elementContainer > div.boxContainer .box .value 
{    
    font-size: 34px;
    font-weight: 500;
    line-height: 90px;
}

.screen .elementContainer > div.boxContainer .box .simpleLink{
    border-top: solid 1px #0002;
    background: #0002;
    cursor: pointer;
}
.screen .elementContainer > div.boxContainer .box .simpleLink:hover{
    background: #0005;
}




.screen .elementContainer > div.document.viewElement .lineItem {
    width: 100%;
    display: flex;
    border: solid 1px #0002;
    border-bottom: none;
    margin: 0 10px;
    background: white;
}

.screen .elementContainer > div.document.viewElement .lineItem span{
  border-left: none;
  padding-top: 3px;
  max-width: 500px;
}
.screen .elementContainer > div.document.viewElement .lineItem.lineItemTotal {
    border-bottom: solid 1px #0002;
    background: #0001;
    border-radius: 0 0 10px 10px ;
    font-weight: 500;
}

.screen .elementContainer > div.document.viewElement .lineItem.lineItemTitle{
    background: linear-gradient(135deg, #008eff, #69d1ff);
    border-radius: 10px 10px 0 0 ;
    color: white;
    font-weight: 500;
}

.screen .elementContainer > div.document.viewElement .lineItem div {
    padding: 10px;
}
.screen .elementContainer > div.document.viewElement .lineItem div:first-child {
    width: calc(100% - 90px);
    border: none;
}
.screen .elementContainer > div.document.viewElement .lineItem div:nth-child(2) {
    width: 90px;
    border-left: solid 1px #0002;
    text-align: right;
}


.screen .elementContainer > div.document.viewElement table {
    width: 100%;
    border-collapse: collapse;
    margin: 5px 10px 10px 5px;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
}
.screen .elementContainer > div.document.viewElement td {
    border: solid 1px #eee;
    padding: 3px 10px;
}
.screen .elementContainer > div.document.viewElement tr:first-child td {
    font-weight: 500;
    color: white;
    font-size: 15px;
    background: #2a676e;
    border-top: none;
    line-height: 20px;
}
.screen .elementContainer > div.document.viewElement tr:first-child td:first-child {
    border-left: none;
}
.screen .elementContainer > div.document.viewElement tr:first-child td:last-child {
    border-right: none;
}

.tinyLink {
    color: #4285f4 !important;
    font-weight: 500;
    font-size: 13px !important;
}
.tinyLink::after {
    content: "arrow_forward_ios";
    font-family: "Material Symbols Outlined";
    vertical-align: middle;
    display: inline-block;
    padding-left: 3px;
    margin-top: -1px;
}

/* File Upload Related */
.uploadedFile {
    border: solid 1px gray;
    width: 100px;
    height: 135px;
    max-width: calc(25% - 10px);
    border-radius: 10px;
    margin: 5px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    position: relative;
    overflow: hidden;
    padding-bottom: 20px;
    cursor: pointer;
}
.newFile.uploadedFile{ 
    border: dashed 2px #999;
    background: #eee;
    padding-bottom: 0px;
}
 .screen .elementContainer > div.document.viewElement .uploadedFile span,
.screen .elementContainer > div.document.viewElement .uploadedFile i{
     font-size: 40px;
     color: gray;
     text-align: center;
 }

.uploadedFile:not(.newFile) .details {
    position: absolute;
    bottom: 0;
    background: #4ec0ff;
    width: 100%;
    line-height: 24px;
    height: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    border-top: solid 1px gray;
    color: white;
}

.uploadedFile img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  filter: brightness(0.8);
}




@media only screen and (max-width: 2560px) {
    
    .screen .elementContainer > div.document.viewElement .by2 {
        width: 100%;
    }
    .screen .elementContainer > div.document.viewElement .by3,
    .screen .elementContainer > div.document.viewElement .by4 {
        width: 50%;
    }
    
    
    
    .screen .elementContainer > div.document.viewElement .mob20 {
        width: 20%;
    }
    .screen .elementContainer > div.document.viewElement .mob40 {
        width: 40%;
    }
    .screen .elementContainer > div.document.viewElement .mob60 {
        width: 60%;
    }
    .screen .elementContainer > div.document.viewElement .mob80 {
        width: 80%;
    }
    .screen .elementContainer > div.document.viewElement .mob100 {
        width: 100%;
    }
    
    
    
    .screen .elementContainer > div.document.viewElement .mob25 {
        width: 25%;
    }
    .screen .elementContainer > div.document.viewElement .mob50 {
        width: 50%;
    }
    .screen .elementContainer > div.document.viewElement .mob75 {
        width: 75%;
    }
    
    
    .screen .elementContainer > div.document.viewElement .mob33 {
        width: 33%;
    }
    .screen .elementContainer > div.document.viewElement .mob34 {
        width: 34%;
    }
    .screen .elementContainer > div.document.viewElement .mob67 {
        width: 67%;
    }
}
.screen .elementContainer div.document.viewElement .subHeading,
.screen .elementContainer div.subHeading {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    z-index: 2;
    margin-top: 0px;
    text-align: left;
    align-items: center;
    box-shadow: 0px 2px 6px 0px rgb(60 64 67 / 15%);
    color: black;
    line-height: 25px;
    font-weight: 400;
    border-left: none;
    border-top: solid 1px #eee;
    border-bottom: solid 1px #eee;
    padding: 5px 10px;
    font-size: 17px;
    background: #cffaff;
    max-width: 991px;
}
.screen .elementContainer div.subHeading.subtle{
  background: #eeeeee;
  margin-top: -20px;
  box-shadow: none;
  font-size: 16px;
  color: #333;
}


.screen .elementContainer div.subHeading.subtle::after{
  content: "hide";
  display: inline-block;
  font-size: 10px;
  margin-left: auto;
  margin-right: 10px;
  text-transform: uppercase;
  color: #4285f4;
  font-weight: 500;
}


.screen .elementContainer div.subHeading.subtle.minimize::after{
  content: "show";
}

.screen .elementContainer div.subHeading.subtle + .document.listView{
  max-height: 1400px;
  overflow: hidden;
  transition: .4s ease-in;
}

.screen .elementContainer div.subHeading.subtle.minimize + .document.listView{
  max-height: 0;
  overflow: hidden;
  transition: .4s ease-out;
}



.screen .elementContainer div.subHeading.Report{
  box-shadow: none;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  background: #edf3fb;
  /* color: #4285f4; */
  border-bottom: solid 1px #b6c7dd;
}
.screen .elementContainer div.subHeading.Report.minimize{
  /* background: #cffaff; */
  /* border: none; */
  /* color: #333; */
}
.screen .elementContainer div.subHeading.Report::after{
  content: "Details";
  display: inline-block;
  font-size: 12px;
  margin-left: auto;
  margin-right: 10px;
  text-transform: uppercase;
  color: #0b95ff;
  font-weight: 500;
}


.screen .elementContainer div.subHeading.Report.minimize::after{
  content: "Hide";
  /* color: #333; */
}

.screen .elementContainer div.subHeading.Report.minimize + .document{
  max-height: 1400px;
  overflow: hidden;
  transition: .4s ease-in;
}

.screen .elementContainer div.subHeading.Report + .document{
  max-height: 0;
  overflow: hidden;
  transition: .4s ease-out;
  box-shadow: 0px 0px 0px 24px rgb(222 225 230);
}



.screen .elementContainer > div.listLinkBar {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    text-align: left;
    align-items: center;
    margin: 0;
    font-size: 17px;
    font-weight: 400;
    cursor: pointer;
    border-bottom: solid 1px transparent;
    z-index: 1;
    box-shadow: none;
    max-width: 991px;
    border-bottom: solid 1px #eee;
}
.screen .elementContainer > div.notice {
    width: 100%;
    margin: 0;
    background: white;
    padding: 10px 20px;
    font-size: 13px;
    text-align: center;
}

.screen .elementContainer > div.notice .innerNotice{
      color: #3780f6;
    background: #e4eefd;
    border: solid 1px #3780f666;
  padding: 10px 20px;
  border-radius: 5px;
}

.screen .elementContainer > div.listLinkBar:hover {
    background: #eee;
    border-bottom: solid 1px #ccc;
}
.screen .elementContainer > div.listLinkBar + div {
    /* border-radius: 0; */
    /* box-shadow: 0px 3px 2px 0px rgb(60 64 67 / 30%), 0px 5px 6px 2px rgb(60 64 67 / 15%); */
}

.screen .elementContainer > div.listLinkBar span.linkTitle{
    font-size: 17px;
    color: #4285f4;
    line-height: 25px;
    font-weight: 400;
    border-left: none;
    padding: 10px;
}
.screen .elementContainer > div.listLinkBar span.linkTitle::after{
    content: "arrow_forward_ios";
    font-family: "Material Symbols Outlined";
    vertical-align: middle;
    display: inline-block;
    padding-left: 3px;
    margin-top: -3px;
}

@media only screen and (min-width: 1024px){
    
    .screen .elementContainer > div.subHeading {
       /* height: 80px;
        line-height: 40px;
        */
    }
}

/************************* TXN SHORTCUT *******************************/

.txnShortcut{
    border-radius: 4px;
    width: calc(50% - 20px);
    height: auto;
    line-height: 15px;
    margin: 10px;
    padding: 5px 10px;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);
    color: white;
    text-align: center;
    display: flex;
    border: solid 1px transparent;
}

.txnShortcut:hover{
    transform: scale(0.98);
    box-shadow: 0px 1px 1px 0px rgb(60 64 67 / 30%), 0px 2px 4px -2px rgb(60 64 67 / 15%);
}
.txnShortcut .iconHolder span {
    color: white;
}

.txnShortcut .iconHolder {
    border-right: solid 1px #0002;
    border-radius: 0;
    margin-right: 0;
    padding-right: 5px;
}

.txnShortcut .name {
    width: calc(100% - 45px);
    padding: 0 5px;
    margin: auto;
    font-size: 14px;
}

.screen .elementContainer .rightButtonHolder{
    width: 200px;
    background: transparent;
    box-shadow: none;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.screen .elementContainer .rightButtonHolder .txnShortcut{
    width: 180px;
}


@media only screen and (max-width: 991px) {
   .screen .elementContainer .rightButtonHolder{
        width: 95%;
        display: flex;
        flex-wrap: wrap;
   }
    .screen .elementContainer .rightButtonHolder .txnShortcut{
        margin: 4px;
        width: calc(50% - 8px);
    }

}


/*Login Related*/

.loginBody{
    background-image: url(https://demo.rbmplus.com/assets/img/complementaryBackground.jpg);
    padding: 0;
    margin: 0;
    min-height: var(--vh100);
    width: 100vw;
    background-size: cover;
}
.loginOverlay{
    position:fixed;
    min-height: 100vh;
    width: 100vw;
    top:0;
    left:0;
    display:flex;
    background: linear-gradient(180deg, #ffffffab 0%, #FFF0 60%, #ffffff61 100%);
}

.loginBox{
    background: white;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 10%), 0px 2px 6px 2px rgb(60 64 67 / 5%);
    width: 400px;
    margin: auto;
    top: auto;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90vh;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    border: solid 1px #EEE;
}

.logoHolder{
    margin: 30px 30px;
    height: 128px;
    width: 100%;
    background: url(https://demo.rbmplus.com/assets/img/logo/RBMlogo_512.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    max-height: calc(var(--vh100) / 4);
}

.loginForm{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 10px;
    margin-top: auto;
}
span#loginErrorMsg {
    text-align: center;
    width: 100%;
    padding: 10px;
    position: absolute;
    bottom: 10px;
}

.loginForm .peekPassword::after {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 17px;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 33px;
    border-radius: 50%;
    cursor: pointer;
    content: "visibility_off";
}

.loginForm .peekPassword.active::after {
    content: "visibility";
    color: #ff3434;
    background: #fff;
}

.loginForm .peekPassword:hover::after ,
.loginForm .peekPassword.active:hover::after {
    background: #ddd;
}
/* Icons */

.iconHolder {
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    position: relative;
    margin: auto 5px auto 0;
    border-radius: 50%;
}
.iconHolder:not(.dark):hover {
    background: #eeeeee;
}
.iconHolder:not(.dark):hover span{
    color: #000;
}

.iconHolder span.material-symbols-outlined {
    font-size: 24px;
    line-height: 40px;
}

.xblue{
    color: blue !important;
}


/* Primary Elements */
#appSpace{
    position: fixed;
    background: #f2eaff;
    width: 100vw;
    height: var(--vh100);
}
#statusBar {
    z-index: 10000;
    font-size: 13px;
    width: 100%;
    position: fixed;
    top: -1px;
    left: 0;
    height: 16px;
    text-align: center;
    overflow: hidden;
    line-height: 16px;
    color: #333;
    background: #eee;
    display: flex;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#statusBar.nohide {
    pointer-events: none;
}
#statusBar div{
    margin: auto;
    width: calc(100% - 100px);
}
#statusBar span {
    line-height: 16px;
    height: 16px;
    font-size: 15px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 1px 10px;
    cursor: pointer;
    color: inherit;
}

#statusBar.nohide span{
    display: none;
}

#statusBar.dismissed {
    top: -20px;
}
#statusBar.warning {
    color: white;
    background: #ff9601;
}
#statusBar.danger {
    color: white;
    background: #ff3434;
}
#statusBar.success {
    color: white;
    background: #34c85a;
}
#statusBar.info {
    color: white;
    background: #00b2ca;
}

#footer {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    bottom: 0;
    font-size: 12px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    background: #F7F7F7;
    color: #777;
    height: 35px;
    align-content: center;
    border-top: solid 1px #DDD;
}
#footer.dismissed{
    bottom: -70px;
}

#footer div{
    white-space: nowrap;
    padding-left: 5px;
    border-collapse: collapse;
}

#footer .versionNo{
    color: #2196f3;
    font-weight: bold;
}
#footer a {
    color: #777;
}

/* All settings like pages*/
.settingsPage {
    width: 100vw;
    height: var(--vh100);
    position: absolute;
    top: 0;
    display: flex;
    background: #fff;
    flex-wrap: wrap;
    padding-top: 0px;
    align-content: flex-start;
    
    left: 102vw;
    opacity: 0.5;
    pointer-events:none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
}

.settingsPage.active {
    transform: translateX(-102vw);
    opacity: 1;
    pointer-events: auto;
}

@media only screen and (min-width: 600px) {
    .settingsPage {
        max-width: 340px;
        left: -340px;
    }
    .settingsPage.active {
        transform: translateX(340px);
    }
}
.settingsPage .settingRow{
    width: 100%;
    display: flex;
    border-bottom: solid 1px #fcfcfc;
    padding: 4px 20px;
}


.settingsPage .settingRow .titleHolder {
    width: calc(100% - 45px);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding: 10px;
}
.settingsPage .settingRow .title {
    width: 100%;
    font-size: 15px;
}


.settingsPage .settingRow .subtitle {
    font-size: 12px;
    color: #777;
    margin-top: 3px;
}


.settingsPage .internalContainer{
    height: calc(var(--vh100) - 90px);
    overflow: auto;
    width: 100%;
}

.settingsPage .settingsHeading{
    background: #651c77;
    display: flex;
    color: white;
    flex-wrap: wrap;
    height: 60px;
    padding: 10px;
    width: 100%;
}

.settingsPage .settingsHeading span.material-symbols-outlined {
    color: white;
}

.settingsPage .settingsHeading .title{
    width: calc(100% - 60px);
    margin: auto 0;
    font-size: 20px;
}

.settingsPage .sidebarProfile{
    width: 100%;
    display: flex;
    border-bottom: solid 1px #eee;
    align-content: center;
    padding: 10px 0;
}

.settingsPage .sidebarProfile .nameHolder {
    width: calc(100% - 122px);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    font-size: 12px;
    color: #555;
}

#navbar2,
#navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    box-shadow: 0 2px 5px -2px #ddd;
    border-bottom: solid 1px #DDD;
    padding: 0;
    flex-wrap: wrap;
    background: white;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* border-right: solid 1px; */
}
#navbar.dismissed{
    transition: 0.9s;
    top:-65px;
}

#navbar2 .brandLogo,
#navbar .brandLogo {
    background: url(https://demo.rbmplus.com/assets/img/logo/RBMlogo_192.png);
    /* width: 64px; */
    /* height: 64px; */
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
    margin-left: 15px;
    margin: 6px;
    height: 48px;
    width: 48px;
    background-size: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
}
#navbar2 .brandLogo.backButton,
#navbar .brandLogo.backButton {
  background: white;
}

#navbar2 .brandName,
#navbar .brandName {
    line-height: 25px;
    font-size: 20px;
    margin: auto;
    margin-left: 0px;
}

#navbar2 .brandLogo.backButton .iconHolder.dark,
#navbar .brandLogo.backButton .iconHolder.dark{
    opacity: 1;
}
#navbar2 .brandLogo .iconHolder.dark,
#navbar .brandLogo .iconHolder.dark{
    opacity: 0;
    background: white;
}
#navbar2 .brandName.txnName,
#navbar .brandName.txnName{
    font-size: 17px;
    line-height: 18px;
    text-transform: capitalize;
}

#navbar .transactionName {
    position: fixed;
    top:60px;
    width: 100%;
    padding: 0 15px;
    border-top: solid 1px #eee;
    height: 29px;
    line-height: 30px;
    background: #fcfcfc;
    font-size: 13px;
}
#navbar .searchBar.inputGroup {
    line-height: 60px;
    height: 60px;
    width: auto;
    margin-right: 20px;
    padding: 0;
    margin-top: 0;
    background: unset;
    display: none;
}
#navbar .searchBar.inputGroup input{
    border-radius: 36px;
    background: hsl(0deg 0% 98%);
    border-color: #ddd;
    margin: auto;
    padding: 10px 15px;
    width: 200px;
}
#navbar .searchBar.inputGroup input+span{
    position: absolute;
    right: 1px;
    top: 13px;
    line-height: 34px;
    height: 34px;
    font-size: 20px;
    background: white;
    width: 34px;
    border-radius: 34px;
    text-align: center;
    cursor: pointer;
    border: solid 1px #ddd;
}

#navbar .smallSearchBar.inputGroup {    
    height: 59px;
    display: flex;
    background: white;
    padding: 10px;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: -60px;
    margin: 0;
    filter: opacity(0);
    pointer-events: none;
    right: 0;
    border-left: solid 1px #ccc;
    border-radius: 0;
}
#navbar .smallSearchBar.inputGroup.active {
    top: 0px;
    filter: opacity(1);
    pointer-events:auto;
}
#navbar .smallSearchBar.inputGroup input{
    border-radius: 9px;
    background: #eaeaeb;
    border-color: #d9d9d9;
    margin: auto 10px;
    padding: 10px 15px;
    width: calc(100% - 70px);
    color: #555;
    caret-color: #2196f3;
}
#navbar .smallSearchBar.inputGroup input+span{
    position: absolute;
    right: 70px;
    top: 13px;
    line-height: 34px;
    height: 34px;
    font-size: 20px;
    width: 34px;
    text-align: center;
    cursor: pointer;
    border: none;
    background: none;
}
#navbar .smallSearchBar.inputGroup span.cancel {
    margin: auto;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #2196f3;
    font-weight: 500;
    cursor: pointer;
}
#navbar .searchSuggestions {
    position: fixed;
    top: 60px;
    width: 100vw;
    right: 0;
    height: var(--vh100);
    background: white;
    border-top: solid 1px #eee;
    display: flex;
    flex-wrap: wrap;
    transform: scale(0.9);
    top: 0;
    filter: opacity(0);
    align-content: flex-start;
    color: #999;
    pointer-events: none;
    border-left: solid 1px #ccc;
    border-radius: 0;
}

#navbar .smallSearchBar.active + .searchSuggestions {
    filter: opacity(1);
    transform: scale(1);
    top: 60px;
    pointer-events: auto;
}

#navbar .searchSuggestions>div {
    width: 100%;
    display: flex;
    padding: 0 10px;
    border-bottom: solid 1px #f7f7f7;
    align-content: center;
}

#navbar .searchSuggestions .term {    
    height: 40px;
    line-height: 40px;
    width: calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#navbar .iconHolder.mainMenu{ 
    margin-right: 5px;
}

#navbar .iconHolder{ 
    margin: auto 0;
}

#navbar.compress {
    height: 62px;
}

#navbar.compress .brandLogo.ripple.transactionLoader {
    margin: 0 5px 0 0;
}

#navbar.compress .transactionName {
    line-height: 22px;
    height: 21px;
}

#navbar .windowSwitcher{
    align-content: space-between;
}
#navbar .windowSwitcher .windowSwitcherHeading{
    background: #651c77;
    display: flex;
    color: white;
    flex-wrap: wrap;
    height: 60px;
    padding: 10px;
    width: 100%;
}

#navbar .windowSwitcher .windowSwitcherHeading span.material-symbols-outlined {
    color: white;
}

#navbar .windowSwitcher .windowSwitcherHeading .title{
    width: calc(100% - 60px);
    margin: auto 0;
    font-size: 20px;
}

#navbar .windowSwitcher .window {
    width: calc(50% - 20px);
    background: white;
    margin: auto;
    height: calc((var(--vh100) / 4) - 50px);
    padding: 0;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    align-content: center;
    border-top: solid 10px #651c77;
}
#navbar .windowSwitcher .window.blankWindow {
    border: dashed 1px #CCC;
    box-shadow: none;
    background: #f7f7f7;
}


#navbar .windowSwitcher .window div {
    width: 100%;
    margin: 0px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: #555;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#navbar .windowSwitcher .window .mainIcon {
    bottom: 55px;
    height: 40px;
}
#navbar .windowSwitcher .window .title {
    font-size: 18px;
    bottom: 45px;
    height: 20px;
    line-height: 20px;
    color: #222;
}
#navbar .windowSwitcher .window .subtitle {
    bottom: 20px;
}

#navbar .windowSwitcher .window .lastOpened {
    bottom: 0;
    border-top: solid 1px #f7f7f7;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#navbar .windowSwitcher .window .lastOpened span.material-symbols-outlined{
    height: 20px;
    line-height: 20px;
}
#navbar .windowSwitcher .window .mainIcon span.material-symbols-outlined {
    font-size: 27px;
}

@media only screen and (max-width: 1024px) {
    #navbar .brandName{
        /*width: calc(100% - 150px);*/
    }
}




/*Profile Settings*/
.editProfile.settingsPage .profile {
    width: 100%;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    border-bottom: solid 1px #eee;
}

.editProfile.settingsPage .profilePhoto {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    margin: 15px auto;
    background: #4285f4;
    color: white;
    display: flex;
    align-items: center;
    font-size: 76px;
    justify-content: center;
}

.editProfile.settingsPage .nameHolder span {
    width: 100%;
    display: block;
    text-align: center;
    padding: 4px 10px;
}

.editProfile.settingsPage .nameHolder {
    width: 100%;
}

.editProfile.settingsPage .nameHolder span.name {
    font-size: 26px;
}

.editProfile.settingsPage  .profile .iconHolder.ripple {
    position: absolute;
    right: 28vw;
    top: 45vw;
    background: white;
    box-shadow: 0px 0px 2px 0px #651c77;
}

#sidebarContainer {
    opacity: 0;
    background: #000A;
    width: 100vw;
    height: var(--vh100);
    left: 0;
    z-index: 1;
    top: 0;
    position: absolute;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#sidebarContainer.active {
    opacity: 1;
    pointer-events: auto;
}


#sidebarContainer .overlay{
    width: 100vw;
    height: var(--vh100);
    position: fixed;
}

#sidebar {
    position: fixed;
    top: 0;
    height: var(--vh100);
    width: 100%;
    max-width: 340px;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67), 0px 2px 6px 2px rgb(60 64 67);
    background: #fefefe;
    transition: 0.4s;
    display: flex;
    flex-wrap: wrap;
    padding-top: 0;
    align-content: flex-start;
    left: 100vw;
    /*transform: translateZ(0px);*/
    transform:translateX(0);
}

#sidebarContainer.active #sidebar {
    transform:translateX(max(-100vw,-340px));
    /*transform: translateZ(0px);*/
}

#sidebar .settingRow{
    width: 100%;
    display: flex;
    border-bottom: solid 1px #fcfcfc;
    padding: 4px 20px;
    align-items: center;
}
#sidebar .settingRow:hover{
  background: #f2f2f2;
}
#sidebar .settingRow.special{
    width: calc(100% - 20px);
    margin: 10px 10px;
    border-bottom: solid 1px #fcfcfc;
    padding: 4px 10px;
    background: linear-gradient(342deg, #008eff, #69d1ff);
    border-radius: 40px;
    color: white;
    border-radius: 53px;
    background: #edf3fb;
    color: #4285f4;
    box-shadow: 2px 2px 4px -5px rgba(0, 0, 0, 0.135), 1px 2px 6px -2px rgba(0, 0, 0, 0.13);
    border: solid 1px #4285f433;
}

#sidebar .settingRow.special:hover{
  background: #bcd5ff;
}

#sidebar .settingRow.special .titleHolder{
    border-left: solid 1px #4285f433;
    height: 30px;
    line-height: 30px;
}


#sidebar .settingRow .titleHolder {
    width: calc(100% - 45px);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding: 10px;
}
#sidebar .settingRow .title {
    width: 100%;
    font-size: 15px;
}


#sidebar .settingRow .subtitle {
    font-size: 12px;
    color: #777;
    margin-top: 3px;
}


#sidebar .internalContainer{
    height: calc(var(--vh100) - 60px);
    padding-bottom: 60px;
    overflow: auto;
    width: 100%;
    padding-top: 100px;
    padding-bottom: 60px;
}

#sidebar .settingsHeading{
    background: #651c77;
    display: flex;
    color: white;
    flex-wrap: wrap;
    height: 60px;
    padding: 10px;
    width: 100%;
}

#sidebar .settingsHeading span.material-symbols-outlined {
    color: white;
}

#sidebar .settingsHeading .title{
    width: calc(100% - 60px);
    margin: auto 0;
    font-size: 20px;
}

#sidebar .sidebarProfile{
    width: calc(100% - 5px);
    display: flex;
    flex-wrap: wrap;
    border-bottom: solid 1px #eee;
    align-content: center;
    padding: 10px 0;
    position: absolute;
    background: white;
    z-index: 1;
    top: 0;
    top: 60px;
}



#sidebar .sidebarProfile .nameHolder {
    width: calc(100% - 160px);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    font-size: 12px;
    color: #555;
}



#sidebar .sidebarProfile .nameHolder .name {
    color: black;
    font-size: 18px;
}

#sidebar  .sidebarProfile .nameHolder span{
    width: 100%;
    font-size: 12px;
}

#sidebar .profilePhoto {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 15px 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #4285f4;
    color: white;
}

#sidebar .sidebarProfile .buttonsHolder{
    margin-right: 7px;
    display: flex;
    flex-wrap: wrap;
    width: 80px;
    justify-content: space-between;
    align-content: center;
}

#sidebar .sidebarButton{    
    background: white;
    border-radius: 50px;
    font-size: 24px;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px auto;
    cursor: pointer;
}
#sidebar .sidebarButton:hover{
    background: #eee;
}

#sidebar .sidebarButton .material-symbols-outlined{
    line-height: 25px;
}

#sidebar .allModules{
    border-bottom: solid 1px #eee;
}



#sidebar .allModules.settingRow .titleHolder {
    width: calc(100% - 90px);
}

#sidebar .moduleArea,
#sidebar .txnArea{
    border-bottom: solid 1px #eee;
    padding: 5px 0;
}


#sidebar .sidebarFooter {
    position: absolute;
    bottom: 0;
    font-size: 12px;
    display: flex;
    width: 100%;
    left: 0;
    background: #f7f7f7;
    border-top: solid 1px #DDD;
    height: 40px;
    text-align: center;
    justify-content: center;
    border-radius: 0px;
    overflow: hidden;
}

#sidebar .sidebarButton.logoutButton{    
    width: 100%;
    /*color: white;
    background: #ff3434;*/
    font-size: 15px;
    border-radius: 0;
    margin: 0;
    height: 40px;
    line-height:40px;
}

#sidebar .sidebarFooter div {
    margin: auto 2px;
    padding: 0px 3px;
}

#sidebar .sidebarFooter a {
    color: #777;
}



@media only screen and (min-width: 1194px) {
    
    
    div#sidebar {
        left: 0;
        opacity: 1;
        box-shadow: none;
        /*top: 60px;*/
        pointer-events: all;
        /*height: calc(100% - 60px);*/
    }
    #sidebarContainer.active #sidebar{
        transform: none;
    }

    #sidebar .sidebarFooter {
        position: absolute;
        bottom: 10px;
        font-size: 12px;
        display: flex;
        width: 90%;
        left: 5%;
        background: #f7f7f7;
        border-top: solid 1px #DDD;
        height: 40px;
        text-align: center;
        justify-content: center;
        border-radius: 20px;
        overflow: hidden;
    }

    #sidebar .settingsHeading {
        display: none;
    }
    #sidebar .sidebarProfile {
        top: 0;
    }
    #sidebar .internalContainer {
        height: var(--vh100);
    }
    
    div#sidebarContainer {
        opacity: 1;
        background: #0000;
    }
    .smallOnly{
        display: none !important;
    }
    
    #navbar .searchBar.inputGroup{
        display: flex;
    }
    
    #sidebar.modalBlur{
        filter: blur(3px) brightness(0.2);
        pointer-events:none;
    }

}



.popupOverlay {
    z-index: 10;
    width: 100vw;
    height: var(--vh100);
    background: #0006;
    position: fixed;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    top: 0;
    left: 0;
}

.popupOverlay.active {
    opacity: 1;
}

.popup {
    z-index: 11;
    width: 80vw;
    max-width: 380px;
    background: radial-gradient(#fff, #fffd);
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 80%), 0px 2px 6px 2px rgb(60 64 67 / 60%);
    backdrop-filter: blur(5px);
    opacity: 0;
    transform: scale(0.75);
    transition: cubic-bezier(0, 1, 1, 1) 0.3s;
}

.popup span.subtitle, .popup span.title, 
.popup span.cancelButton, .popup span.okButton {
    width: 100%;
    text-align: center;
    font-size: 15px;
    color: #222;
    padding: 15px 20px;
}


.popup span.cancelButton, .popup span.okButton {
    width: 50%;
    border-top: solid 1px #eee;
    color: #2196f3;
    font-weight: 500;
    padding: 15px 20px;
}

span.okButton {
    border-right: solid 1px #eeee;
}

.popup span.title {
    font-size: 18px;
    color: black;
    padding: 20px 10px 0 10px;
    font-weight: 500;
}

.popupOverlay.active .popup {
    transform: scale(1);
    opacity: 1;
}






body .material-symbols-outlined {
    font-size: inherit;
    line-height: 1;
    /*color:#555;*/
    color: inherit;
}

.fab, .fa-brands{
    font-size: 20px;
    line-height: 40px;
}
.fas, .fa-solid{
    font-size: 20px;
    line-height: 40px;
    font-weight: 400;
}

a{
    color: #2196f3;
    text-decoration: none;
    transition: 0.4s;
    border-bottom: solid 1px #0d47a100;
}
a:hover{
    color: #0d47a1;
    border-bottom: solid 1px #0d47a1;
}


/* Input Related */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

input:-webkit-autofill{
    -webkit-text-fill-color: #444 !important;
}

.inputGroup{
    display: block;
    float: left;
    margin: 10px 0px 0 0px;
    font-size: 14px;
    background: #fff;
    border-radius: 4px;
    padding: 10px 10px 0 10px;
    line-height: 30px;
    color: #000;
    overflow: hidden;
    position: relative;
    width:100%;
}
.inputGroup > label{
    padding: 0px;
    margin: 0px;
    margin-left: 0;
    margin-top: 3px;
    font-size: 1em;
    height: 13px;
    line-height: 1em;
    width: 100%;
    color: #5f6368;
    overflow: visible !important;
}
.inputGroup > input,
.inputGroup > label{
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inputGroup button {    
    padding: 12px 30px;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0;
    cursor: pointer;
    border: solid 1px #0000;
    border-radius: 0.2rem;
    transition: 0.4s;
    color: #fff;
    box-shadow: inset 0px 0px 5px 3px #0000;
    float: right;
    background: linear-gradient(60deg, #00acc1, #00acc1dd);
}
.inputGroup button:hover, 
.inputGroup button:focus{
    box-shadow: 0 4px 20px -5px #0005;
    *margin-top: 28px;
    *margin-bottom: 2px;
    border: solid 1px #0007;
    outline:0;
    filter: brightness(1.1);
}
.inputGroup input{
	-webkit-appearance: none;
	-moz-appearance:none;
	appearance:none;
    border-radius: 3px 3px 0 0;
    margin-top: 5px;
    color: #202124;
    padding: 6px 7px;
    box-sizing: border-box;
    font-family: inherit;
    transition: 0.4s;
    height: 36px;
    font-size: 1em;
    margin-bottom: 10px;
}
.inputGroup textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    width: 100%;
    font-family: inherit;
    border-radius: 3px 3px 0 0;
    margin-top: 5px;
    padding: 6px 7px;
    box-sizing: border-box;
    transition: 0.4s;
    resize: vertical;
}
.inputGroup input,
.inputGroup textarea{
    border: solid 1px transparent;
    border-bottom: solid 1px #ff9800;
    background: #fffaec;
}
.inputGroup input.isfilled,
.inputGroup textarea.isfilled{
    border: solid 1px #dedede;
    background: #fff;
}
.inputGroup input:focus,
.inputGroup textarea:focus{
    outline: none;
    border-bottom: solid 1px #2196f3;
    background: #eef8ff;
}
.inputGroup input:disabled, 
.inputGroup textarea:disabled{
    outline: none;
    border: solid 1px #ddd;
    background: #eee;
}
.inputGroup input+label{
    position: absolute;
    pointer-events: none;
    transition: 0.4s;
    
    top: -0.2rem;
    left: 0.4rem;
    font-size: 0.7em;
    text-transform: uppercase;
    
    font-weight: bolder;
    
}
.inputGroup textarea+label{
    position: absolute;
    /*top: 24px;*/
    /*left: 0.9rem;*/
    pointer-events: none;
    transition: 0.4s;
    
    top: -0.2rem;
    left: 0.4rem;
    font-size: 0.7em;
    text-transform: uppercase;
    
    font-weight: bolder;
}


.inputGroup input[type=time] + label,
.inputGroup input[type=date] + label,
.inputGroup input[type=datetime-local] + label,
.inputGroup input[type=month] + label,
.inputGroup input[type=week] + label,
.inputGroup input[type=radio] + label,
.inputGroup input[type=range] + label,
.inputGroup input[type=color] + label,
.inputGroup input[type=file] + label{
    top: -0.2rem;
    left: 0.4rem;
    font-size: 0.7em;
    text-transform: uppercase;
}
.inputGroup input:focus + label, 
.inputGroup textarea:focus + label{
    top: -0.2rem;
    left: 0.4rem;
    font-size: 0.7em;
    
    color: #11b8cc;
    font-weight: bolder;
    text-transform: uppercase;
}
.inputGroup input:disabled + label, 
.inputGroup .isfilled + label{
    top: -0.2rem;
    left: 0.4rem;
    font-size: 0.7em;
    
    color: #9e9e9e;
    font-weight: bolder;
    text-transform: uppercase;
}
.inputGroup input[type=checkbox]{
    float: none;
    height: 20px;
    width: 20px;
    margin: 5px 0;
    
	-webkit-appearance: auto;
	-moz-appearance:auto;
	appearance:auto;
}

.inputGroup input[type=checkbox]:focus + label,
.inputGroup input[type=checkbox] + label{
    top: 0;
    position: relative;
    left: 0;
    font-size: 1.1em;
    font-weight: normal;
    color: #5f6368;
    height: auto;
    line-height: 30px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 7px;
    pointer-events: all;
    box-sizing: border-box;
    width: calc(100% - 27px);
}
.inputGroup input[type=checkbox]:checked + label{
    color: #11b8cc;
}
.inputGroup input[type=checkbox]:hover + label,
.inputGroup input[type=checkbox] + label:hover,
.inputGroup input[type=checkbox]:focus + label {
    background: #11b8cc55;
    color: #5f6368;
}
.checkbox-holder {
    position: relative;
    display: flex;
}

span.ValErrorMsg {
    color: red;
    font-size: 12px;
    margin: 3px 5px 10px 3px;
    width: 100%;
    display: none;
}
span.ValErrorMsg.Mobile{
  display: block;
  margin-left: 10px;
  color: #444;
}


.infoMsg.Mobile.Notice {
    width: 100%;
    margin: 0;
    background: white;
    padding: 0 7px;
    font-size: 13px;
    text-align: center;
}

.infoMsg.Mobile.Notice .innerNotice{
      color: #3780f6;
      border-radius: 5px;
      width: fit-content;
      margin-bottom: 10px;
      display: flex;
      align-content: center;
      flex-wrap: nowrap;
      line-height: 17px;
      text-align: left;
}



input[name="Mobile"]{
  letter-spacing: 3px;
}

input.validationError {
    border-bottom: solid 1px red !important;
}

/* Ripple Effect */
.ripple {
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden !important;
    transform: translate3d(0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: var(--rippleTop,0);
  left:  var(--rippleLeft,0);
  pointer-events: none;
  background-image: radial-gradient(circle, #00bcd4 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 1s;
}
.ripple.dark:after {
   background-image: radial-gradient(circle, #000000a6 10%, transparent 10.01%)
}
.ripple.pulse:after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}
.ripple:hover{
    filter: brightness(0.95);
}
/* Disable ripple in smaller screens */
@media only screen and (max-width: 1024px){
    .ripple::after {
       background-image: radial-gradient(circle, #0000 10%, transparent 10.01%)
    }
    
}

/*Material Icons related*/
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}
.material-symbols-outlined.nofill {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}
.material-symbols-outlined.thin {
  font-variation-settings:
  'FILL' 0,
  'wght' 100,
  'GRAD' 0,
  'opsz' 48
}
.material-symbols-outlined.thick {
  font-variation-settings:
  'FILL' 0,
  'wght' 500,
  'GRAD' 0,
  'opsz' 48
}
.material-symbols-outlined.xthick {
  font-variation-settings:
  'FILL' 0,
  'wght' 900,
  'GRAD' 200,
  'opsz' 48
}

/***********************  Screen and Documents ****************************/


/************************* SCREENS *******************************/

.screen{
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--vh100);
    position: fixed;
    opacity:1;
    display: none;
    margin-left: calc(100vw - 768px);
    /* background: transparent; */
}
.screen.activeScreen{
    display:block;
}
.screen.emptyItem{
    display:block;
}
.screen.newScreen{
    opacity:0;
    pointer-events: none;
}
.screen .elementContainer{
    width: 100vw;
    height: var(--vh100);
    position: fixed;
    top: 0;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    background: #eee;
    padding: 60px 0px 60px 0px;
    align-content: flex-start;
    justify-content: center;
    left: 0;
    transform: translateX(0);
    opacity: 1;
}
.screen.menuScreen .elementContainer{
  background:white;
}

.screen.newScreen .elementContainer{
    transform: translateX(60px);
    opacity: 0.5;
}
.screen .txnHeading span.material-symbols-outlined {
    color: white;
}
.screen .txnHeading .title{
    width: calc(100% - 90px);
    margin: auto 0;
    font-size: 20px;
}
.screen.activeMenuScreen {
    display: block;
}
/* For back button only*/
.screen.fast{
    transition: 0.2s;
}
.screen.fast .elementContainer{
    transition: 0.2s;
}
/* Documnents */

.screen .elementContainer > .document{
    height: auto;
    background: white;
    overflow: hidden;
    display: flex;
    max-width: 991px;
    flex-wrap: wrap;
    margin: 0 0 20px 0;
    padding: 0px;
    border-radius: 0px;
    width: 100%;
}
.screen .elementContainer > .document.limit600{
    max-width: 600px;
}
.screen .document .documentContainer{
    padding: 10px;
    overflow:auto;
    background: white;
}


/************************** Floating Button & bottomLinks  ******************************/

.floatingButton2,
.floatingButton{
    position: absolute;
    bottom: 30px;
    right: 15px;
    border-radius: 500px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    background:linear-gradient(342deg, #008eff, #69d1ff);
    z-index: 0;
    box-shadow: 0px 0px 3px #0005;
    color: white;
}

.floatingButton2 .iconHolder,
.floatingButton .iconHolder{
    margin: auto;
}

.floatingButtonMenu2 .iconHolder span.material-symbols-outlined,
.floatingButtonMenu .iconHolder span.material-symbols-outlined {
    color: white;
    font-size:40px;
}

.floatingButton2:hover,
.floatingButton:hover {filter: brightness(1.1);box-shadow: 0px 1px 2px -1px rgb(60 64 67 / 80%), 0px 4px 11px -1px rgb(60 64 67 / 60%);cursor: pointer;}



#bottomLinksWrapper {
    position: absolute;
    width: 100%;
    height: 60px;
    bottom: 0;
    left: 0;
    z-index: 0;
    filter: drop-shadow(0px 0px 3px #0005);
    }
    
#bottomLinks2,
#bottomLinks{
    width: 100%;
    height: 60px;
    /*background: linear-gradient(135deg, #008eff, #abe5ff);*/
    background: linear-gradient(135deg, #008eff, #69d1ff);
    color: white;
    z-index: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 80px 10px 10px;
    clip-path: polygon( 0% 0%,  calc(100% - 78px) 0px, calc(100% - 77px) 8.06225774829855px, calc(100% - 76px) 11.3137084989848px, calc(100% - 75px) 13.7477270848675px, calc(100% - 74px) 15.7480157480236px, calc(100% - 73px) 17.464249196573px, calc(100% - 72px) 18.9736659610103px, calc(100% - 71px) 20.3224014329016px, calc(100% - 70px) 21.540659228538px, calc(100% - 69px) 22.6495033058122px, calc(100% - 68px) 23.6643191323985px, calc(100% - 67px) 24.5967477524977px, calc(100% - 66px) 25.4558441227157px, calc(100% - 65px) 26.2488094968134px, calc(100% - 64px) 26.9814751264641px, calc(100% - 63px) 27.6586333718787px, calc(100% - 62px) 28.2842712474619px, calc(100% - 61px) 28.8617393793236px, calc(100% - 60px) 29.3938769133981px, calc(100% - 59px) 29.8831055949679px, calc(100% - 58px) 30.3315017762062px, calc(100% - 57px) 30.7408522978788px, calc(100% - 56px) 31.1126983722081px, calc(100% - 55px) 31.4483703870328px, calc(100% - 54px) 31.7490157327751px, calc(100% - 53px) 32.0156211871642px, calc(100% - 52px) 32.2490309931942px, calc(100% - 51px) 32.4499614791759px, calc(100% - 50px) 32.6190128606002px, calc(100% - 49px) 32.7566787083184px, calc(100% - 48px) 32.86335345031px, calc(100% - 47px) 32.9393381840012px, calc(100% - 46px) 32.9848450049413px, calc(100% - 45px) 33px, calc(100% - 44px) 32.9848450049413px, calc(100% - 43px) 32.9393381840012px, calc(100% - 42px) 32.86335345031px, calc(100% - 41px) 32.7566787083184px, calc(100% - 40px) 32.6190128606002px, calc(100% - 39px) 32.4499614791759px, calc(100% - 38px) 32.2490309931942px, calc(100% - 37px) 32.0156211871642px, calc(100% - 36px) 31.7490157327751px, calc(100% - 35px) 31.4483703870328px, calc(100% - 34px) 31.1126983722081px, calc(100% - 33px) 30.7408522978788px, calc(100% - 32px) 30.3315017762062px, calc(100% - 31px) 29.8831055949679px, calc(100% - 30px) 29.3938769133981px, calc(100% - 29px) 28.8617393793236px, calc(100% - 28px) 28.2842712474619px, calc(100% - 27px) 27.6586333718787px, calc(100% - 26px) 26.9814751264641px, calc(100% - 25px) 26.2488094968134px, calc(100% - 24px) 25.4558441227157px, calc(100% - 23px) 24.5967477524977px, calc(100% - 22px) 23.6643191323985px, calc(100% - 21px) 22.6495033058122px, calc(100% - 20px) 21.540659228538px, calc(100% - 19px) 20.3224014329016px, calc(100% - 18px) 18.9736659610103px, calc(100% - 17px) 17.464249196573px, calc(100% - 16px) 15.7480157480236px, calc(100% - 15px) 13.7477270848675px, calc(100% - 14px) 11.3137084989848px, calc(100% - 13px) 8.06225774829855px, calc(100% - 12px) 0px,  100% 0, 100% 100%, 0% 100%);
}
#bottomLinks.noClip{
    clip-path: none;
}
#bottomLinks2 .txnShortcut,
#bottomLinks .txnShortcut{
    margin: 0 10px;
}

#bottomLinks2 .leftButton,
#bottomLinks2 .rightButton,
#bottomLinks .leftButton,
#bottomLinks .rightButton{
    max-width: 40%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    border: solid 1px #00bcd4;
    padding: 5px 5px 5px 10px;
    border-radius: 5px;
    background: #00b2ca;
    color: white;
    margin: 0 8px;
}

#bottomLinks2 .rightButton .content,
#bottomLinks2 .leftButton .content,
#bottomLinks .rightButton .content,
#bottomLinks .leftButton .content{
    max-width: calc(100% - 30px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    font-size: 15px;
}

#bottomLinks2 .rightButton .iconHolder,
#bottomLinks2 .leftButton .iconHolder,
#bottomLinks .rightButton .iconHolder,
#bottomLinks .leftButton .iconHolder{
    margin-right: 0;
    width: 24px;
    height: 24px;
    
}

#bottomLinks2 .leftButton,
#bottomLinks .leftButton {
    margin-left: auto !important;
    background: white;
    color: black;
}

#bottomLinks2 .rightButton .iconHolder span, 
#bottomLinks2 .leftButton .iconHolder span,
#bottomLinks .rightButton .iconHolder span, 
#bottomLinks .leftButton .iconHolder span{
    color: inherit;
    line-height: 24px;
}

#bottomLinks2 .txnShortcut .name,
#bottomLinks .txnShortcut .name{
    font-size:  12px;
}

#bottomLinks2 .txnShortcut .iconHolder span.material-symbols-outlined ,
#bottomLinks .txnShortcut .iconHolder span.material-symbols-outlined {
    line-height: 30px;
}

#bottomLinks2 .txnShortcut .iconHolder,
#bottomLinks .txnShortcut .iconHolder {
    height: 30px;
    width: 30px;
}

@media only screen and (min-width: 850px){
    #bottomLinks,
    #bottomLinks2{
        border-radius: 5px 5px 0 0;
    }
}
/* Attachment Popups */
.attachmentPopup {
    position: absolute;
    top: calc(15vh + 70px);
    background: white;
    border: solid 1px gray;
    height: calc(70vh - 170px);
    left: calc(15% + 10px);
    width: calc(70% - 20px);
    border-radius: 10px;
    padding: 10px;
    overflow: hidden;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 80%), 0px 2px 6px 2px rgb(60 64 67 / 60%);
}

.attachmentPopup .closeButton{
    font-family: 'Material Symbols Outlined';
    position: absolute;
    top: 0px;
    right: 0;
    font-size: 30px;
    background: red;
    border-radius: 0 0 0 10px;
    color: white;
    width: 40px;
    text-align: center;
    height: 35px;
    line-height: 35px;
}

.attachmentPopup .deleteButton{
    font-family: 'Material Symbols Outlined';
    position: absolute;
    bottom: 0px;
    right: 0;
    font-size: 30px;
    background: red;
    color: white;
    width: 100%;
    text-align: center;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
}

/* Managing the whole 3-part view thing 
includes screens, floating buttons and bottomlinks
*/
@media only screen and (max-width: 849px){
    #bottomLinks.noClip{
        display: none;
    }
    
    .floatingButton{
        filter: none;
    }
    
    #navbar2{
        display: none;
    }
}

@media only screen and (min-width: 850px){
    .screen.activeMenuScreen {
        display: block;
    }
    .screen.menuScreen .elementContainer{
        overflow-y: scroll;
        border-right: solid 1px hsl(0 0% 70% / 1);
        border-left: solid 1px hsl(0 0% 70% / 1);
    }
    
    /* Assume this is no longer a touch based thing */
    #sidebar .internalContainer{
        overflow-y: scroll !important;
    }
    #sidebar .internalContainer::-webkit-scrollbar ,
    .elementContainer::-webkit-scrollbar,
    .modal *::-webkit-scrollbar{
      width: 4px; 
      background: hsl(0 0% 70% / 1);
    }
    
    #sidebar .internalContainer::-webkit-scrollbar-thumb ,
    .elementContainer::-webkit-scrollbar-thumb,
    .modal *::-webkit-scrollbar-thumb {
      background: hsl(0 0% 10% / 1);
    }
    
    #navbar,
    #bottomLinks,
    .screen.activeScreen,
    .screen .elementContainer{
        width: 475px;
        margin-left: calc(100vw - 475px);
        padding-left: 0px !important;
    }
    
    #navbar2,
    #bottomLinks2{
        width: calc(100vw - 480px);
    }
    
    
    .screen.menuScreen,
    .screen.menuScreen .elementContainer {
        margin-left: 0;
        width: calc(100vw - 475px);
    }
    
    
    .floatingButton2{
        right: calc(480px + 15px);
    }
    
    
    
    /*Navbar no longer has a back button*/
    #navbar.emptyTxn .txnName{
        opacity: 0;
    }
    
    #navbar .brandName.txnName{
        margin-left: 10px;
    }
    #navbar.emptyTxn .brandLogo{
        display:none;
    }
    
    #navbar .searchSuggestions,
    #navbar .smallSearchBar.inputGroup{
        width: calc(100vw - 480px);
        left: 0px;
    }

  #navbar .secondSearch{
    display: none;
  }
    
}

@media only screen and (min-width: 900px){
    
    #navbar,
    #bottomLinks,
    .screen.activeScreen,
    .screen .elementContainer{
        width: calc(100vw - 425px);
        margin-left: 425px;
    }
    
    #navbar2,
    #bottomLinks2,
    .screen.menuScreen,
    .screen.menuScreen .elementContainer {
        margin-left: 0;
        width: 425px;
    }
    
    
    #navbar2,
    #bottomLinks2{
        width: 420px;
    }
    .floatingButton2{
        right: calc(100vw - 420px + 15px);
    }
  
    #navbar .searchSuggestions,
    #navbar .smallSearchBar.inputGroup{
        width: 420px;
        left: 0px;
    }
}

@media only screen and (min-width: 1194px){
    
    #navbar,
    #bottomLinks,
    .screen.activeScreen,
    .screen .elementContainer{
        width: 475px;
        margin-left: calc(100vw - 475px);
    }
    
    #navbar2,
    #bottomLinks2,
    .screen.menuScreen,
    .screen.menuScreen .elementContainer {
        margin-left: 340px;
        width: calc(100vw - 475px - 340px);
    }
    
    
    #navbar2,
    #bottomLinks2{
        width: calc(100vw - 480px - 340px);
    }
    .floatingButton2{
        right: calc(480px + 15px);
    }

  
    #navbar .searchSuggestions,
    #navbar .smallSearchBar.inputGroup{
        width: calc(100vw - 480px - 340px);
        left: 340px;
    }
}

@media only screen and (min-width: 1240px){
    
    #navbar,
    #bottomLinks,
    .screen.activeScreen,
    .screen .elementContainer{
        width: calc(100vw - 425px - 340px);
        margin-left: calc(425px + 340px);
    }
    
    #navbar2,
    #bottomLinks2,
    .screen.menuScreen,
    .screen.menuScreen .elementContainer {
        margin-left: 340px;
        width: 425px;
    }
    
    
    #navbar2,
    #bottomLinks2{
        width: 420px;
    }
    .floatingButton2{
        right: calc(100vw - 420px - 340px + 15px);
        filter: brightness(1);
    }

  
    #navbar .searchSuggestions,
    #navbar .smallSearchBar.inputGroup{
        max-width: 420px;
        left: 340px;
    }
}
/*
@media only screen and (min-width: 1534px){
    
  
    #navbar,
    #bottomLinks,
    .screen.activeScreen,
    .screen .elementContainer{
        width: 768px;
        margin-left: calc(100vw - 768px);
    }
    
    #navbar2,
    #bottomLinks2,
    .screen.menuScreen,
    .screen.menuScreen .elementContainer {
        margin-left: 340px;
        width: calc(100vw - 768px - 340px);
    }
    
    
    #navbar2,
    #bottomLinks2{
        width: calc(100vw - 768px - 340px - 5px);
    }
    .floatingButton2{
        right: calc(768px + 15px + 5px);
    }
}
*/
@media only screen and (min-width: 1534px){
  
    #navbar,
    #bottomLinks,
    .screen.activeScreen,
    .screen .elementContainer{
        width: calc(100vw - 340px - 425px);
        margin-left: calc(340px + 425px);
        /*
        padding: 65px calc((100vw - 340px - 620px - 768px)/4) !important;
        padding-bottom: 0px !important;
        */
    }
    
    
    #navbar2,
    #bottomLinks2,
    .screen.menuScreen,
    .screen.menuScreen .elementContainer {
        margin-left: 340px;
        width: 425px;
        /*
        padding: 60px 0 0 0 !important;
        */
    }
    
    #navbar2,
    #bottomLinks2{
        width: 420px;
    }
    
    
    .floatingButton2{
        right: calc(100vw - 340px - 420px + 15px);
    }
}
@media only screen and (min-width: 1770px)
{  
    .screen .elementContainer > div.document.viewElement{
      margin: 20px 0 20px 0;
    }
}
/*
@media only screen and (min-width: 1024px){
    .screen .elementContainer > .document{
        border-radius: 4px;
    }
}
*/
/************************** Toast msgs *********************************/
.toastMsg {
    z-index: 1;
    position: absolute;
    bottom: 0;
    width: 80%;
    max-width: 300px;
    background: #000;
    color: white;
    padding: 12px 20px 12px 20px;
    border-radius: 8px;
    font-size: 12px;
    text-align: left;
    left: 50%;
    transform: translate(-50%, 0);
    opacity: 0;
    display: flex;
    align-items: center;
    transition: .4s cubic-bezier(0.26, 0.81, 0.25, 1.37);
    /*pointer-events: none;*/
    box-shadow: rgb(0 0 0 / 19%) 5px 5px 20px, rgb(0 0 0 / 23%) 3px 3px 6px;
    justify-content: space-between;
}

.toastMsg.show {
    bottom: 40px;
    opacity: 0.8;
}
.toastMsg.oldToast{
    bottom: 55px;
    transform: translate(-50%, 0) scale(0.9);
    transform-origin: center;
    filter: brightness(2) blur(1px);
    pointer-events: none;
    opacity: 0.1;
}

.toastMsg span.command{
    color: yellow;
    font-weight: 500;
    padding: 5px 7px;
    border-radius: 6px;
    margin: -5px 0px -5px 0;
    cursor: pointer;
    min-width: fit-content;
}
.toastMsg span.closeToast + span.command{
    margin-right: 20px;
}

.toastMsg.show span.command:hover{
    background: #444;
}

.toastMsg span.closeToast {
    position: absolute;
    top: calc(50% - 15px);
    right: 6px;
    font-family: 'Material Symbols Outlined';
    font-size: 24px;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    color: #AAA;
    border-radius: 4px;
    font-weight: 100;
}
.toastMsg span.closeToast:hover {
    background: #000;
    cursor: pointer;
}



/************************* WORKING - MODALS ****************************************/

.modalOverlay {
    z-index: 10;
    width: 100vw;
    /* height: var(--vh100); */
    position: fixed;
    /* opacity: 0; */
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin:0;
    bottom:0;
    top: 0;
    transition: 0.2s;
    /*touch-action: none;*/
}
.modalOverlay.active {
    /* opacity: 1; */
    /* transition: 0.2s; */
    background: rgba(0, 0, 0, 0.5);
    /* transition: 0.4s; */
}
.modalOverlay.originLinked.active {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: none;
}

.modal {
    z-index: 11;
    width: 95vw;
    max-width: 500px;
    background: white;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 80%), 0px 2px 6px 2px rgb(60 64 67 / 60%);
    transform: scale(1);
    transition: 0.3s;
    padding: 50px 0 0 0;
    margin: auto;
    border-radius: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    max-height: calc(var(--vh100));
    user-select: none;
    /*touch-action: none;*/
    /* opacity: 0; */
    transform: translateY(100%);
}

.modalOverlay.originLinked .modal {
  transform: scale(0.5);
}

.modalActiveArea{        
    padding: 10px 20px 20px 20px;
}


@media only screen and (max-width: 500px) {
    .modal{
        width: 100%;
        border-radius: 10px 10px 0 0;
        margin: auto 0 0 0;
    }
    .modalActiveArea{        
        padding: 10px 0 20px 0;
    }
  .modalActiveArea .toothSelection.displayMode{
    margin: -10px 0;
    width: 100%;
  }
    .modalOverlay{
        align-content: flex-end;
    }
}
.originLinked .modal{
    width: 210px;
    max-height: 400px;
    overflow: hidden;
    padding: 0;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 31%), 0px 2px 6px -3px rgb(60 64 67 / 60%);
    position: absolute;
    Left: var(--modalLeft);
    Top: var(--modalTop);
    Right: var(--modalRight);
    Bottom: var(--modalBottom);
    border-radius: 3px;
}

.originLinked .modal .modalTitle{
    display: none;
}

.originLinked .modal .select{
    margin: 0px;
}

.originLinked .modal .select .option{
    margin: 0px;
    width: 100%;
    min-height: 35px;
    font-size: 14px;
    padding: 10px 10px;
    background: white;
    color: #444;
    box-shadow: none;
    border-top: none;
    border-radius: 0;
    justify-content: left;
    border: none;
    border-top: solid 1px #eee;
}
.originLinked .modal .select .option:first-child{
    border-top: none;
}

.originLinked .modal .option .iconHolder{
    width: fit-content;
    margin-right: 5px;
}
.originLinked .modal .option .iconHolder span.material-symbols-outlined,
.originLinked .modal .option .iconHolder i
{
    height: 25px;
    line-height: 25px;
}

.originLinked .modal .option i,
.originLinked .modal .option span.material-symbols-outlined
{
    width: 40px;
}

.originLinked .modal .option .iconHolder i{
    font-size: 15px;
}
.originLinked .modal .modalActiveArea{
    padding:0;
    min-height: 0;
}

.modal .modalProgressBar {height: 14px;
    background: #04aa6d;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0 30px 0 0;
    text-align: center;
    font-size: 12px;
    color: white;
    font-family: monospace;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: center;
    transition: 1s 0.2s;
    padding: 0 5px;
    /*border-top: 14px solid transparent;
    border-right: 14px solid white;*/
}

.modal.expandFull{
    max-width: 500px;
    height: 100vh;
    max-height: 900px;
}

@media only screen and (max-width: 1024px) {
    .modal.pull-up{
        top: var(--keybordPoint);
        position: fixed;
        bottom: 0px;
        max-height: unset;
    }

    .modal.pull-up .modalActiveArea,
    .modal.expandFull .modalActiveArea{
        align-content: flex-start;
    }
    
    .modal.expandFull{
        top: 0;
        position: fixed;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0px;
    }
    
}

.modal span.title {
    font-size: 18px;
    color: black;
    padding: 20px 10px 0 10px;
    font-weight: 500;
}
.modalOverlay.active .modal {
    transform: scale(1) translateY(0px);
    opacity: 1;
}


.modal img{
    max-width: 100%;
    width: fit-content;
    height: fit-content;
    margin: auto;
}

.modalOverlay .modal #qrcode{
    width: 100%;
    display: flex;
    justify-content: center;
}

.modalTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px #eee;
    width: 100%;
    background: #11b8cc;
    /* background: #dafbff; */
    font-weight: bold;
    line-height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    flex-wrap: nowrap;
    /* color: #222; */
}
.onlyCloseButton.modalTitle{
    display: none;
}

/*
.modal.noTitleBar .modalTitle{
    display: none;
}
.modal.noTitleBar .modalTitle.onlyCloseButton{
    display: flex;
    border: none;
    justify-content: space-between;
    padding-left: 90px;
    height: 30px;
    overflow: hidden;
}

.modal.noTitleBar .modalTitle.onlyCloseButton .titleText{
    color: black;
    text-align: center;
    font-weight: normal;
}

.modal.noTitleBar .modalTitle.onlyCloseButton .iconHolder{
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    display: flex;
    justify-content: center;
    border-radius: 0 0 0 5px;
    margin: 0;
}
.modal .modalTitle.onlyCloseButton .iconHolder:hover{
    background:#ff9e9e;
}
.modal.noTitleBar .modalTitle.onlyCloseButton .iconHolder span.material-symbols-outlined{
    line-height: 30px;
    width: 30px;
}
.modal.noTitleBar{
    padding-top: 33px;
}

.modal.noTitleBar .modalActiveArea{
    max-height: calc(100vh - 70px);
}
*/
.modal .modalActiveArea{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    max-height: calc(100vh - 50px);
    position: relative;
    min-height: 120px;
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    align-content: flex-start;
}

.modal .option .iconHolder,
.modal .option .iconHolder span.material-symbols-outlined{
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modalTitle span.material-symbols-outlined {
    color: white;
    /* color: black; */
}
.modalTitle .titleText {
    width: calc(100% - 90px);
    font-weight: 300;
    display: flex;
    /* font-family: 'Poppins'; */
}

.modalTitle .titleText .modalHelp{
  text-align: center;
  cursor: pointer;
  position: relative;
  margin: auto 0 auto auto;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  /* font-size: 24px; */
  line-height: 50px;
  height: 30px;
  display: flex;
  align-content: center;
  border: solid 1px;
  border-radius: 60px;
  padding: 0 3px 0 8px;
}

.modalTitle .titleText .modalHelp:hover{
  /* backdrop-filter: brightness(2); */
  background: #4285f4;
  border: solid 1px #ffffff;
}
.modalTitle .titleText .modalHelp span{
  font-size: 15px;
  line-height: 28px;
  height: 28px;
  font-weight: 400;
}

.modalTitle .titleText .modalHelp span.material-symbols-outlined{
  font-size: 24px;
  display: block;
  margin-left: 5px;
  margin-right: 5px;
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
}
.modalTitle .titleText .modalHelp span.material-symbols-outlined:first-child{
margin-left: 0;
}

.modal button.formButton {
    padding: 12px 30px;
    font-size: .75rem;
    cursor: pointer;
    border: solid 1px #0000;
    transition: 0.4s;
    color: #fff;
    box-shadow: 0px 0px 1px -1px rgb(60 64 67 / 30%), 0px 1px 5px 1px rgb(60 64 67 / 15%);
    margin: 5px 5px 0px auto;
}
.modal .modalTitle .iconHolder{
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.modal .modalTitle .iconHolder:hover{
    background: #eee9;
}
.modal .modalActiveArea .plainText{
    margin: 10px;
    color: black;
    width: 100%;
}
.modal .modalActiveArea .plainText h4{
  margin: 0  
}

.modal .modalActiveArea .label{
    text-transform: uppercase;
    font-size: 12px;
    color: black;
    font-weight: 600;
    line-height: 20px;
    margin: 10px;
    margin-bottom: 0;
}
.modal .halfInput{
    width: calc(50% - 5px);
    margin: 0 5px 0 0;
}
.modal .inputGroup input,
.modal .inputGroup textarea{
    border-radius: 0 ;
    border-right: none ;
    border-left: none ;
    border-top: none ;
}
.modal .select{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-content: center;
    margin: 10px 5px;
}


.modal .filterHolder + .select{
  width: calc(100% - 150px);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-top: -9px;
  border-bottom: solid 1px #eaeaec;
  /* padding-top: 55px; */
}
.modal .filterHolder + .select button.option{
  margin: 15px 10px 0 auto;
  height: 40px;
  min-height: 40px;
  border-radius: 100px;
  border: solid 1px #4285f4;
  color: #4285f4;
}
.modal .filterHolder + .select button.option .iconHolder{
  margin-left: 0px;
  color: inherit;
}
.modal .filterHolder + .select .option{
    border: none;
    box-shadow: none;
    margin: 0px 10px;
    background: none;
    color: #444;
    border-bottom: solid 1px #eaeaea;
    border-radius: 0;
    font-size: 14px;
    min-height: 55px;
}

.modal .filterHolder + .select .infoMsg.Mobile.Notice{
   min-height: 55px;
   padding-top: 5px;
}
.modal .filterHolder + .select .option.footer.cancel{
  margin: 0 10px;
}
.modal .filterHolder + .select .option .iconHolder{
  margin-left: -9px;
  color: #11b8cc;
}

.modal .filterHolder + .select input{
  font-size: 14px;
  margin-top: 14px;
  margin-bottom: 0px;
}

.modal .filterHolder + .select .plainText{
  margin: 0;
  height: 55px;
  line-height: 55px;
  padding: 0 5px;
}
.modal .filterHolder + .select .plainText h4{
  color: #777;
  font-weight: 300;
  font-size: 20px;
  font-family: 'Poppins', 'Roboto', sans-serif;
  text-align: right;
  padding-right: 10px;
}

.modal .filterHolder{
  width: 150px;
  margin-top: -10px;
  overflow: hidden;
  height: calc(100% - 50px);
  background: #f5f5f6;
  min-height: 350px;
}

.modal .filterHolder .option.left:first-child{
  border-top: solid 1px #eaeaec
}

.modal .filterHolder .option.left{
  width: 100%;
  margin: 0;
  border-radius: 0;
  background: #f5f5f6;
  border: none;
  border-bottom: solid 1px #eaeaec;
  color: #333;
  font-size: 13px;
  box-shadow: none;
}


.modal .filterHolder .option.left.active{
  background: white;
  font-weight: bold;
  z-index: 3;
  /* box-shadow: 0px 0px 12px -8px; */
  position: relative;
}
.modal .filterHolder ~ .option.footer{
  margin-bottom: 0;
}


.modalOverlay .modal .filterHolder .option .filterSelection{
  color: #666;
  font-size: 11px;
  font-weight: normal;
}

.modal .option {
    cursor: pointer;
    min-height: 55px;
    width: calc(100% + 40px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: white;
    padding: 7px 10px;
    margin: 5px;
    box-shadow: 2px 2px 4px -5px rgba(0, 0, 0, 0.135), 1px 2px 6px -2px rgba(0, 0, 0, 0.13);
    border: solid 1px #4285f433;
    background: #03A9F4;
    border-radius: 3px;
    background: #edf3fb;
    color: #4285f4;
}
.modal .option.red{  
    background: #fbeded;
    color: #f44242;
    border: solid 1px #f4424233;
}
.modal .option.red:hover{  
    background: #ffbcbc;
}
.modal .option.small{
    min-height: 45px;
    /* background: white; */
    /* color: #444; */
    /* box-shadow: none; */
    /* border: none; */
    /* border-bottom: solid 1px #ddd; */
    /* border-radius: 0; */
}
.modal .option:last-child{
    /* border-bottom: solid 1px #eee; */
}
.modal .option.half{
    width: calc(50% - 10px);
}
.modal .option.footer {
    font-size: 15px;
    margin: 20px 20px 20px auto;
    height: 40px;
    line-height: 20px;
    align-items: center;
    width: auto;
    padding: 5px 5px 5px 20px;
    background: #4285f424 !important;
    border: solid 1px #4285f4;
    color: #4285f4;
    border-radius: 50px;
    min-height: unset;
    margin-top: 20px;
    box-shadow: none;
}

@media only screen and (max-height: 665px) {
    .modal .option.footer {
        margin: 5px 20px 10px auto;
    }
}

.modal .option.footer.cancel {
    color: #4285f4;
    margin-left: 20px;
    margin-right: auto;
    padding: 0;
    border: none;
    background: transparent !important;
    font-weight: normal;
    box-shadow: none;
}
.modal .option.footer .iconHolder span.material-symbols-outlined{
    font-size: 16px;
}
.modal .option .iconHolder span.material-symbols-outlined {
    color: inherit;
    font-size: 24px;
    width: 30px;
    font-weight: bold;
    text-align: center;
    border-radius: 30px;
    margin: 0 5px;
}
.modal .option .iconHolder {
    width: 30px;
    margin-right: 10px;
}
.modal .option:hover {
    transform: translateY(-2px);
    background: #bcd5ff;
}

.modal .option .simple-icon-holder span{
    color: inherit;
    font-size: 24px;
    font-weight: bold;
    margin-right: 5px;
}

.modal .option .simple-icon-holder i{
    margin-right: 5px;
}

.modalOverlay .modal .oldActiveArea {
    position: absolute;
    opacity: 0;
    transform: translateX(-50px);
    width: 100%;
    overflow-y: auto;
    min-height: 120px;
    display: flex;
    flex-wrap: wrap;
}
.modalOverlay .modal .modalActiveArea.upcoming {
    opacity: 0;
}
.modalOverlay .modal label {
    font-size: 14px;
    color: #444;
    width: 100%;
    line-height: 35px;
    margin-top: -45px;
    display: flex;
    justify-content: flex-start;
    z-index: 1;
    padding-left: 7px;
    transform: translateY(-5px);
    background: white;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    width: 100%;
    overflow: hidden;
    outline: none;
    height: 40px;
    border-radius: 0;
    font-size: 16px;
    color: #BBB !important;
    padding: 15px 15px 0px 7px;
    /* display: none; */
}
.modalOverlay .modal label.required::after {
    content: "*";
    color: red;
    margin-top: -2px;
    position: relative;
    top: -3px;
    left: 3px;
}
.modalOverlay .modal input,
.modalOverlay .modal select,
.modalOverlay .modal textarea {
    border: none;
    border-bottom: solid 1px #dddddd;
    margin: 6px 7px;
    background: #ffffff;
    line-height: 28px;
    width: 100%;
    overflow: hidden;
    outline: none;
    height: 40px;
    border-radius: 0;
    font-size: 17px;
    color: #4a4a4a !important;
    padding: 15px 15px 3px 4px;
}
.modalOverlay .modal textarea{
    height: auto;
    background-color: hsl(206deg 100% 97.97%);
}

.modalOverlay .modal select{
    padding-left: 0;
    padding-top: 0px;
    height: 35px;
    padding-right: 0px;
}
.modalOverlay .modal input.compressed,
.modalOverlay .modal select.compressed{
    padding:0;
    font-size: 16px;
    height: 25px;
    margin: 10px;
}

.modalOverlay .modal .radioInputHolder{
  display: flex;
  align-items: center;
  padding: 0 7px;
  width: 50%;
  justify-content: flex-start;
}

.modalOverlay .modal .radioInputHolder label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  line-height: 17px;
  width: unset;
  transform: none;
  padding: 0;
  overflow: visible;
}

.modalOverlay .modal .radioInputHolder input[type="radio"] {
  display: none;
}

.modalOverlay .modal .radioInputHolder label input[type="radio"] + span {
  background-color: #ccc;
  color: #fff;
  display: block;
  padding: 8px 10px;
  /* border-radius: 10px; */
  text-align: center;
  letter-spacing: 1px;
  transition: all 0.3s ease-in-out;
  min-width: min(70px, 50vw);
  font-size: 14px;
  border-right: solid 1px #AAA;
}

.modalOverlay .modal .radioInputHolder label:last-child input[type="radio"] + span {
  border-right: none;
}

.modalOverlay .modal .radioInputHolder input[type="radio"]:checked + span {
  background-color: #4285f4;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15), 0 2px 5px rgba(0, 0, 0, 0.1);
  /* transform: translateY(-2px); */
  border: solid 1px #4285f4;
}


.modalOverlay .modal .radioInputHolder.checkBox{
  width: 100%;
  min-height: 30px;
  margin: 2px 8px;
  padding: 10px;
  border-radius: 10px;
  position: relative;
  border: solid 1px #777;
  cursor: pointer;
}

.modalOverlay .modal .radioInputHolder.checkBox:hover{
  background: #EEE;
}

.modalOverlay .modal .radioInputHolder.checkBox::after{
  content: ".";
  position: absolute;
  border-top: solid 1px #eee;
  bottom: 0;
  height: 0;
  width: 80%;
  background: transparent;
  left: 10%;
  color: transparent;
}

.modalOverlay .modal .radioInputHolder.checkBox:first-of-type::before{
  content: ".";
  position: absolute;
  border-top: solid 1px #eee;
  top: 0;
  width: 80%;
  background: transparent;
  left: 10%;
  color: transparent;
  height: 0;
}

.modalOverlay .modal .radioInputHolder.checkBox span.subtext{
  width: calc(100% - 120px);
  font-size: 14px;
  /* width: auto; */
  color: #777;
  display: block;
}

.modalOverlay .modal .radioInputHolder.checkBox.checkBoxChecked{
  color: #4285f4;
  border: solid 1px #4285f4;
  background: #e4eefd;
}

.modalOverlay .modal .radioInputHolder.checkBox.checkBoxChecked span.subtext{
  color: black;
}


.modalOverlay .modal .radioInputHolder.checkBox .radioButtonHolder{
  width: 90px;
  display: flex;
}

.modalOverlay .modal .radioInputHolder.checkBox .radioButtonHolder label {
  margin: 0;
  height: 25px;
  overflow: hidden;
  width: 45px;
  background: transparent;
}

.modalOverlay .modal .radioInputHolder.checkBox .radioButtonHolder label span {
    border-radius: 0;
    box-shadow: none;
    min-width: 45px;
    padding: 3px 0;
    font-size: 13px;
}

.modalOverlay .modal .radioInputHolder.checkBox .radioButtonHolder input[type="radio"]:checked + span{
  transform: translate(0);
}

.modalOverlay .modal .radioInputHolder.checkBox .radioButtonHolder input[type="radio"]:checked + span.checkboxSpanNo{
  background: #f44242;
  border: solid 1px #f44242;
}

.modalOverlay .modal input + label.placeholderLabel{
    pointer-events: none;
}

.modalOverlay .modal .findHolder label.placeholderLabel,
.modalOverlay .modal input.filled + label.placeholderLabel, 
.modalOverlay .modal input:active + label.placeholderLabel, 
.modalOverlay .modal input:focus + label.placeholderLabel{
  transform: translateY(-26px);
  font-size: 12px;
  color: #999 !important;
  background: transparent;
}
.modalOverlay .modal label.placeholderLabel.textAreaPlaceholder{
    margin-top: 0;
    font-size: 12px;
    color: #999 !important;
    /* background: transparent; */
    margin-bottom: -20px;
}

.modalOverlay .modal input::placeholder,
.modalOverlay .modal textarea::placeholder{
  color: transparent;   
}
.modalOverlay .modal input.findInput::placeholder {
  color: #cecece;
    font-size: 15px;
}

.modalOverlay .modal .subtext.simpleBox {
    border: solid 1px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

.modalOverlay .modal .subtext {
    font-size: 13px;
    width: 100%;
    color: #555;
    margin: 0 10px;
}

.modalOverlay .modal .subtext.Notice {
    font-size: 13px;
    width: 100%;
    color: #4285f4;
    box-shadow: inset -1px 1px 8px -5px;
    padding: 5px 7px;
    border-radius: 5px;
    margin: 10px;
    background: hsl(216deg 86.21% 94.31%);
}
.modalOverlay .modal .filterSelection{
    font-size: 13px;
    /* color: blue; */
}


.modalOverlay .modal .option .subtext {
    margin: 0;
}
.modalOverlay .modal .option .filterSelection{
    color: #555;
}

.modalOverlay .modal .subtext.conflictNote {
    color: #ea4335;
    text-align: center;
    margin-top: 10px;
    background: #ffe6e6;
    border: solid 1px #ea433566;
    border-radius: 5px;
    padding: 10px 20px;
    padding-left: 43px;
    text-align: left;
    position: relative;
}
.modalOverlay .modal .subtext.conflictNote.infoNote {
    color: #3780f6;
    background: #e4eefd; 
    border: solid 1px #3780f666;
}
.modalOverlay .modal .subtext.conflictNote:after{
    content: "info";
    font-family: 'Material Symbols Outlined';
    position: absolute;
    top: calc(50% - 15px);
    left: 10px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
}

.modalOverlay .modal .subtext.conflictNote:last-child{
    margin-bottom: 20px;
}
@media only screen and (min-width: 500px) {
    .modal{
      transform: scale(0.5);
      opacity: 0;
      transition: 0.2s;
    }
     .modalOverlay.active .modal{
      transform: scale(1);
      opacity: 1;
    }  
}

/*Modal Saved*/
.modal  .savedOverlay {
    /*position: absolute;*/
    margin:auto;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 100;
    color: #777;
    pointer-events:none;
    opacity: 0;
}
.modal  .savedOverlay .iconHolder.dark span {
    font-size: 40px;
}
.modal  .savedOverlay div {
    max-width: 0px;
    padding: 0 5px;
    overflow: hidden;
    opacity: 0;
}
.modal  .savedOverlay div.iconHolder {
    width: 50px;
}
.modal  .savedOverlay div:nth-child(2) {
    direction: rtl;
}
.modal.saved  div.savedOverlay {
    opacity: 1;
}
.modal.saved  .savedOverlay div {
    max-width: 100px;
    transition: 0.6s;
    opacity: 1;
    transition-delay: 0.1s;
}

.savedOverlay.mini {
    background: #42ae5e;
    max-width: unset;
    width: calc(200% + 80px);
    position: absolute;
    top: -30px;
    left: -20px;
    height: 40px;
    transform: scale(0.5);
    color: black;
    transform-origin: top left;
    font-weight: 400;
}


/* Modal finds */
.modal .modalActiveArea .findHolder .findSuggestions {
    filter: opacity(1);
    transform: scale(1);
    top: 60px;
    pointer-events: auto;
    min-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin: 0;
    width: 100%;
    border-top: none;
    z-index: 1;
    border-radius: 0 0 5px 5px;
    /* background: hsl(207deg 100% 99% / 18%); */
    box-shadow: inset 0px -3px 10px -8px #d9eeff;
    max-height: calc(100vh - 220px);
    /* border: solid 1px hsl(0 0% 94% / 1); */
    border-top: none;
}

.modal .modalActiveArea .findHolder:first-child .findSuggestions{
    height: 400px;    
}
.modal .modalActiveArea .findAddNew{
    color: #11b8cc;
}

.modal .modalActiveArea .findHolder .findSuggestions.empty {
    height: 0px !important;
    overflow: hidden;
}
.modal .modalActiveArea .findHolder .searchIcon{
    position:absolute;
    z-index: 2;
    top: 37px;
    left: 20px;
    font-size: 24px;
    color: #666;
}
.modal .modalActiveArea .findHolder .findInput{
    padding-left: 45px;
    position: relative;
    margin: 0;
    margin-top: 10px;
    padding-top: 10px;
    font-size: 17px;
    height: 45px;
    background: #fff;
}

.modal .modalActiveArea .findHolder.tallText{
  box-shadow: none;
}
.modal .modalActiveArea .findHolder.tallText span.searchIcon{
  display: none;
}
.modal .modalActiveArea .findHolder.tallText .findInput{
    height: 180px !important;
    border: solid 1px #444;
    border: none;
    border-bottom: solid 1px #dddddd;
    margin: 6px 7px;
    background: #ffffff;
    line-height: 28px;
    width: 100%;
    overflow: hidden;
    outline: none;
    height: 40px;
    border-radius: 0;
    font-size: 17px;
    color: #4a4a4a !important;
    padding: 15px 15px 3px 4px;
}

.modal .modalActiveArea .findHolder.tallText .findInput + label{
  transform: translateY(-170px);
}
.modal .modalActiveArea .findHolder.tallText .findInput + label + .findSuggestions{
  height: 0 !important;
  overflow: hidden;
  min-height: 0 !important;
  pointer-events: none;
}
.modal .modalActiveArea .findHolder .findInput::after{
    content: 'x';
    display: inline-block;
    position: absolute;
    left: 0;
}

.modal .modalActiveArea .findHolder .findSuggestions >div {
    width: 100%;
    display: flex;
    border-bottom: solid 1px #d9eeff;
    align-content: center;
    color: #4285f4;
}

.modal .modalActiveArea .findHolder .findSuggestions >div.message {
    border:none;
}
.modal .modalActiveArea .findHolder .findSuggestions >div.message > .term {
    height:100px;
    line-height: 50px;
    opacity: 50%;
}
.modal .modalActiveArea .findHolder .findSuggestions  .term {
    height: auto;
    line-height: 40px;
    width: calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
}

.modal .modalActiveArea .findHolder .findSuggestions  .subResult{
    margin-left: 0;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin-top: -6px;
    display: flex;
    color: gray;
    margin-bottom: 10px;
    width: 100%;
}
.modal .modalActiveArea .findHolder .findSuggestions .subResult .iconHolder span,
.modal .modalActiveArea .findHolder .findSuggestions .subResult .iconHolder i,
.modal .modalActiveArea .findHolder .findSuggestions .subResult .iconHolder{
  line-height: 20px;
  height: 20px;
  font-size: 20px;
  width: 20px;
}

.modal .modalActiveArea .findHolder {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin: 7px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 1px 6px 0 #2224;
    position: relative;
    height: auto;
}

/********************* graph view *************************/
.screen .elementContainer > .document .chartContainer{
    height:450px;
    width: 100%;
    position: relative;
    padding: 5px 20px 5px 5px;
}


@media only screen and (max-width: 525px) {
    .screen .elementContainer > .document .chartContainer.line,
    .screen .elementContainer > .document .chartContainer.thinline,
    .screen .elementContainer > .document .chartContainer.area,
    .screen .elementContainer > .document .chartContainer.thinarea{
        height:300px;
    }
}


.screen .elementContainer > .document.chartBox{
    max-width:991px;
    width:100%;
}



/************************* ListView ****************************/
.screen .elementContainer > .document.listView
{
    display: flex;
    border: none;
    background: #eee;
    box-shadow: none;
    overflow: visible;
}

.modal .document.listView
{
    display: flex;
    border: none;
    max-width: unset;
    background: #eee;
    box-shadow: none;
    overflow: auto;
    flex-wrap: wrap;
    height: calc(var(--vh100) - 160px);
    width: calc(100% + 40px);
    margin: -20px -20px 20px -20px;
}
.document.listView .tableRow {
    display: flex;
    border: none;
    width: 100%;
    flex-wrap: wrap;
    background: white;
    /* box-shadow: 0px 2px 6px 2px rgb(60 64 67 / 15%); */
    /* box-shadow:0px 2px 6px 0px rgb(60 64 67 / 15%); */
    margin: 0px 0 0 0;
    border-bottom: solid 1px #eee;
    cursor: pointer;
}
.tableRow.External.sendingMsg{
  position: relative;
  filter: opacity(0.4);
}
.tableRow.External.sendingMsg.active{
  background: #f0fdff;
  filter: opacity(1);
}

.tableRow.External.sendingMsg::after{
  content: 'close';
  position: absolute;
  right: 20px;
  top: calc(50% - 20px);
  height: 40px;
  line-height: 40px;
  background: #ffffff;
  display: block;
  width: 40px;
  font-family: 'Material Symbols Outlined';
  font-size: 30px;
  text-align: center;
  border-radius: 40px;
  color: #ff3434;
  border: solid 1px transparent;
  transition: 0.5s;
}

.tableRow.External.sendingMsg.active::after{
  content: 'done';
  position: absolute;
  right: 20px;
  top: calc(50% - 20px);
  height: 40px;
  line-height: 40px;
  background: white;
  display: block;
  width: 40px;
  font-family:
  'Material Symbols Outlined';
  font-size: 30px;
  text-align: center;
  border-radius: 40px;
  color: var(--RBMGreen);
  border: solid 1px;
}

.document.listView .tableRow.emptyRow.ripple {
    height: 80px;
    line-height: 80px;
    text-align: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 300;
    color: #999;
    font-style: italic;
}

.document.listView .tableRow.emptyRow.emptyItem.ripple {
    height: calc(var(--vh100) - 200px);
    display: flex;
    align-content: center;
    margin: 30px 10px 50px 10px;
    pointer-events: none;
}
.screen.emptyItem .elementContainer > .document.listView{
    margin: 0 !important;
}
.document.listView .tableRow.cards {
    margin: 10px;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
}

.document.listView .tableRow:hover {
    background: hsl(207deg 100% 97%);
}
.document.listView .tableRow .mainDataHolder {
    width: calc(100% - 65px);
    padding: 10px 80px 10px 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    /* border-top: solid 1px #eee; */
    position: relative;
}
.document.listView .tableRow .mainDataHolder.lowPadding{
  padding: 10px;
}
.document.listView .tableRow .mainDataHolder.compressed {
    width: calc(100% - 160px);
    padding-right: 70px;
    font-size: 14px;
}
.document.listView .tableRow:first-child .mainDataHolder {
    border-top: none;
}
.document.listView .tableRow .mainDataHolder > .mainTitle {
    width: 100%;
    font-family: 'Poppins';
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    color: #111b21;
    text-overflow: ellipsis;
    font-weight: 500;
}
.document.listView .tableRow .mainDataHolder > .attr {
    position: absolute;
    right: 5px;
    max-width: 70px;
    overflow: hidden;
    text-align: left;
    color: #667781;
    font-size: 11px;
    text-align: center;
}
.document.listView .tableRow .mainDataHolder > .attr.attrBottom {
    bottom: 10px;
}
.document.listView .tableRow .mainDataHolder > .attr.attrMiddle {
    bottom: calc(50% - 7px);
}
.document.listView .tableRow .mainDataHolder > .attr.attrTop {
    top: 5px;
}

.document.listView .tableRow .mainDataHolder > .attr.moreButtonPress {
    top: calc(50% - 20px);
    display: flex;
    justify-content: center;
    background: transparent;
    border: solid 1px #0003;
}

.document.listView .tableRow .mainDataHolder > .attr.moreButtonPress:hover {
    background: #e7e7e7;
}
.document.listView .tableRow .mainDataHolder > .attr.moreButtonPress:hover abbr i {
    color: white;
}

.document.listView .tableRow .mainDataHolder > .attr + .attr.moreButtonPress {
    top: calc(50% + 10px - 20px);
}

.document.listView .tableRow .mainDataHolder > .attr.moreButtonPress .onExpand,
.document.listView .tableRow.expand .mainDataHolder > .attr.moreButtonPress span{
    opacity: 0;
    transform: translate(0px,0px);
}

.document.listView .tableRow .mainDataHolder > .attr.moreButtonPress:hover span {
    transform: translate(0px,2px);
}
.document.listView .tableRow.expand .mainDataHolder > .attr.moreButtonPress span.onExpand {
    opacity: 1;
    transform: translate(0px,-49px);
}



.document.listView .tableRow .leftCircleContainer,
.document.listView .tableRow .rightAttributes {
    width: 55px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: center;
    margin: 0 0 0 auto;
}

.document.listView .tableRow .mainDataHolder > .attr.longPress:hover {
    background: #0003;
}

.document.listView .tableRow .mainDataHolder > .attr.longPress {
    text-align: center;
    top: 30px;
    width: 30px;
    height: 30px;
    padding: 0;
}

.document.listView .tableRow .mainDataHolder > .attr.longPress span {
    line-height: 30px;
}

.document.listView .tableRow .leftCircleContainer .leftCircle {
    width: 45px;
    height: 44px;
    border-radius: 30px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    cursor: default;
    margin: 0;
    margin-bottom: auto;
    margin-top: auto;
    color: white;
    font-weight: 400;
    background: #4285f4;
    text-align: center;
}
.document.viewElement .leftCircle.small,
.document.listView .tableRow .leftCircleContainer .leftCircle.small{
 font-size: 13px !important;   
}
.document.listView .tableRow .leftCircleContainer .leftCircle.iconHolder {    
    /*background: white;*/
    font-size: 12px;
}
.document.listView .tableRow .mainDataHolder > p {
    margin: 0;
    font-size: 12px;
    height: auto;
    line-height: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    text-align: left;
    color: #667781;
}
.document.listView .tableRow .mainDataHolder > p.noClamp{
    height: auto;
    line-height: 15px;
    display: -webkit-box;
    -webkit-line-clamp: unset;
    -webkit-box-orient: vertical;
    
}
.document.listView .tableRow .mainDataHolder .mainID {
    font-size: 12px;
    display: none;
}
.document.listView .tableRow .mainDataHolder .subTitle {
    font-size: 12px;
    display: none;
    color: #444;
}

.document.listView .tableRow.expand,
.document.listView .tableRow.ExternalYes.expand{
    background: #ffffff;
    box-shadow: 0px 0px 8px 0px #00000052;
    z-index: 19;
    /* transform: translate3d(0px, -10px, 10px); */
    /* margin-bottom: -10px; */
    border-bottom: none;
    filter: none;
}

.document.listView .tableRow .actionButtons{
    display:none;
    justify-content: space-around;
    width: 100%;
    padding: 0px 10px 10px 10px;
    text-align: center;
    max-width: 390px;
    margin: auto;
    max-height: 0px;
    opacity: 0;
    padding-bottom: 0;
}

.document.listView .tableRow.expand2 .actionButtons{
    display: flex;
}
.document.listView .tableRow.expand .actionButtons{
    display: flex;
    max-height: 50px;
    opacity: 1;
    padding-bottom: 10px;
}

.document.listView .tableRow .actionButtons .iconHolder{
    border: solid 1px #d7d7d7;
    color: white;
    background: var(--lightBlue);
    font-size: 11px;
}


.listView.document.confirmation {
    height: fit-content;
    width: 100%;
    margin: 0;
}




.nowrap{
    white-space: nowrap;
}




/*List, but payment related */
.ColorAdvance,
.ColorAccount{
    color: #42ae5e !important;
}

.ColorPending{
    color: #ea4335 !important;
}
.ColorWarning{
    color: #ff9601 !important;
}

.ColorInfo{
  color: #0b95ff !important;
}

.strong{
    font-weight: 500 !important;
}

.link{
  cursor: pointer;
}

.document.listView .tableRow .amountContainer{
    display: flex;
    flex-wrap: wrap;
    width: 80px;
    justify-content: flex-end;
    padding: 10px 10px 10px 5px;
}
.document.listView .tableRow .accountNote{
    display: block;
    width: 240px;
    text-align: center;
    margin-right: 10px;
    margin-left: auto;
    margin-top: -20px;
    margin-bottom: 10px;
    font-size: 12px;
    background: #ffe8e2;
    padding: 5px;
    border-radius: 3px;
    color: black;
    border-left: solid 3px #ff3434;
}
.document.listView .tableRow .amountContainer.AdviceNoTiming.wAdviceNoTiming{
    width: 160px;
}
.document.listView .tableRow .amountContainer.AdviceNoTiming.wAdviceNoTiming .amount{
    font-size: 14px;
}
.document.listView .tableRow .mainDataHolder.wAdviceNoTiming{
    width: calc(100% - 160px);
}

.document.listView .tableRow .mainDataHolder.Expand{
    padding: 10px 10px 10px 10px;
}

.document.listView .tableRow .mainDataHolder.Expand + .amountContainer:nth-child(2){
    margin-left: 0;
}

.document.listView .tableRow .amountContainer:nth-child(2){
    margin-left: -95px;
}
.document.listView .tableRow .amountContainer.theThird:nth-child(2){
    margin-left: -160px;
}

.document.listView .tableRow .amountContainer .amount{
    width: 100%;
    text-align: right;
    font-size: 16px;
    font-family: 'Poppins';
    height: 40px;
}
.document.listView .tableRow .amountContainer .amount.spent{
    color: #ea4335;
}
.document.listView .tableRow .amountContainer .amount.paid{
    color: #42ae5e;
}

.document.listView .tableRow .amountContainer .amount.BalExternal,
.document.listView .tableRow .amountContainer .amount.BalPending{
    color: #ea4335;
}

.document.listView .tableRow .amountContainer .amount.BalClinic,
.document.listView .tableRow .amountContainer .amount.BalAdvance{
    color: #42ae5e;
}

.document.listView .tableRow .amountContainer .date{
    width: 100%;
    text-align: right;
    color: #667781;
    font-size: 11px;
    text-transform: Capitalize;
}



.document.listView .tableRow.evenSplit .amountContainer.mob33{
    margin-left: 0;
    width: 33%;
}

.document.listView .tableRow.evenSplit .amountContainer.mob33 .amount{
    text-align: left;
}
.document.listView .tableRow.evenSplit .amountContainer.mob33 .date{
    text-align: left;
}



.document.listView .tableRow .balanceContainer{
    display: flex;
    flex-wrap: wrap;
    width: 85px;
    justify-content: flex-end;
    padding: 0 15px 0 0;
    align-content: flex-start;
}

.document.listView .tableRow .balanceContainer .amount{
    width: 100%;
    text-align: right;
    font-size: 15px;
    font-family: 'Poppins';
    height: 23px;
    line-height: 30px;
}
.document.listView .tableRow .balanceContainer .amount.BalPending{
    color: #ea4335;
}
.document.listView .tableRow .balanceContainer .amount.BalAdvance{
    color: #42ae5e;
}

.document.listView .tableRow .balanceContainer .date{
    /*
    width: 100%;
    text-align: right;
    color: #667781;
    font-size: 11px;
    height: 25px;
    */
    width: 100%;
    text-align: right;
    color: #667781;
    font-size: 11px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.document.listView .tableRow .accountSettled {
    display: none;
}
.document.listView .tableRow .accountSettled.BalAccount{
    display: flex;
    background: #444;
    color: white;
    font-size: 12px;
    height: auto;
    width: 100%;
    justify-content: center;
    line-height: 15px;
}

.document.listView .tableRow.ripple.paymentOutward{
    background: #ffe8e2;
    border-left: solid 3px #ff3434;
}

.document.listView .tableRow.ripple.paymentInward .mainDataHolder .appStatus.refund{
    display: none;
}


/* Settings */
.document.listView .tableRow.ripple.settingRow {
    padding: 15px 10px;
}

.document.listView .tableRow.settingRow .settingNameHolder {
    width: calc(100% - 125px);
    margin: 0 10px;
}

.document.listView .tableRow.settingRow .settingNameHolder.full {
    width: calc(100% - 65px);
}

.document.listView .tableRow.settingRow .settingNameHolder p.name {
    font-size: 15px;
    color: black;
    margin: 5px auto;
}

.document.listView .tableRow.settingRow .settingNameHolder p.desc {
    margin: auto;
    font-size: 12px;
    color: #777;
}

.document.listView .tableRow.settingRow span.settingValue {
    width: 60px;
    margin: auto;
    text-align: center;
}

.document.listView .tableRow.settingRow .groupIcon {
    width: 40px;
    margin: auto;
    margin-right: 0;
    text-align: right;
}



/* Taggle type input */

#latestTaggleInput {
    border: solid 1px #e9e9e9;
    margin: 10px 0;
    border-radius: 2px;
    padding: 6px;
    width: 100%;
    min-height: 100px;
    max-height: 500px;
    display: flex;
    flex-wrap: wrap;
    cursor: text;
    overflow: auto;
    align-content: flex-start;
    box-shadow: inset 2px 2px 8px -7px;
}
#latestTaggleInput span {
    width: fit-content;
    white-space: nowrap;
    cursor: default;
    transition: .2s cubic-bezier(0.25, 0.75, 0.33, 2.5);
    text-transform: capitalize;
    border: solid 1px #2196f3;
    margin: 2px;
    padding: 7px;
    font-size: 13px;
    line-height: 13px;
    position: relative;
    border-radius: 3px;
}
#latestTaggleInput span.bounce {
    top: -5px;
}


#latestTaggleInput span.markDelete {
    border: solid 1px red;
    padding-right: 30px;
}

#latestTaggleInput span.markDelete::after {
    content: "delete";
    position: absolute;
    color: red;
    padding: 0 5px;
    font-family: "Material Symbols Outlined";
}

.modalOverlay .modal #latestTaggleInput input {
    background: none;
    border: none;
    display: block;
    height: 32px;
    white-space: nowrap;
    color: #0c68ff;
    margin: 2px;
    padding: 7px 4px;
    font-size: 13px;
    line-height: 13px;
}
#latestTaggleInput+span.suggestions {
    font-size: 13px;
    width: 100%;
    margin-bottom: 7px;
    margin-left: 3px;
    color: #444;
}

.modalOverlay .modal .taggleSuggestionBox{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.modalOverlay .modal span.taggleSuggest {
    background: hsl(216deg 100% 99%);
    display: block;
    color: #0c68ff;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    width: fit-content;
    transition: .2s cubic-bezier(0.25, 0.75, 0.33, 2.5);
    text-transform: capitalize;
    border: solid 1px;
    margin: 2px;
    padding: 7px;
    font-size: 13px;
    line-height: 13px;
    border-radius: 3px;
}