/* Registration Progress Bar */

#registrationprogress {
	text-align: left;
    margin-left: -40px;
    padding-top: 10px;
}

#registrationprogress  ul {
	list-style: none;
	display: inline-table;
}
#registrationprogress  ul li {
	display: inline;
    border: 1px solid transparent;
}
	
#registrationprogress ul li .chevron {
	display: block;
	float: left;
	height: 10px;
	background: #15527D;
	text-align: center;
	padding: 0px 20px 20px 20px;
	position: relative;
	margin: 0 2px 3px 0; 
	
	font-size: 14px;
	text-decoration: none;
	color: #fff;
}

#registrationprogress ul li .chevron.completed{
    background: green;
}

#registrationprogress ul li .chevron.active{
    background: #15527D;
}

#registrationprogress ul li .chevron.inactive{
    background: grey;
}

#registrationprogress ul li .chevron:after {
	content: "";  
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #15527D;
	position: absolute; right: -10px; top: 0;
	z-index: 1;
}

#registrationprogress ul li .chevron.completed:after {
    border-left: 10px solid green;
}

#registrationprogress ul li .chevron.active:after {
    border-left: 10px solid #15527D;
}

#registrationprogress ul li .chevron.inactive:after {
    border-left: 10px solid grey;
}

#registrationprogress ul li .chevron:before {
	content: "";  
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid;
	position: absolute; left: 0; top: 0;
}
	
#registrationprogress ul li:first-child .chevron {
	border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#registrationprogress ul li:first-child a:before,
#registrationprogress ul li:first-child span.chevron  {
	display: none; 
}

#registrationprogress ul li:last-child .chevron{
	padding-right: 20px;
	border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#registrationprogress ul li:last-child .chevron:after {
	display: none; 
}
			
#registrationprogress ul li .chevron.active:hover {
	background: #6a99b7;

}
#registrationprogress ul li .chevron.active:hover:after {
	border-left-color: #6a99b7;
}

#registrationprogress ul li .chevron.completed:hover {
	background: #eeeeee;
    color: green;
}
#registrationprogress ul li .chevron.completed:hover:after {
	border-left-color: #eeeeee;
}

#registrationprogress ul li .chevron.current {
    text-decoration: underline;
}

/* Override WET form style defaults */
.radio input[type="radio"]{
    margin-left: 0px;
}

input[type="checkbox"] {
    display:inline;
    vertical-align:middle;
}

.radio-offset {
    margin-left: 50px;
}
.width-20 {
    width: 20% !important;
}
.width-25 {
    width: 25% !important;
}
.width-30 {
    width: 30% !important;
}
.width-40 {
    width: 30% !important;
}

.width-50 {
    width: 50% !important;
}

.width-60 {
    width: 60% !important;
}

.width-70 {
    width: 70% !important;
}

.width-80 {
    width: 80% !important;
}

.width-100 {
    width: 100%;
}

.clickable {
    cursor: pointer;
}

.side-menu-item {
    font-size: 10pt;
}

.list-bullet-none {
    list-style-type: none !important;
}

.striped-row {
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 10px;
}
.striped-row:nth-of-type(even) {
    background-color: #eeeeee;
}

.PhoneExtension  {
     padding-right: 4px!important;
     padding-left: 4px!important;
}

.logoutColor {
    background-color: #ffc107;
    color: #000000 !important;  
}

.logoutColor:hover {
    background-color: #fd7e14 !important;
}


/*right position*/
.tooltipright {
    position: relative;
    display: inline-block;
    border-bottom: 2px dotted blue;
}
.toolttext{
    display:none;
}
.tooltipright .toolttext {
    display: inline-block;
    visibility: hidden;
    width: 200px;
    height: auto;
    background-color: lightsalmon;
    color: black;
    text-align: center;
    border-radius: 4px;
    padding: 8px;
    /* Position the tooltip */
    position: absolute;
    z-index: 0;
    left: 110%;
}

.tooltipright:hover .toolttext {
    visibility: visible;
    display:inline;
}
/*left position*/
.tooltipleft {
    position: relative;
    display: inline-block;
    border-bottom: 2px dotted blue;
}

.tooltipleft .toolttextleft {
    visibility: hidden;
    width: 200px;
    height: 50px;
    background-color: lightsalmon;
    color: white;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    right: 100%;
}

.tooltipleft:hover .toolttextleft {
    visibility: visible;
}

.arrowpopup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.arrowpopup .tooltiptext {
    visibility: hidden;
    width: 190px;
    background-color: #856;
    color: white;
    text-align: center;
    border-radius: 4px;
    padding: 9px;
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -85px;
}

 .arrowpopup .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #856 transparent transparent transparent;
    }

.arrowpopup .show {
    visibility: visible;
}