body {
        background: #002857 url(uploads/DSC_0219-min.JPG) no-repeat;
        background-size: cover;
        position: unset !important;
        backdrop-filter: blur(4.2px);
        -webkit-backdrop-filter: blur(4.2px);
        min-height:100vh;
        padding-bottom: 10vh;
     background-repeat: repeat;

    }
    iframe.skiptranslate{
        display: none !important;
    }
    
 img.glamour_logo
 {
    width: 125px;
    position:absolute; 
 }
 .filled-btn
 {
    background: #c6b976;
 }
   span,
        li,
        div,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: Helvetica;
        }
        a,a:hover{
            font-family: Helvetica;
            color: #c6b976;
            text-decoration: none;
            
        }
        
        ul[role="tablist"]{
            background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
        }
        div#invoice_tabs   ul[role="tablist"],div#transaction_tabs   ul[role="tablist"]{
                justify-content: flex-start;
                padding:0px;

        }
              .ui-tabs .ui-tabs-panel{
            border-width:1px;
            border-color:#002857;
        }
                .ui-tabs .ui-tabs-nav li.ui-tabs-active{
            background: #fff;
    color: white;
    border-color: #002857;
        }
              .ui-tabs .ui-tabs-nav li{
                background: #c6b94f;
        }
        #tabs{
            padding: 0px;
        }
        p,
        span,
        li,
        div,label {
            font-size: 0.9rem;
            font-weight: 400;
            color: white;
        }
        div, label,a.paginate_button {
            color: #fff !important;
        }
        .btn{
            padding: 8px 20px !important;
        }
        /* Change default button colors */
        /* Change default button colors */
        
        
        .full-loader{    
            display:none;
    position: absolute;
   
    z-index: 1000;
    text-align: center;

    height: 80px;
    height: 100vh;
    left: 50%;
    top: 50%;
    z-index: 999;
        }
