html, body{
   height: 100%;
}

.bold-horizontal-line {
   border-top: solid #BBB 4px;
}

.normal-horizontal-line {
   border-top: solid #DDD 2px;
}

.page-div {
   position:relative;
   min-height: 100%;
}

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

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

.page-footer {
   position: absolute;
   bottom: 8px;
   color: #1f4160;
   font-style: italic;
   font-size: 0.85em;
   padding-left: 4%;
   padding-right: 4%;
   width: 100%;
}




.page-footer .page-footer-line {
  margin-top: 2px;
}


/**************************** Buttons *****************************************/
.custom-button {
   border-radius: 3em;
   text-align: center;
   font-weight: 600;
   font-size: 0.9em;
   text-shadow: none;
   padding: .3em;
   background-color: #318841;
   color: #FFF;
   border-width: 0px;
   width: 160px;
}

.custom-button:hover {
   color: #eee;
   background-color: #217831;
}


.left-button {
   float: left;
}

.right-button {
   float: right;
}

.disabled {
   background-color: #f6f6f6 !important;
   border: 1px solid #ddd !important;
   color: #ccc !important;
}


/************************** Buttons End ***************************************/


/**************************** Form Elements ***********************************/



.two-column-input-div-left {
   width: 100%;
}

.two-column-input-div-right {
   width: 100%;
}

.width2-top-border-with-padding {
   border-top: 2px solid #ddd;
   padding-top: 16px;
}


.form-group {
   
}

.form-group .input-label {
   width: 160px;
   display: inline-block;
   height: 32px;
   line-height: 32px;
   font-weight: 600;
   font-size: 0.9em;
   color: gray;
}

.form-group .input-content {
   display: inline-block;
   width: calc(100% - 160px);
   min-width: 120px;
}

.form-group .input-label-long {
   width: 210px;
   display: inline-block;
   height: 32px;
   line-height: 32px;
   font-weight: 600;
   font-size: 0.9em;
   color: gray;
}

.form-group .input-content-long {
   display: inline-block;
   width: calc(100% - 210px);
   min-width: 120px;
}

.form-group .input-label-long-230 {
   width: 250px;
   display: inline-block;
   height: 32px;
   line-height: 32px;
   font-weight: 600;
   font-size: 0.9em;
   color: gray;
}

.form-group .input-content-long-230 {
   display: inline-block;
   width: calc(100% - 250px);
   min-width: 120px;
}

.form-group .input-label-long-260 {
   width: 260px;
   display: inline-block;
   height: 32px;
   line-height: 32px;
   font-weight: 600;
   font-size: 0.9em;
   color: gray;
}

.form-group .input-content-long-260 {
   display: inline-block;
   width: calc(100% - 260px);
   min-width: 120px;
}

.form-group .input-label-long-272 {
   width: 292px;
   display: inline-block;
   height: 32px;
   line-height: 32px;
   font-weight: 600;
   font-size: 0.9em;
   color: gray;
}

.form-group .input-content-long-272 {
   display: inline-block;
   width: calc(100% - 292px);
   min-width: 120px;
}

.form-group .input-label-long-300 {
   width: 320px;
   display: inline-block;
   height: 32px;
   line-height: 32px;
   font-weight: 600;
   font-size: 0.9em;
   color: gray;
}

.form-group .input-content-long-300 {
   display: inline-block;
   width: calc(100% - 320px);
   min-width: 120px;
}

.form-group .input-label-long-360 {
   width: 360px;
   display: inline-block;
   height: 32px;
   line-height: 32px;
   font-weight: 600;
   font-size: 0.9em;
   color: gray;
}

.form-group .input-content-long-360 {
   display: inline-block;
   width: calc(100% - 360px);
   min-width: 120px;
}

.form-group .input-label-long-450 {
   width: 420px;
   display: inline-block;
   height: 32px;
   line-height: 32px;
   font-weight: 600;
   font-size: 0.9em;
   color: gray;
}

.form-group .input-content-long-450 {
   display: inline-block;
   width: calc(100% - 420px);
   min-width: 120px;
}

.form-group .input-label-long-500 {
   width: 510px;
   display: inline-block;
   height: 32px;
   line-height: 32px;
   font-weight: 600;
   font-size: 0.9em;
   color: gray;
}

