#TogglePassword {                                                                    /* Custom Eye Icon that Shows/Hides the Password */
   float       : right;
   margin-left : -25px;
   margin-top  : -40px;
   right       :  10px;
   position    : relative;
   z-index     : 2;
}
input::-ms-reveal,                                                         /* DISABLE Build-In Eye Icon that Shows/Hides the Password */
   input::-ms-clear {
      display: none;
}

.RegInput { font-size : 1.2em !important; 
        letter-spacing: 0.2rem;
        color     : #000077 !important;
      }
.RegInput::placeholder {
    font          : 1.0rem/3 sans-serif;
    letter-spacing: 0rem;
    color         : #770000 !important;
    opacity       : 0.3 !important;
}

.field-icon {
   float            : right;
   padding          : 7px;
   position         : relative;
   z-index          : 2;
   background-color : #F2F2F2;
   border           : 1px solid #E0E0E0 !important;
   border-left      : 0px !important;
   border-radius    : 4px;
}

/* ------------------------------------------------------------------------------------------------------------------------- */
/* List Table Styling Attributes */
/* ------------------------------------------------------------------------------------------------------------------------- */
/*.table-striped    { border-top: 1px solid #111 !important; border-bottom: 1px solid #111 !important; }*/
/*.table-striped th { border-bottom: 0.5px solid #999 !important; background-color: rgba( 250 , 255 , 250 , 0.7 ) !important; }*/
.table-striped    { font-size: 1.0em; }
.table-striped th { background-color: rgba( 150 , 170 , 190 , 0.7 ) !important; }
.table-striped tf { background-color: rgba( 150 , 170 , 190 , 0.7 ) !important; }

/*.table-striped { font-size: 0.7em; }*/