.btn-primary,
.btn-primary:disabled {
    background-color: #c6b976;
    border-color: #002857;
    color: #fff;
}
.btn-primary:hover {
    background-color: #fff;
    color: #002857;
}
.btn-warning,
.btn-warning:disabled {
    background-color: #c6b976;
    border-color: #c6b976;
    color: #fff;
}
.btn-warning:hover {
    background-color: #fff;
    color: #c6b976;
}
.btn-success,
.btn-success:disabled {
    background-color: #28a745;
    border-color: #28a745;
    color: #fff;
}
.btn-success:hover {
    background-color: #fff;
    color: #28a745;
}
.btn-info,
.btn-info:disabled {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}
.btn-info:hover {
    background-color: #fff;
    color: #17a2b8;
}
.btn-secondary,
.btn-secondary:disabled {
    background-color: #002857;
    border-color: #002857;
    color: #fff;
    opacity:1;
}
.btn-secondary:hover {
    background-color: #fff;
    color: #6c757d;
}
#appointments-table td,#sickLeaveTable td,#medRequestsTable td,#emr_table td{
      text-align: center;
}
#appointments-table tr>td:last-child{
      text-align: left !important;
          padding: 1% 2%;
}
#emr_table{
    width:100% !important;
}
#sickLeaveTable td,#medRequestsTable td, #emr_table td{
      white-space: nowrap;
}
        #appointments-table td,#billsTable td,#clearbillsTable td, #eliteTrxTable td, #sickLeaveTable td,#medRequestsTable td,#emr_table td{
        background: #002857 !important;
      
        
        }
        #appointments-table td,#clearbillsTable td, #eliteTrxTable td,  #billsTable td,#sickLeaveTable td,#medRequestsTable td, #emr_table td{
            border-bottom: 1px solid #fff !important;
            border: none;
        }
        #appointments-table th,#clearbillsTable th,#eliteTrxTable th, #billsTable th,#sickLeaveTable th,#medRequestsTable th, #emr_table th{
            border-bottom: 1px solid #c6b976 !important;
            color: #c6b976;
            text-align: center;
           
        }
        #billsTable td:first-child, #clearbillsTable  td:first-child, #eliteTrxTable  td:first-child{
            text-align: center;
        }
        #billsTable td:first-child,  #clearbillsTable  td:first-child,  #eliteTrxTable  td:first-child{
            text-wrap: nowrap;
        }
         .dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.next,.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.previous,.dataTables_wrapper .dataTables_paginate .paginate_button.current{
            color: #fff !important;
        }
        a.paginate_button.current{
            background: #c6b976 !important;
            border: none !important;
            color: #fff !important;
        }
        div#appointments-table_wrapper  #appointments-table_length select, div#clearbillsTable_wrapper  #clearbillsTable_length select,  div#billsTable_wrapper  #billsTable_length select,div#sickLeaveTable_wrapper  #sickLeaveTable_length select,div#medRequestsTable_wrapper  #medRequestsTable_length select,#emr_table_length select {
               
                
                 min-width: 50px;
            }
            div#eliteTrxTable_wrapper  #eliteTrxTable_length select{
                 min-width: 50px;
                color: #fff !important;
            }
        div#appointments-table_wrapper input,div#appointments-table_wrapper label, div#eliteTrxTable_wrapper input, div#appointments-table_wrapper #appointments-table_length label,div#billsTable_wrapper input,div#billsTable_wrapper label, div#billsTable_wrapper #billsTable_length label, div#sickLeaveTable_wrapper #sickLeaveTable_length label, div#medRequestsTable_wrapper #medRequestsTable_length label, div#emr_table_wrapper #emr_table_length label{
                font-size: 0.9rem !important;
            font-weight: 400;
            color: white;
        }
        div#eliteTrxTable_wrapper label,div#eliteTrxTable_wrapper #eliteTrxTable_length label{
            color: white !important;
        }
        .dataTables_wrapper .dataTables_paginate,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{
                color: #fff !important;
        }
            
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: #c6b976;
        }

        h1 {
            font-size: 2rem;
            font-weight: 700;
        }

        h2 {
            font-size: 1.8rem;
            font-weight: 600;
        }

        h3 {
            font-size: 1.5rem;
            font-weight: 600;
        }

        h4 {
            font-size: 1.2rem;
            font-weight: 600;
        }

        h5 {
            font-size: 1.1rem;
            font-weight: 600;
        }

        h6 {
            font-size: 1rem;
            font-weight: 600;
        }

        .signup_container .row,.mobno_container .row,.list_files_container .row{
            min-height: 100vh;
            align-content: center;
            
        }
          .signup_container{
              display: none;
          }
  .swal2-close {
    background: none !important;
    border: none !important;
    color: white !important;
    font-size: 25px !important;
    font-weight: bold !important;
    padding:0px !important;
  }
        button,
        a.button {
            border: 1px solid #c6b976;
            padding: 8px 30px;
            text-transform: uppercase;
            text-align: center;
            font-weight: 500;
            background-color: transparent;
            color: #c6b976;
            cursor: pointer;
            border-radius: 5px;
        }
                button:hover,
        a.button:hover {
            border: 1px solid #c6b976;
            padding: 8px 30px;
            text-transform: uppercase;
            text-align: center;
            font-weight: 500;
            background-color: #c6b976;
            color: #002857;
        }

        input,select,input:-internal-autofill-selected  {
            border: 1px solid #c6b976;
            padding: 5px 10px;
           border-radius: 5px;
            text-align: left;
            font-weight: 500;
            background-color: transparent;
            color: white;
            min-width:300px;
            min-height:33px;
        }
        
        label {
            font-size: 0.9rem;
        }
        p.error{
            color: red;
            font-size: 1rem;
            
        }
        ::-webkit-calendar-picker-indicator {
            filter: invert(1);
        }
        select#country-code{
            min-width:35px;
        }
        select option{
            color: #000;
            
        }
        #otp-div{
            display: none;
            
        }
        #resend-btn,
        #change-number-btn,.list_files_container{
            display: none;
        }
        .list_files_container ul.list{
            list-style-type: none;
            width: max-content;
            background: #002857;
            box-shadow: 0 6px 12px 0 rgb(0 0 0 / 12%);
            padding-left: 0;
            border:1px solid #c6b976;
            
        }
        .list_files_container .list-wrapper{
            margin-top: 20px;
        }
        .list_files_container ul.list li{
            display: flex;
            justify-content: space-between;
            min-width: 300px;
            padding: 10px;
            cursor: pointer;
        }
        .list_files_container ul.list li p{
            margin-bottom:0px;
        }
        ul.list li.active:before {
              content: '✓';
              }
              ul.list li.active{
                  background: green;
              }
        .list_files_container ul.list  li:not(:last-child) {
            border-bottom: 1px solid #c6b976;
        }
        .loader {
    display: none;
    position: absolute;
 left: 0; right: 0; bottom: 0;
    /*background: rgba(255,255,255,0.8) url(https://i.gifer.com/VAyR.gif) center center no-repeat;*/
    z-index: 1000;
        text-align: center;
    top: 50%;
    transform: translateY(-50%);
    height:80px;
}
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #000;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
.ui-datepicker div span{
    color:#000;
}
/*.ui-datepicker {*/
/*  background-color: #002857 !important;*/
/*}*/