.form-group .input-content-long-500 {
   display: inline-block;
   width: calc(100% - 510px);
   min-width: 120px;
}

#otherOptionDiv .input-label {
   width: 220px;
}

#otherOptionDiv .input-content {
   width: calc(100% - 220px);
}

.radio-group .custom-radio {
   width: 47%;
   display: inline-block;
}

.radio-group .custom-radio:last-child {
   margin-left: 6%;
}

.radio-group .custom-radio input {
   position: absolute;
   opacity: 0;
}
.radio-group .custom-radio label {
   position: relative;
   background-color: #f6f6f6;
   border: 1px solid #ddd;
   border-radius: 3em;
   text-align: center;
   font-weight: 600;
   font-size: 0.8em;
   text-shadow: none;
   color: gray;
   padding: .5em .5em;
   width: 100%;
   margin-bottom: 0;
}

.radio-group .custom-radio input + label:hover {
  color: #333;
  background-color: #f2f2f2;
}

.radio-group .custom-radio input:checked + label {
   background: #39519f;
   border-color: #39519f;
   color: #fff;
}

.radio-group .custom-radio :disabled {
   
}


.radio-group .custom-radio-three-options {
   display: inline-block;
}


.radio-group .custom-radio-three-options input {
   position: absolute;
   opacity: 0;
}
.radio-group .custom-radio-three-options label {
   position: relative;
   background-color: #f6f6f6;
   border: 1px solid #ddd;
   border-radius: 3em;
   text-align: center;
   font-weight: 600;
   font-size: 0.8em;
   text-shadow: none;
   color: gray;
   padding: .5em .5em;
   width: 100%;
   margin-bottom: 0;
}

.radio-group .custom-radio-three-options input + label:hover {
  color: #333;
  background-color: #f2f2f2;
}

.radio-group .custom-radio-three-options input:checked + label {
   background: #39519f;
   border-color: #39519f;
   color: #fff;
}


.radioDisabled {
   opacity: 0.5;
}


.custom-select {
   border: 1px solid #ddd;
   border-radius: 3em;
   text-align-last: center;
   color: gray;
   font-size: 0.9em;
   box-shadow: none !important;
}

.custom-select:hover {
   color: #333;
   background-color: #f6f6f6;
}

.custom-input {
   border: 1px solid #ddd;
   border-radius: 3em;
   color: gray !important;
   font-size: 0.95em;
   font-weight: 400;
   text-align-last: center;
   padding-left: 16px;
   height: 38px;

}

.custom-input:hover {
   background-color: #f6f6f6;
}

/************************** Form Elements End***********************************/



/************************* Page two ********************************************/

.left-col {
   width: calc(100% - 554px);
   float: left;
   padding-right: 16px;
   border-right: solid #ACADAA 2px;
   margin-right: 16px;
}

.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;
   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 #changeBtnDiv:hover {
   background: #619ea6;
   color: #eee;
}*/

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

.right-col {
   width: 520px;
   float: right;
}

.result-table .benefit-result-div {
   
   color: #fff;
   text-align: center;
   border-radius: 30px;
   margin-top: 24px;
   font-size: 0.85em;
}

.result-table .benefit-result-div .benefit-result-title {
   font-size: 1em;
   padding-top: 5px;
}
.lefticon {
   background-image: url("../images/user-icon.png") ;
   background-repeat: no-repeat;
   background-size: auto 100%;
   background-color: #1f4160;
}


.righticon {
   background-image: url("../images/user-icon.png") ;
   background-repeat: no-repeat;
   background-size: auto 100%;
   background-color: #1f4160;
   background-position: right; 
}

.result-table .benefit-result-div .benefit-result-value {
   padding-bottom: 2px;
   font-weight: 600;
}

.result-table .premium-result-div {
   border: 0;
   background: #39519f;
   color: #fff;
   border-radius: 13px;
   font-size: 0.85em;
   text-align: center;
}

.result-table .premium-result-div .premium-result-title {
   padding-top: 5px;
   font-size: 1em;
}

.result-table .premium-result-div .premium-result-value {
   padding-bottom: 2px;
   font-weight: 600;
}

.result-table .premium-result-div .premium-result-tail {
   font-size: 0.8em;
   line-height: 0.95em;
   padding-bottom: 2px;
}


.policy-progress {
   font-size: 0.95em;
   color: #676867;
   overflow: hidden;
   padding-bottom: 8px;
}