/* ------------------------------------------------------------------------------------------------------------------------- */
/* List General Styling Attributes */
/* ------------------------------------------------------------------------------------------------------------------------- */
.List-H-HTLine          { border-top    : 1px   solid #333 !important; }
.List-H-HBLine          { border-bottom : 1px   solid #333 !important; }
.List-H-VLLine          { border-left   : 1px   solid #333 !important; }
.List-H-VRLine          { border-right  : 1px   solid #333 !important; }

.List-B-VLLine          { border-left   : 1.2px solid #111 !important; }
.List-B-VRLine          { border-right  : 1.2px solid #111 !important; }

.List-F-HTLine          { border-top    : 1px   solid #333 !important; }
.List-F-HBLine          { border-bottom : 1px   solid #333 !important; }
.List-F-VLLine          { border-left   : 1px   solid #333 !important; }
.List-F-VRLine          { border-right  : 1px   solid #333 !important; }





.modal-header { color: #CCCCCC; background: linear-gradient(to left, rgba(40,96,124,0.7) 0%,rgba(36,85,109,0.7) 100%) }
.modal-body   { color: #DDDDDD; background: linear-gradient(to left, rgba(40,96,124,0.5) 0%,rgba(36,85,109,0.5) 100%) }
.modal-footer { color: #FFFFFF; background: linear-gradient(to left, rgba(40,96,124,0.6) 0%,rgba(36,85,109,0.6) 100%) }

#Condact-Map {
  height     : 40vh !important;
  width      : 100%;
  /*min-height : 40vh; 30%;
  max-height : none;*/
}

/* ------------------------------------------------------------------------------------------------------------------------- */
/* SideBar & Insured Area                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------------- */
:root {
   --body-bg      : #123;
 /*--nav-bg       : rgb( 69 , 92 , 115 );*/
   --nav-bg       : linear-gradient(to right, rgba(40,96,124,1) 0%,rgba(36,85,109,1) 100%);
   
   --nav-title-bg : linear-gradient(to left, rgba(40,96,124,1) 0%,rgba(36,85,109,1) 100%);
}

* {
   box-sizing : border-box;
}

html {
   font-family: system-ui;
}

body {
   margin                : 0px;
   padding               : 0px;
   color                 : #000000;
   display               : grid;
   overflow              : auto;
   scrollbar-gutter: stable;
}

.insured-container {
   min-height            : 100vh;
   grid-template-columns : max-content 1fr;
 /*grid-template-columns : 20rem 1fr;*/
   gap                   : 4rem;
}

.right-header {
   position              : sticky;
   top                   : 0;
}

.insured-container nav {
   position              : sticky;
   top                   : 0;
   min-height            : 100vh;
   background            : var( --nav-bg );
}

.insured-container .nav-list-title {
   color                 : #FFF;
   padding-top           : 0rem;
   font-size             : 1rem;
 /*border-top            : 1px solid #555;
   border-bottom         : 1px solid #444;
   background            : var( --nav-title-bg );*/
}

.insured-container .nav-list {
   margin                : 0;
   padding               : 0;
   list-style            : none;
   display               : grid;
   gap                   : 1.5rem;
   padding-block         : 1rem;
   font-size             : 1rem;
}

.insured-container .nav-list li {
   padding               : 1rem 1rem;
   margin-left           : 0.5rem;
   border-radius         : 2vw 0 0 2vw;
   white-space           : nowrap;
}

.insured-container .nav-list li.active {
 /*view-transition-name  : activeNavTab;*/
   background            : var( --body-bg );
   position              : relative;
}

/*::view-transition-group( activeNavTab ){
   animation-duration   : 1.5s;
}

.insured-container .nav-list li.active::before,
.insured-container .nav-list li.active::after
{
   --border-radius       : 1rem;
   content               : '';
   position              : absolute;
   width                 : var( --border-radius );
   height                : var( --border-radius );
   right                 : 0;
   background            : var( --nav-bg );
}

.insured-container .nav-list li.active::before
{
   top                   : calc( var( --border-radius ) * -1 );
   border-radius         : 0 0 100vh 0;
   box-shadow            : 10px 10px 0 5px var( --body-bg );
}
.insured-container .nav-list li.active::after
{
   border-radius         : 0 100vh 0 0;
   box-shadow            : 10px -10px 0 5px var( --body-bg );
   bottom                : calc( var( --border-radius ) * -1 );
}
*/

.insured-container .nav-list a {
   color                 : #CCC;
   text-decoration       : none;
}
.insured-container .nav-list a:active {
   color                 : #FFF;
}

.insured-container .header {
   color            : #FFFFFF;
   background       : #263238;
   font-size        : 1rem;
   white-space      : nowrap;
   z-index          : 99;
}
.insured-container .footer {
   color            : #FFFFFF;
   background       : #263238; 
   font-size        : 1rem;
   text-align       : center;
}



.Insured-Card-Header {
   color              : #FFFFFF;
   background         : linear-gradient(to left, rgba(40,96,124,1) 0%,rgba(36,85,109,1) 100%);
   border-bottom      : 3px solid #000000;
}
.Insured-Card-Label {
   color              : #000000;
   background         : linear-gradient(to bottom, rgba(190,205,214,1) 0%,rgba(154,177,188,1) 100%);
   border-top         : 1px solid #A0A0B0;
   border-bottom      : 1px solid #A0A0B0;
}
.Insured-Card-Body {
   color              : #000000;
   background         : linear-gradient(to right, rgba(197,206,214,1) 0%,rgba(175,181,191,1) 100%);
}
.Insured-Card-Body-Border {
   -webkit-box-shadow : 3px 10px 30px -4px rgba(0,0,0,0.20);
   -moz-box-shadow    : 3px 10px 30px -4px rgba(0,0,0,0.20);
   box-shadow         : 3px 10px 30px -4px rgba(0,0,0,0.20);
}
.Insured-Card-Footer {
   background         : linear-gradient(to bottom,  rgba(152,159,169,0.35) 0%,rgba(152,159,169,0.20) 100%);
   border-top         : 1px solid #AAAAAA;
   border-bottom      : 1px solid #555555;
}




/* ------------------------------------------------------------------------------------------------------------------------- */
/* Toast Messages Styling Attributes                                                                                         */
/* ------------------------------------------------------------------------------------------------------------------------- */
.Toast-Msg-Primary-Header    { color: #000000; background: linear-gradient(180deg, rgba( 10,110,250,1) 0%, rgba( 10,100,180,1) 100%); border-bottom: 1px solid #a2c6fc; }
.Toast-Msg-Primary-Body      { color: #000000; background: linear-gradient(360deg, rgba( 60,160,250,1) 0%, rgba( 30,155,250,1) 100%); }

.Toast-Msg-Secondary-Header  { color: #000000; background: linear-gradient(180deg, rgba(155,155,155,1) 0%, rgba( 80, 80, 80,1) 100%); border-bottom: 1px solid #CCCCCC; }
.Toast-Msg-Secondary-Body    { color: #000000; background: linear-gradient(360deg, rgba(155,155,155,1) 0%, rgba(130,130,130,1) 100%); }

.Toast-Msg-Dark-Header       { color: #AAAAAA; background: linear-gradient(180deg, rgba( 40, 40, 40,1) 0%, rgba(  0,  0,  0,1) 100%); border-bottom: 1px solid #555555; }
.Toast-Msg-Dark-Body         { color: #AAAAAA; background: linear-gradient(360deg, rgba( 20, 20, 20,1) 0%, rgba( 10, 10, 10,1) 100%); }

.Toast-Msg-Light-Header      { color: #000000; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(180,180,180,1) 100%); border-bottom: 1px solid #FFFFFF; }
.Toast-Msg-Light-Body        { color: #000000; background: linear-gradient(360deg, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%); }

.Toast-Msg-Success-Header    { color: #000000; background: linear-gradient(180deg, rgba(130,200,130,1) 0%, rgba( 90,130, 90,1) 100%); border-bottom: 1px solid #daedda; }
.Toast-Msg-Success-Body      { color: #000000; background: linear-gradient(360deg, rgba(180,200,180,1) 0%, rgba(185,200,185,1) 100%); }

.Toast-Msg-Danger-Header     { color: #000000; background: linear-gradient(180deg, rgba(200,130,130,1) 0%, rgba(130, 90, 90,1) 100%); border-bottom: 1px solid #f5e1e1; }
.Toast-Msg-Danger-Body       { color: #000000; background: linear-gradient(360deg, rgba(200,180,180,1) 0%, rgba(200,185,185,1) 100%); }

.Toast-Msg-Info-Header       { color: #000000; background: linear-gradient(180deg, rgba(130,130,200,1) 0%, rgba( 90, 90,130,1) 100%); border-bottom: 1px solid #d5d5f5; }
.Toast-Msg-Info-Body         { color: #000000; background: linear-gradient(360deg, rgba(180,180,200,1) 0%, rgba(185,185,200,1) 100%); }

.Toast-Msg-Warning-Header    { color: #000000; background: linear-gradient(180deg, rgba(200,200,130,1) 0%, rgba(130,130, 90,1) 100%); border-bottom: 1px solid #f5f5e4; }
.Toast-Msg-Warning-Body      { color: #000000; background: linear-gradient(360deg, rgba(200,200,180,1) 0%, rgba(200,200,185,1) 100%); }

.BG { 
   background                   : #E3F0F6;
   background                   : -webkit-linear-gradient(to right, #E2EFF5 , #E3F0F6);
   background                   : linear-gradient(to right, #E2EFF5 , #E3F0F6);
   background-repeat            : no-repeat;
   background-size              : cover;
   background-position          : 0 0;
   color                        : #000000;
   transform                    : translateX(0);
   transition                   : transform 0.6s ease-in-out;
}
.main-content {
   width                        : 50%;
   border-radius                : 20px;
   box-shadow                   : 0 5px 5px rgba(0,0,0,.4);
   margin                       : 5em auto;
   display                      : flex;
}
.company__info {
   background-color             : #28607c;
   border-top-left-radius       : 20px;
   border-bottom-left-radius    : 20px;
   display                      : flex;
   flex-direction               : column;
   justify-content              : center;
   padding                      : 10;
   color                        : #fff;
}
.fa-android {
   font-size                    : 3em;
}

.row > h2{
   color                        : #28607c;
}
.login_form{
   background-color             : #fff;
   border-top-right-radius      : 20px;
   border-bottom-right-radius   : 20px;
   border-top                   : 1px solid #ccc;
   border-right                 : 1px solid #ccc;
}

@media only screen and (max-width: 400px) {
   .main-content {
      width                     : 90%;
   }
   .company__info {
      display                   : none;
   }
   .login_form {
      border-top-left-radius    : 20px;
      border-bottom-left-radius : 20px;
   }
   /*body {
     background: #FF00FF;
   }*/
}         
@media only screen and (min-width: 400px) {
   .main-content {
      width                      : 70%;
   }
   .company__info {
      border-top-right-radius    : 20px;
      border-bottom-left-radius  :  0px;
      border-bottom-right-radius :  0px;
   }
   .login_form {
      border-top-left-radius     :  0px;
      border-top-right-radius    :  0px;
      border-bottom-left-radius  : 20px;
   }
   /*body {
     background: #FF0000;
   }*/
}         
@media only screen and (min-width: 800px) {
   .main-content {
      width                      : 50%;
   }
   .company__info {
      border-top-right-radius    :  0px;
      border-bottom-left-radius  : 20px;
      border-bottom-right-radius :  0px;
   }
   .login_form {
      border-top-left-radius     :  0px;
      border-top-right-radius    : 20px;
      border-bottom-left-radius  :  0px;
   }
   /*body {
     background: #FFFF00;
   }*/
}         
@media only screen and (min-width: 1200px) {
   .main-content {
      width                      : 40%;
   }
   /*body {
     background: #FF00FF;
   }*/
}         


form{
   padding                      : 0 2em;
}
.form__input {
   background                   : transparent;
   font-size                    : 1.0em;
   widthc                       : 100%;
   border                       : 0px solid transparent;
   border-radius                : 0;
   border-bottom                : 1px solid #aaa;
   padding                      : 1em .5em .5em;
   padding-left                 : 2em;
   outline                      : none;
   margin                       : 0.5em auto;
   transition                   : all .5s ease;
}
.form__input : focus{
   background                   : transparent;
   border-bottom-color          : #28607c;
   box-shadow                   : 0 0 5px rgba(0,80,80,.4); 
   border-radius                : 4px;
}
.form-control:focus{
    color:var(--bs-body-color);
    background-color: #d0e4ee !important; /*var(--bs-body-bg);*/
    border-color:#86b7fe;
    outline:0;
    box-shadow:0 0 0 .25rem rgba(13,110,253,.25)
}


.form-floating>.form-control-plaintext~label,                                      /* Imput Label Color when Text is entered */
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label{
   color                        : #000000;
}
.form-floating>.form-control-plaintext~label::after,                            /* Imput Label BG Color when Text is entered */
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after
{
   background                   : transparent !important;
}         

#LoginForm .btn{
   transition                   : all .5s ease;
   width                        : 70%;
   border-radius                : 30px;
   color                        : #28607c;
   font-weight                  : 600;
   background                   : transparent;
   border                       : 1px solid #28607c;
   margin-top                   : 1.5em;
   margin-bottom                : 1em;
}
#LoginForm .btn:hover , .btn:focus{
   background-color             : #28607c;
   color                        : #fff;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance           : none;
  margin                       : 0;
}

/* Firefox */
#LoginForm input[type=number] {
  -moz-appearance              : textfield;
}

.ShowLoginFail {
   display                     : block;
   color                       : #FF0000;
   animation                   : fadeIn 2s;
}
@keyframes fadeIn {
     0% { opacity: 0; }
   100% { opacity: 1; }
}

.HideLoginFail {
   /*display                     : none;*/
   color                       : #FF0000;
   animation                   : fadeOut 2s;
}
@keyframes fadeOut {
   100% { opacity: 0; }
     0% { opacity: 1; }
}