/*.ui-datepicker-header {*/
/*  background-color: #002857 !important;*/
/*  color: white !important;*/
/*}*/

/*.ui-datepicker-calendar td a {*/
/*  color: #002857 !important;*/
/*}*/

/*.ui-datepicker-calendar .ui-state-hover a,.ui-datepicker-title {*/
/*  background-color: #002857 !important;*/
/*}*/
.ui-dialog {
  background-color: #002857 !important;
  color: white;
}

.ui-dialog .ui-dialog-titlebar {
  background-color: #c6b976;
  color: white;
  border: none;
  text-align: center;
}

.ui-dialog .ui-dialog-buttonpane button {
  background-color: #c6b976;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  margin: 0.5em;
  font-size: 1em;
  border-radius: none !important;
}

.ui-dialog .ui-dialog-buttonpane button:hover {
  background-color: #b8860b;
  color: #002857;
  cursor: pointer;
}

.ui-dialog .ui-dialog-buttonpane button:focus {
  outline: none;
}
.ui-dialog-buttonpane{
    background: #002857 !important;
}
.ui-dialog-content.ui-widget-content {
    display: flex !important;
     justify-content: center; 
    /* align-items: center; */
    flex-direction: column !important;
}

.ui-dialog-titlebar-close {
  position: absolute;
  top: 50%;
  right: 0.3em;
  margin-top: -10px;
  padding: 1px;
  height: 20px;
  width: 20px;
  text-align: center;
  border: none;
  background: transparent;
  outline: none;
  cursor: pointer;
}
.ui-dialog-titlebar-close:hover {
  background: #FFD700;
}
.ui-dialog-titlebar-close .ui-icon {
  display: block;
  margin: 1px auto;
}
.ui-icon-closethick {
  background-image: url("https://code.jquery.com/ui/1.13.1/themes/base/images/ui-icons_222222_256x240.png");
  background-position: -64px -16px;
  height: 16px;
  width: 16px;
}

/*Tabs Styling */

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	width: 100%;
	display: flex;
    justify-content: space-between;
}

ul.tabs li {
	float: left;
	margin: 0;
	cursor: pointer;
	padding: 0px 10px;
	height: 31px;
	line-height: 31px;
	
	background-color: transparent;
	color: #ccc;
	overflow: hidden;
	position: relative;
}

/*.tab_last { border-right: 1px solid #333; }*/

ul.tabs li:hover {
	background-color: #ffffff00;
    color: #c6b976;
    border-bottom: 2px solid #c6b976;

}

ul.tabs li.active {
	background-color: #ffffff00;
    color: #c6b976;
    border-bottom: 3px solid #c6b976;
    display: block;
}

.tab_container {
	
	border-top: 1px solid #ffffff30;
	clear: both;
	/*float: left;*/
	width: 100%;
	
	overflow: auto;
}

.tab_content {
	padding: 20px;
	display: none;
	
}

.cta-strip{display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
    border-bottom: 2px solid #c6b976;
    margin-bottom: 30px;
}
.tab_drawer_heading { display: none; }
	.time-grid {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		grid-gap: 20px;
	}
	
	.time-grid .con_time:hover {
		background: #c6b976;
		color: white;
	}
	.time-grid label{
	   margin-bottom:0rem;
	}
	.time-grid .time_container{
	    display: inline-flex;
        justify-content: center;
        align-items: baseline;
        border: 1px solid #c6b976;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
	}
	.time-grid label,input[name="con_time"]{
	     cursor: pointer;
	     min-width: 20px;
    min-height: 10px;
	}
	.time-grid .time_container:hover, .time-grid .time_container.active{
	    color: #fff;
	    background: #c6b976;
	    }
	    
	    
	    
	    
	    
	    
	    
	    /* profile Tab Styling */
	    
	    
	    
	    
	    #profile-form .form-group{
	        display:flex;
	        flex-direction: column;
	    }
	    #profile-form{
	        display: grid;
	       grid-template-columns: repeat(2, 1fr);
	        column-gap: 50px;
	    }
	    #profile-form .profile-pic-preview {
        width: 100px;
        height: 100px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 20px;
        border-radius: 50%; 
    }