.policy-progress .policy-label {
   width: 400px;
   float: left;
   text-align: right;
}

/*.policy-progress .progress {
   margin-left: 4px;
   float: left;
   height: 1.8em;
   background: #435569;
   border-left: 1px solid #ddd;
}*/

.policy-progress .progress-amount {
   margin-left: 12px;
   float: left;
   min-width: 80px;
   text-align: right;
}

.generate-btn-div {
   text-align: center;
}

#generateBtn {
   color: #FFF;
   width: 240px;
}


.user_email {
   width: 0;
}

/************************* Page two End ****************************************/

.warning-tip {
   background: #FFF;
   color: red;
   z-index: 999;
   font-size: 0.95em;
   padding: 4px 8px;
}

.info-tip {
   background: #39519f;
   color: #FFF;
   border-radius: 12px;
   z-index: 999;
   width: 280px;
   padding:8px; 
}

.help-tip{
   float: right;
   text-align: center;
   background-color: #BCDBEA;
   border-radius: 50%;
   width: 16px;
   height: 16px;
   font-size: 12px;
   cursor: default;
}

.help-tip:before{
   content:'?';
   font-weight: bold;
   color:#fff;
}


.tip-arrow,
.tip-arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  left: calc(50% - 4px);
  top: -2px;
  z-index: -1;
}

.tip-arrow::before {
  content: '';
  transform: rotate(45deg);
  background: #39519f;
}


.toggle-title {
   position: relative;
   cursor: pointer;
}
.toggle-title:after {
   content: '';
   position: absolute;
   left: 155px;
   top: 5px;
   border-left: 2px solid #aaa;
   border-bottom: 2px solid #aaa;
   height: 10px;
   width: 10px;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
.toggle-title.open:after {
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

.dailyBenefitInfo {
   text-align: center; 
   font-size: 0.8em; 
   color: gray; 
   padding-top: 8px;
}

.dailyBenefitInfoAppend {
   text-align: left; 
   font-size: 0.8em; 
   color: gray; 
   padding-bottom: 8px;
   line-height: 0.9em;
}

/************************* Page Three ******************************************/
.print-input-div {
   margin: auto;
   max-width: 640px;
}

.print-input-content {
   margin: auto;
   max-width: 420px;
}

/************************* Page Three End **************************************/


 .combined-benefit-amt:before {
   background-image: url("../images/mobile-arrow-left.png");
   left: 20px;
   background-position: left 47px;
   width: 10%;
}
.combined-benefit-amt:after {
   background-image: url("../images/mobile-arrow-right.png");
   right: 20px;
   background-position: right 47px;
   width: 10%;
}

.Primary-Benefit {
   display: flex;
   align-items: center;
   justify-content: center;
}
.Primary-Benefit .Primary-Individual-Benefit {
   width: 48%;
   padding: 4px 0;
   position: relative;
   z-index: 1;
   border-radius: 30px;
   font-size: 0.85em;
   color: white;
}

.Primary-Benefit .Primary-Individual-Benefit .benefit-result-title-left {
  
   line-height: 0.9em;
   font-size: 0.95em;
   padding-left: 52px;
   padding-right: 24px;
   text-align: center;
}


.Primary-Benefit .Primary-Individual-Benefit .benefit-result-value-left {
   color: white;
   text-align: center;
   padding-left: 48px;
   padding-right: 16px;
}

.Primary-Benefit .Primary-Individual-Benefit .benefit-result-title-right {
  
   line-height: 0.9em;
   font-size: 0.95em;
   padding-left: 16px;
   padding-right: 42px;
   text-align: center;
}


.Primary-Benefit .Primary-Individual-Benefit .benefit-result-value-right {
   color: white;
   text-align: center;
   padding-left: 16px;
   padding-right: 42px;
}

.warning-popup {
   position: absolute;
   width: 500px;
   left: calc(50% - 250px);
   top: 10%;
   border: 1px solid #333;
   padding: 20px 8px;

   z-index: 999;
   background: #FFF;
   overflow: hidden;
   font-size: 0.85em;
   
   color: #444;
}

.popup {
   position: absolute;
   width: 360px;
   left: calc(50% - 180px);
   top: 30%;
   border: 2px solid #333;
   border-radius: .4em;
   padding: .5em .5em 0;
   z-index: 999;
   opacity: .95;
   overflow: hidden;

   font-weight: bold;
   color: #444;

   background: rgb(252,234,187);
   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZWFiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0iI2ZjY2Q0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYmRmOTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
   background: -moz-linear-gradient(top,  rgba(252,234,187,1) 0%, rgba(252,205,77,1) 35%, rgba(251,223,147,1) 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,234,187,1)), color-stop(35%,rgba(252,205,77,1)), color-stop(100%,rgba(251,223,147,1)));
   background: -webkit-linear-gradient(top,  rgba(252,234,187,1) 0%,rgba(252,205,77,1) 35%,rgba(251,223,147,1) 100%);
   background: -o-linear-gradient(top,  rgba(252,234,187,1) 0%,rgba(252,205,77,1) 35%,rgba(251,223,147,1) 100%);
   background: -ms-linear-gradient(top,  rgba(252,234,187,1) 0%,rgba(252,205,77,1) 35%,rgba(251,223,147,1) 100%);
   background: linear-gradient(to bottom,  rgba(252,234,187,1) 0%,rgba(252,205,77,1) 35%,rgba(251,223,147,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 );
}


#shortenedBenefitWarning {
   color: red;
}

