body:not(.auth-ready) .slider-container {
   visibility: hidden;
}

.slider-container {
   position: relative;
   width: 100%;
   height: 100%;
}

.page {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transition: transform 0.5s ease-in-out;
   display: flex;
   flex-direction: column;
}

.content {
   flex: 1;
   overflow-y: auto;
}

.footer {
   color: #1f4160;
   font-style: italic;
   font-size: var(--fs-sm);
   padding-left: 4%;
   padding-right: 4%;
   flex-shrink: 0;
}

.footer-version-span {
   text-align: right;
}

.page-header {
   position: relative;
   padding: 12px 0;
   background: linear-gradient(#C8C8C8, #F0F0F0);
   border: none;
   text-align: center;
}
.page-header img {
   display: inline-block;
   vertical-align: top;
   height: 48px;
}

.logout-button {
   position: absolute;
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
   background: url("../images/user-icon.png") no-repeat left center;
   background-size: contain;
   border: none;
   padding-left: 28px;
   color: #1f4160;
   font-size: 0.85em;
   cursor: pointer;
}

.page-content {
   overflow: hidden;
   background: linear-gradient(#F0F0F0, #FFF 32px);
   padding-top: 0px;
   padding-left: 4%;
   padding-right: 4%;
   padding-bottom: 32px;
}

.row-container {
   display: flex;
   flex-direction: row;   
   align-items: center;   
   width: 100%;   
   box-sizing: border-box;
   gap: 16px;
}

.left-label {
   flex-shrink: 0;    
   font-weight: bold;
   font-size: var(--fs-label);
   color: var(--text-secondary);
}

.right-content {
   flex: 1;
}


.normal-min-width {
   min-width: 180px;
}

.large-min-width {
   min-width: 265px;
}

.large-width {
   width: 265px;
}

.margin-top-8 {
   margin-top: 10px;
}

/************ Page 1    *************************************/

.welcome-banner {
   font-size: var(--fs-base);
   color: var(--text-secondary);
}


.app-title {
   margin: 0;
   text-transform: uppercase;
   color: #1f4160;
   font-weight: 600;
   font-size: 1em;
}

.tooltip {
   --bs-tooltip-opacity: 1; 
   --bs-tooltip-font-size:  1.1em;
   --bs-tooltip-bg: #FFF;   
   --bs-tooltip-color: #1f4160; 

   width: 70% !important;
   max-width: 70% !important;
}

.tooltip-inner {

   font-size: 0.95em;
   width: 100% !important;
   max-width: 100% !important;
   padding: 12px !important; 
   border: 1px #BCDBEA solid;
   border-radius: 8px;
}

.info-icon-tooltip::before {
   content: "";
   display: inline-block;
   width: 16px;
   height: 16px;
   vertical-align: text-bottom;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' class='bi bi-info-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-size: 16px 16px;
}

.app-panel-container {
   display: flex;
   width: 100%;
   overflow: hidden; 
}


.app-panel-container .app-left-panel {
   flex: 1; 
   transition: all 0.4s ease-in-out;
}

.app-panel-container .app-right-panel {
   box-sizing: border-box;
   width: calc(50% + 15px);
   padding-left: 30px;
   overflow: hidden; 
   white-space: nowrap;
   
   transition: width 0.4s ease-in-out, 
                     padding 0.4s ease-in-out, 
                     transform 0.4s ease-in-out, 
                     opacity 0.4s ease-in-out;
}


.app-panel-container .app-right-panel.is-hidden {
   width: 0%;
   padding-left: 0;
   padding-right: 0;
   transform: translateX(30px);
   opacity: 0;
}

/************ Page 1 End *************************************/


/************ Page 2    *************************************/

.two-part-div {
   display: flex;
   flex-direction: row; 
   gap: 20px;           
   align-items: flex-start; 
}

.two-part-div .left-part {
   flex: 1;         
   box-sizing: border-box;

   padding-right: 20px;

   border-right: solid #DDD 2px;
}

.two-part-div .right-part {

   width: 480px;
   flex-shrink: 0;
   box-sizing: border-box;
}

.top-bar {
   width: 100%;
   overflow: hidden;
}

.top-bar #inforDiv {
   text-align: center;
   float: left;
   width: calc(100% - 100px);
   background: #1f4160;
   color: #fff;
   display: inline-block;
   border-radius: 6px 0 0 6px;
   padding: 6px 0;
   font-size: 0.9em;
}

.top-bar #changeBtn {
   float: left;
   width: 100px;
   text-align: center;
   color: #fff !important;
   background-color: #17a2b8 !important;
   border-color: #17a2b8 !important;
   text-decoration: none;
   padding: 5px 0;
   border-radius: 0 6px 6px 0;
   border: 1px solid #409ba3;
   font-style: italic;
   font-weight: 500;
   font-size: 0.9em;
}

.top-bar #changeBtn:hover {
   color: #fff !important;
   background-color: #138496 !important;
   border-color: #117a8b !important;
}



.twoappLeft {
   display: inline-block;
   width: 50%;
   padding-right: 2%;
}

.twoappRight {
   display: inline-block;
   width: 50%;
   padding-left: 2%;
}

.med-result-div {
   padding-top: 75px;
   display: flex;
   flex-direction: column;
}

.result-content-div {
   margin-top: auto;
}

.advantagap-result-div {
   display: flex;
   flex-direction: column;
}



#medResultPaddingDiv {
   height: 20px;
}


.policy-progress {
   display: flex;
   flex-direction: row; 
   gap: 8px;           
   align-items: flex-start; 

}

.policy-label {
   flex: 1;         
   box-sizing: border-box;
   text-align: right;
   /*color:  val(--text-title);*/
   color: #1f4160;
}



.progress-amount {

   padding-right: 20px;
   width: 180px;
   text-align: right;
   flex-shrink: 0;
   color: #676867;
   overflow: hidden;
}


.progress-amount-text {
   padding-right: 20px;
   text-align: right;
   color: #676867;
   padding-bottom: 8px;
   font-size: 0.9em;
}

.result-policy-fee {
   text-align:right; 
   color: #676867; 
   font-size: 0.9em; 
   display: none;
   padding-right: 20px;
}

/************ Page 2 End *************************************/


.right  { transform: translateX(100%); }
.left   { transform: translateX(-100%); }
.center { transform: translateX(0); }
.hide   { display: none !important; }