/*Header Styling */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #002857;
  color: #c6b97f;
}

nav ul {
  display: flex;
}

nav li {
  margin: 0 10px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

.user {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  gap:10px;
}

.username {
  margin-right: 10px;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  padding: 10px;
  background-color: #002857;
  color: #c6b976;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width:100%;
}

.dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown li {
  margin-bottom: 5px;
}

.dropdown a {
  color: #c6b976;
  text-decoration: none;
}

.user:hover .dropdown {
  display: block;
}

@media only screen and (max-width: 768px) {
  .header {
    flex-wrap: wrap;
    padding:10px;
  }
  
  nav {
    /*width: 100%;*/
    order: 2;
    /*margin-bottom: 20px;*/
  }
  
  .user {
    order: 1;
    flex-direction: column;
    /*margin-bottom: 20px;*/
  }
  
  .username {
    display: none;
  }
  
  .dropdown {
    /*position: static;*/
    display: none;
    width: 120px;
    padding: 10px 0;
    text-align: center;
    box-shadow: none;
    background-color: #002858;
  }
  
  .user:hover .dropdown {
    display: block;
  }
  
  .dropdown a {
    color: #fff;
  }
}



@media screen and (max-width: 768px) {
       
	    /* profile Tab Styling for Mobile */
	    
    #profile-form{
	        display: grid;
	        grid-template-columns: repeat(2, 1fr);
	       row-gap: 10px;
	    }
    .cta-strip{
        flex-direction: column;
        padding-bottom: 10px;
        margin-bottom:10px;
    }
	.tabs {
		display: none !important;
	}
	.tab_drawer_heading {
	
		color: #c6b976;
		border-top: 1px solid #c6b976;
		margin: 0;
		padding: 5px 20px;
		display: block;
		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;
	}
	.d_active {
		border-bottom: 2px solid #c6b976;
        background: #c6b976;
        color: #002857;
	}
}






/*Appointment Tab Custome styling*/


.tab_content h2, .tab_content button, .tab_content a,.tab_content select, .tab_content option, .tab_content label, .tab_content span,.tab_content p{
    color:#002857 !important;
    
}  
.tab_content table.dataTable{
        background: #002857;
    border: 2px solid #c6b97f;
    border-radius: 10px;
}
 .tab_content{
     background: #fff;
     border-radius: 10px;
 }   
 .tab_content .cta-strip {
    border-bottom: 2px solid #002857;
 }
.tab_content .disabled-appointment{
    background: #c4c4c4;
}
.tab_content thead{
    height: 50px;
}
.tab_content input{
    color: #002857 !important;
}

#tab4{
    padding:0px;
    overflow: hidden;
}

div.top-main-cont {
  background: #002857;
  padding: 20px;
  border-radius: 20px;
  max-width: 90%;
  margin-top: 15vh;
}
form#redeemFormSubmit{
   
    position:relative;
    background-position: center;
    background-repeat: no-repeat;  
    background-size: cover;
    display: flex;
    text-align: left;  
    flex-direction: column; 
    gap: 0px;
    padding: 5%;
    /*border: 2px solid #002857;*/
    margin: 10px 0px;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.closeRedeem{
    cursor: pointer;
}
div#redeemForm{
    width:45%;
}

form#redeemFormSubmit *{
    color: #fff !important;
}
div#tab4 {

  background-image: url("uploads/BG GCCELITEArtboard 3.png");
  backdrop-filter: blur(5px);
 /*background:#002857;*/
 /* background-size:cover;*/
 /* background-position: inherit;*/
 /* background-repeat: no-repeat;*/
}
div.elite-sec-headings h3{
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}
div.elite-tab .col-lg-3 div.box:hover{
      transform: scale(1.1);
}
div.elite-tab .col-lg-3 div.box1{
    width: 90%; 
    height:100%;
    background: url("uploads/BGportalcoinsArtboard 2.png"); 
   
    background-size: cover; 
    background-position: bottom;
    border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 8px;
      transition: transform 0.3s ease;

}
div.elite-tab .col-lg-3 div.box2{
    width: 90%; 
    height:100%;

    background: url("uploads/BGportalArtboard 1.png"); 
    background-size: cover; 
    background-position: bottom;
    border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 8px;
      transition: transform 0.3s ease;

}
    .tab_content .detailstable td {
    color: #fff !important;
    }
 .tab_content table.detailstable td{
        text-align: left;
    }