.line-through {
   text-decoration: line-through
}





.checkbox-temp {
   position: relative;
   background: #39519f;
   border-color: #39519f;
   color: #fff;
   border: 1px solid #ddd;
   border-radius: 3em;
   padding-top: .3em ;
   padding-left: 20px;
   width: 280px;
}
.checkbox-temp label{
   color: #fff;
   font-weight: 600;
   text-shadow: none;
   font-size: 0.85em;
   padding-left: 8px;
}





.plan-designer-left :first-child {
   width: 50%;
   padding-right: 2%;
}

.plan-designer-left :last-child {
   padding-left: 2%;
   width: 50%;
}

.plan-designer-right :first-child {
   width: 50%;
   padding-right: 2%;
}

.plan-designer-right :last-child {
   padding-left: 2%;
   width: 50%;
}


#searchPlanErrorDiv {
   color: #1f4160;
   font-weight: 600;
   font-size: 0.9em;
}



.tooltip-div {
  opacity: 1;
  border: #BCDBEA solid;
  color: #1f4160;
  background: #FFF;
  padding: 12px;
  font-size: 1.1em;
  border-radius: 4px;
  display: none;
  z-index: 999;
}

.tooltip-div[data-show] {
  display: block;
}

.arrow-div,
.arrow-div::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

.arrow-div {
  visibility: hidden;
}

.arrow-div::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}

.tooltip-div[data-popper-placement^='top'] > .arrow-div {
  bottom: -4px;
}

.tooltip-div[data-popper-placement^='bottom'] > .arrow-div {
  top: -4px;
}

.tooltip-div[data-popper-placement^='left'] > .arrow-div {
  right: -4px;
}

.tooltip-div[data-popper-placement^='right'] > .arrow-div {
  left: -4px;
}


.training-div {
   text-align: center;
   color: #D93E45;
   font-size: 1.5em;
   font-weight: 600;
   display: none
}

/***************************************  Loading Spinner  ******************************************************/

#loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(135, 132, 132, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}



.textfield {

   position: relative;

   background-color: #f6f6f6;

   border: 1px solid #ddd;

   border-radius: 3em;

   text-align: center;

   font-weight: 600;

   font-size: 0.8em;

   text-shadow: none;

   color: gray;

   padding: 0.5em 0.5em;

   width: 100%;

   margin-bottom: 0;

}



.effective-date-option-div {
   color: gray; 
   height: 40px; 
   line-height:40px;
   margin-left: 4em;
   margin-top: 8px;
}

.effective-date-radio {
   display: inline-block; 
   width: 200px;
   font-size: 0.95em; 
}

.effective-date-content {
   display: inline-block; 
   width: calc(100% - 200px);
}


.print-input-div {
   margin-left:16px; 
   margin-right: 16px;
}

.print-input-div-label {
   display: inline-block;
   width: 160px;
   text-align: left;
}

.print-input-div-input {
   display: inline-block;
   width: calc(100% - 160px);
}



.padding-bottom-12 {
   padding-bottom: 12px;"
}

.error-div {
   border-left:5px solid; 
   border-radius: 0px; 
}