/*====================== TOOLTIP ============================*/
/* Tooltip container */
.mtooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted white; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.mtooltip .mtooltiptext {
    visibility: hidden;
    width: 220px;

    background-color: #FF7A86;/*#555*/
    //background: url('../images/lined_paper_light.jpg');
    background-repeat: no-repeat;
    background-size: auto;

    text-color: #FFF;
    font-color: #FFF;
    font-size: 4px;
    text-align: center;

    color: #FFF;
    text-align: center;
    padding: 0px 0px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.mtooltip .mtooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #F90101 transparent; /* ARROW POINTER DIRECTION #555 transparent transparent transparent;*/
}

/* Show the tooltip text when you mouse over the tooltip container */
.mtooltip:hover .mtooltiptext {
    visibility: visible;
    opacity: 1;
}
/* FOR USE THIS FOLLOWING CODE
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
*/
/*==================================================*/

/*SECOND TOOLTIP*/
/*====================== TOOLTIP ============================*/
/* Tooltip container */
.mtooltipGreen {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted white; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.mtooltipGreen .mtooltiptextGreen {
    visibility: hidden;
    width: 230px;
    background-color: #5CEB81;/*#555*/
    //background: url('../images/lined_paper_light.jpg');
    background-repeat: no-repeat;
    background-size: auto;

    text-color: #FFF;
    font-color: #FFF;
    font-size: 4px;

    color: #FFF;
    text-align: center;
    padding: 0px 0px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.mtooltipGreen .mtooltiptextGreen::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #116703 transparent; /* ARROW POINTER DIRECTION #555 transparent transparent transparent;*/
}

/* Show the tooltip text when you mouse over the tooltip container */
.mtooltipGreen:hover .mtooltiptextGreen {
    visibility: visible;
    opacity: 1;
}
/* FOR USE THIS FOLLOWING CODE
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
*/
/*==================================================*/

/*THIRD TOOLTIP*/
/*====================== TOOLTIP ============================*/
/* Tooltip container */
.mtooltipThird {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.mtooltipThird .mtooltiptextThird {
    visibility: hidden;
    //width: 220px;
    background-color: #116703;/*#555*/
    color: #fff;
    text-align: center;
    padding: 2px 2px 2px 2px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.mtooltipThird .mtooltiptextThird::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #116703 transparent; /* ARROW POINTER DIRECTION #555 transparent transparent transparent;*/
}

/* Show the tooltip text when you mouse over the tooltip container */
.mtooltipThird:hover .mtooltiptextThird {
    visibility: visible;
    opacity: 1;
}
/* FOR USE THIS FOLLOWING CODE
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
*/
/*==================================================*/

.myTable{
    border: 0px solid white;
    vertical-align: top;
}

/*====================== POPUP ============================*/
/* Popup container */
.mpopup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The actual popup (appears on top) */
.mpopup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    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 */
.mpopup .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 when clicking on the popup container (hide and show the popup) */
.mpopup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

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

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

/* IT ALSO ADD SOME JAVA SCRIPT
FOR USE THIS FOLLOWING CODE
<div class="popup" onclick="myFunction()">Click me!
  <span class="popuptext" id="myPopup">Popup text...</span>
</div>
*/
/*==================================================*/



.mydownimg{
	border-radius:7px;
}
.mydownimg:hover{
	position:absolute;
	margin:-70px 0px 0px -70px;
	float:center;
	height:200px;
	width:200px;
	border:solid;
}



.myBoxShadow
{
	-moz-box-shadow: 3px 3px 5px 6px #ccc;
	-webkit-box-shadow: 3px 3px 5px 6px #ccc;
	box-shadow: 4px 4px 6px 6px #ccc;
}


.myButton{
    width:auto;
    transition-duration: 0.7s;
    color:#F95613;
    font-family: ProximaNova-Light;
    font-size:22px;
    border:1px solid #F95613;
    padding: 5px 25px;
    border-radius:10px;
    margin:0% 0 0% 0%;
}
.myButton:hover{
    background-color: #F95613;
	color:black;
}

.myButton1{
    width:auto;
    transition-duration: 0.7s;
    color:#F95613;
    font-family: ProximaNova-Light;
    font-size:12px;
    border:1px solid #F95613;
    padding: 1px 5px;
    border-radius:10px;
    margin:0% 0 0% 0%;
    text-decoration:none;
}
.myButton1:hover{
    background-color: #F95613;
	color:black;
}

table.PerformanceTable {
    table-layout: fixed;
    width: 500px;
}
    table.PerformanceTable td.PerformanceCell {
        width: 75px;
    }
table {
    /* cellspacing */
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    /* This covers the th elements */
}
tr {
    /* This covers the tr elements */
}
th, td {
    /* cellpadding */
    padding: 0;
}

/*//////////////////////////////////////////////////////////////////////////////////////*/