form#redeemFormSubmit option {
    color: black !important;
}
@media screen and (max-width: 768px) {
  div.top-main-cont {
    padding: 10px;
    border-radius: 10px;
    max-width: 90%;
  }
   button,
        a.button {
            border: 1px solid #c6b976;
            padding: 5px 10px;
            text-transform: uppercase;
            text-align: center;
            font-weight: 500;
            background-color: transparent;
            color: #c6b976;
            cursor: pointer;
            border-radius: 5px;
                font-size: 16px;
        }
                button:hover,
        a.button:hover {
            border: 1px solid #c6b976;
            padding: 5px 10px;
            text-transform: uppercase;
            text-align: center;
            font-weight: 500;
            background-color: #c6b976;
            color: #002857;
        }

        input,select,input:-internal-autofill-selected  {
            border: 1px solid #c6b976;
            padding: 5px 10px;
           
            text-align: left;
            font-weight: 500;
            background-color: transparent;
            color: white;
            min-width:auto;
            min-height:33px;
        }
        img.glamour_logo{
             width: 70px;
             position:relative; 
        }
        header.header{
            flex-direction: row-reverse;
        }
        ul[role="tablist"].ui-tabs-nav{
            flex-direction: column;
            padding:0px;
            
        }
         ul[role="tablist"] li a{
             font-size: 10px;
         }
    h3.tab_drawer_heading{
        border-radius:10px;
    }

    
    #billsTable td:first-child {
    text-align: left;
}
    #sickLeaveTable td,#medRequestsTable td, #emr_table td, #billsTable td, #appointments-table td{
      white-space: normal;
      text-align:left;
}
.ui-tabs .ui-tabs-panel{
    padding:10px;
}
.ui-accordion .ui-accordion-content{
    padding: 10px; 
}
.btn{
    padding: 5px 10px;
}
form#redeemFormSubmit{
   
   
  
   padding: 20px;
}
div#redeemForm{
    width:100%;
}
}

.progress_tracker .step::hover span.sample_tooltip{
    display: none;
}
/*Tooltip Styles*/
.tooltip_wrapper {
text-transform: uppercase;
/*background: #ececec;*/
color: #555;
cursor: help;
/*font-family: "Gill Sans", Impact, sans-serif;*/
font-size: 20px;
/*margin: 100px 75px 10px 75px;*/
/*padding: 15px 20px;*/
position: relative;
/*text-align: center;*/
width: 100%;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.tooltip_wrapper .tooltip ul{
    flex-direction: column; color: #002857; padding: 0px;
}
.tooltip_wrapper .tooltip ul li {
    color:  #002857; align-items: flex-start; margin: 0px; font-size: 14px;
}
.tooltip_wrapper .tooltip {
background: white;
bottom: 100%;
color: #002857 !important;
display: block;
left: -80px;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
width: 300px;
border-radius:5px;
/*text-align: center;*/
font-weight: 600;
-webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
   -o-transform: translateY(10px);
    transform: translateY(10px);
-webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
   -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.tooltip_wrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}

/* CSS Triangles - see Trevor's post */
.tooltip_wrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #fff 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}

.tooltip_wrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
   -o-transform: translateY(0px);
    transform: translateY(0px);
}
.tooltip_wrapper .tooltip.line{
    background: #fff;
    left: 50%;
    transform: translateX(50%);
    bottom: 18%;
    padding: 10px;
    border-radius: 10px;
}
.step  span.sample_tooltip{
 position: absolute;
 background: #fff;
 width: max-content;
 padding: 10px;
 line-height: 10px;
 z-index: 2;
 border-radius: 5px;
left: -50px;
    top: 40px;
}
.step  span.sample_tooltip::before {
  content: '';
  border-bottom: 15px solid #ffffff;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  position: absolute;
    top: -12px;
    left: 50%;
}