body {font-family: Arial, Helvetica, sans-serif;}
                        
                .modal {
                    display: none; 
                    position: fixed; 
                    z-index: 1;  
                    padding-top: 100px; 
                    left: 0;
                    top: 0; 
                    width: 100%; 
                    height: 100%;
                    overflow: auto;
                    background-color: rgb(0,0,0); 
                    background-color: rgba(0,0,0,0.4); 
                }
                .modal-content {
                    background-color: #fefefe;
                    margin: auto;
                    padding: 20px;
                    border: 1px solid #888;
                    width: 38%;
                    border-radius: 10px;
                    /* background-color: rgb(207,232,220); */
                    /* background-color: rgb(158, 169, 235);      */
                    background-color: #00d9ff;
                }
                /* .close {
                    color: #aaaaaa;
                    float: right;
                    font-size: 40px;
                    font-weight: bold;
                }
                .close:hover,
                .close:focus {
                    color: #000; 
                    text-decoration: none;
                    cursor: pointer;
                } */


                .textAlign
                {
                    padding-left: 20;
                    text-align: left;
                    font-size: small;
                    font-weight: normal;
                }

                .heading
                {
                    font-weight: normal;
                    text-align: center;
                    font-size: large;
                }

                .innerTableContent
                {
                    width: 400;
                    padding-left: 20;
                    font-size: small;
                }

                .checkbox
                {
                    width: 45%;
                    overflow: auto;
                }

                .buttonTable
                {
                    width: 100%;
                    margin-top: 8px;
                    font-size: small;
                }

                .textContent
                {
                    font-size: small;
                }

                .popup {
                    position: relative;
                    display: inline-block;
                    cursor: pointer;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                  }
                  
                  /* The actual popup */
                  .popup .popuptext {
                    visibility: hidden;
                    width: 188px;
                    height: 254px;
                    background:none;
		    color: #fff;
                    text-align: center;
                    border-radius: 6px;
                    padding: 8px 0;
                    position: absolute;
                    /* z-index: 1; 
                    bottom: 125%;
                   left: 50%;
                    margin-left: -80px; */
                  }
                  
                  /* Popup arrow */
                  .popup .popuptext::after {
                    /* content: ""; */
                    position: absolute;
                    top: 100%;
                    left: 50%;
                    /* margin-left: -5px; */
                    border-width: 5px;
                    border-style: solid;
                    border-color: #555 transparent transparent transparent;
                  }
                  
                  /* Toggle this class - hide and show the popup */
                  .popup .show {
                    visibility: visible;
                    -webkit-animation: fadeIn 1s;
                    animation: fadeIn 1s;
                  }

                  .popup .hide {
                  
                    visibility: hidden;
                  }

                  /* Add animation (fade in the popup) */
                  @-webkit-keyframes fadeIn {
                    from {opacity: 0;} 
                    to {opacity: 1;}
                  }
                  
                  @keyframes fadeIn {
                    from {opacity: 0;}
                    to {opacity:1 ;}
                  }

                .spanText
                {
                  color: red;
                  font-size: 10px;
                  height: 0px;
                }  

                .spanRegisterUser
                {
                  color: blue;
                  font-size: 10.5px;
                  font-weight: bold;
                }  

                .dropDown
                {
                    height: 32px;
                    width: 100%;
                    font-size: 14px;
                }

                .dob
                {
                    height: 24.5px;
                    width: 182;
                }

                .alignLeft
                {
                    text-align: left; 
                }

                .alignRight
                {
                    text-align: right;
                }

                .confirm-title
                {
                    font-size: 18px;
                }

                .inputBox
                {
                    height: 32px; 
                    width: 434px;
                    font-size: 14px;
                    padding-left: 8px;
                }

                .otp
                {
                    height: 32px; 
                    width: 142px;
                    font-size: 14px;
                    padding-left: 8px;
                }

                .selectName
                {
                    height: 32px; 
                    width: 314px;
                    font-size: 14px;
                }

                .inputName
                {
                    height: 32px; 
                    width: 314px;
                    font-size: 14px;
                    padding-left: 8px;
                }
            
                .modalDialog {
                    position: fixed;
                    font-family: Arial, Helvetica, sans-serif;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    background: rgba(0,0,0,0.8);
                    z-index: 99999;
                    opacity:0;
                    -webkit-transition: opacity 400ms ease-in;
                    -moz-transition: opacity 400ms ease-in;
                    transition: opacity 400ms ease-in;
                    pointer-events: none;
                    overflow:auto;

                }
            
                .modalDialog:target {
                    opacity:1;
                    pointer-events: auto;
                }
            
                .modalDialog > div {
                    
                    width: 454px;
                    position: relative;
                    margin: 10% auto;
                    padding: 5px 20px 13px 20px;
                    border-radius: 10px;
                    /* background: #fff;
                    background: -moz-linear-gradient(#fff, #999);
                    background: -webkit-linear-gradient(#fff, #999);
                    background: -o-linear-gradient(#fff, #999); */
                    /* background-color: rgb(157, 181, 219);  */
                    background-color: #cedadd;
                }  
            
                .close {
                    background: #a1ddd3;
                    color: rgb(21, 22, 21);
                    line-height: 25px;
                    position: absolute;
                    right: -12px;
                    text-align: center;
                    top: -10px;
                    width: 24px;
                    text-decoration: none;
                    font-weight: bold;
                    -webkit-border-radius: 12px;
                    -moz-border-radius: 12px;
                    border-radius: 12px;
                    -moz-box-shadow: 1px 1px 3px #000;
                    -webkit-box-shadow: 1px 1px 3px #000;
                    box-shadow: 1px 1px 3px #000;
                }
            
                .close:hover { background: #00d9ff; }

                .panel{padding:0.01em 16px;box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);font-size: small;}
                
                label {
                    border:1px solid #ccc;
                    padding:2px;
                    margin:0 0 10px;
                    display:block; 
                   }
                   
                   label:hover {
                    /* background:#eee; */
                    cursor:pointer;
                   }
               
               .toastButton {
                    /* flex: 1 1 auto; */
                    padding: 12px 16px 12px 16px;
                    text-align: center;
                    font-size: small;
                    transition: 0.5s;
                    background-size: 200% auto;
                    color: rgb(15, 15, 15);
                    box-shadow: 0 0 20px #eee;
                    border-radius: 10px;
                    font-family: 'Montserrat', sans-serif;
                    margin: 0;
                   }
                .toastButton {
                    background-image: linear-gradient(to right, #c5ebd3 0%, #b9cfda 51%, #c1e7cf 100%);
                }             
                .toastButton:hover {
                    background-position: right center; 
                  }

                #toast {
                    visibility: hidden;
                    max-width: 50px;
                    height: 50px;
                    margin: auto;
                    background-color: #333;
                    color: #fff;
                    text-align: center;
                    border-radius: 2px;
                
                    position: fixed;
                    z-index: 1;
                    left: 0;right:0;
                    bottom: 30px;
                    font-size: 17px;
                    white-space: nowrap;
                }
                #toast #img{
                    width: 50px;
                    height: 50px;
                    
                    float: left;
                    
                    padding-top: 16px;
                    padding-bottom: 16px;
                    
                    box-sizing: border-box;
                
                    
                    background-color: #111;
                    color: #fff;
                }
                #toast #desc{
                
                    
                    color: #fff;
                   
                    padding: 16px;
                    
                    overflow: hidden;
                    white-space: nowrap;
                }
                
                #toast.show {
                    visibility: visible;
                    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
                    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
                }
                
                @-webkit-keyframes fadein {
                    from {bottom: 0; opacity: 0;} 
                    to {bottom: 30px; opacity: 1;}
                }
                
                @keyframes fadein {
                    from {bottom: 0; opacity: 0;}
                    to {bottom: 30px; opacity: 1;}
                }
                
                @-webkit-keyframes expand {
                    from {min-width: 50px} 
                    to {min-width: 350px}
                }
                
                @keyframes expand {
                    from {min-width: 50px}
                    to {min-width: 350px}
                }
                @-webkit-keyframes stay {
                    from {min-width: 350px} 
                    to {min-width: 350px}
                }
                
                @keyframes stay {
                    from {min-width: 350px}
                    to {min-width: 350px}
                }
                @-webkit-keyframes shrink {
                    from {min-width: 350px;} 
                    to {min-width: 50px;}
                }
                
                @keyframes shrink {
                    from {min-width: 350px;} 
                    to {min-width: 50px;}
                }
                
                @-webkit-keyframes fadeout {
                    from {bottom: 30px; opacity: 1;} 
                    to {bottom: 60px; opacity: 0;}
                }
                
                @keyframes fadeout {
                    from {bottom: 30px; opacity: 1;}
                    to {bottom: 60px; opacity: 0;}
                }

                .tab {
                    overflow: hidden;
                    /* border: 1px solid rgb(83, 205, 226); */
                    background-color: rgb(83, 205, 226);
                }
                  
                  /* Style the buttons inside the tab */
                  .tab button {
                    background-color: inherit;
                    float: left;
                    border: none;
                    outline: none;
                    cursor: pointer;
                    padding: 4px 4px;
                    transition: 0.3s;
                    font-size: 17px;
                  }
                  
                  /* Change background color of buttons on hover */
                  .tab button:hover {
                    background-color: rgb(63, 154, 207);
                  }
                  
                  /* Create an active/current tablink class */
                  .tab button.active {
                    background-color: rgb(104, 83, 226);
                    color: white;
                  }
                  
                  /* Style the tab content */
                  .tabcontent {
                    display: none;
                    /* padding: 6px 12px; */
                    /* border: 1px solid #ccc; */
                    border-top: none;
                    font-size: 10px;
                  }

                  .button {
                    border-radius: 0px;
                    background-color: #8f177bc7;
                    border: none;
                    color: #FFFFFF;
                    text-align: center;
                    font-size: 18px;
                    padding: 4px;
                    width: 140px;
                    transition: all 0.5s;
                    cursor: pointer;
                    margin: 0px;
                  }
                  
                  .button span {
                    cursor: pointer;
                    display: inline-block;
                    position: relative;
                    transition: 0.5s;
                  }
                  
                  .button span:after {
                    content: '\00bb';
                    position: absolute;
                    opacity: 0;
                    top: 0;
                    right: -20px;
                    transition: 0.5s;
                  }
                  
                  .button:hover span {
                    padding-right: 25px;
                  }

                  .button:hover {
                    background-color: #472cc4c7;
                  }
                  
                  .button:hover span:after {
                    opacity: 1;
                    right: 0;
                  }

                  .ui-datepicker
                  {
                      /* width: 12em;
                      height: 12em; */

                      font-size: .3em; width: 14em; height: 14.5em; background: none; padding: .2em .2em 0; display: none; 
                  }

                  .title {
                    font-size: 23px;
                  }
                  
                  .sub-title {
                      font-size: 14px;
                  }
                  

                  .div-class {
                    position: relative;
                  }
                  .input-class {
                    position: absolute;
                    opacity: 0;
                  }
                  .input-class::-webkit-calendar-picker-indicator {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                  }
                  .input-class:hover + button {
                    background-color: silver;
                  }