/* 
    Created on : Jun 26, 2022, 6:10:34 AM
    Author     : HOME
*/


/* Tooltip1 css*/   
    .tooltip {
        position: relative;
        display: inline-block;
    }

    .tooltip .tooltiptext_frost {
        visibility: hidden;
        width: 200px;
        background-color: #bdd4ff;
        color: black;
        font-size: 13px;
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        top : 100%; /* this places the tooltip below the icon */
        right: 50%;
        margin-left: -100px;  /*half the size of tooltip width */
    }
      
    .tooltip .tooltiptext_kpa {
        visibility: hidden;
        width: 500px;
        background-color: #bdd4ff;
        color: black;
        font-size: 13px;
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        top : 100%; /* this places the tooltip below the icon */
        right: 50%;
        margin-left: -250px;  /*half the size of tooltip width */
    }

    .tooltip .tooltiptext_temp {
        visibility: hidden;
        width: 200px;
        background-color: #bdd4ff;
        color: black;
        font-size: 13px;
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        top : 100%; /* this places the tooltip below the icon */
        right: 50%;
        margin-left: -100px;  /*half the size of tooltip width */
      }

    .tooltip .tooltiptext_moist {
        visibility: hidden;
        width: 400px;
        background-color: #bdd4ff;
        color: black;
        font-size: 13px;
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        top : 100%; /* this places the tooltip below the icon */
        right: 50%;
        margin-left: -200px;  /*half the size of tooltip width */
      }
      
    .tooltip .tooltiptext_hi { /* heatindex tooptip */
        visibility: hidden;
        width: 200px;
        background-color: #bdd4ff;
        color: black;
        font-size: 13px;
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        top : 100%; /* this places the tooltip below the icon */
        right: 50%;
        margin-left: -100px;  /*half the size of tooltip width */
    }

    .tooltip .tooltiptext_wc {   /* windchilll tooptip */
        visibility: hidden;
        width: 200px;
        background-color: #bdd4ff;
        color: black;
        font-size: 13px;
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        top : 100%; /* this places the tooltip below the icon */
        right: 50%;
        margin-left: -100px;  /*half the size of tooltip width */
    }

    .tooltip .tooltiptext_chart {
        visibility: hidden;
        width: 200px;
        background-color: #bdd4ff;
        color: black;
        font-size: 13px;
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        top : 100%; /* this places the tooltip below the icon */
        right: 50%;
        margin-left: -100px;  /*half the size of tooltip width */
    }
    
    .tooltip .tooltiptext_snow { /* current snow tooptip */
        visibility: hidden;
        width: 250px;
        background-color: #bdd4ff;
        color: black;
        font-size: 13px;
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        top : 100%; /* this places the tooltip below the icon */
        right: 50%;
        margin-left: -125px;  /*half the size of tooltip width */
    }

    .tooltip:hover .tooltiptext_hi,
    .tooltip:hover .tooltiptext_wc,    
    .tooltip:hover .tooltiptext_kpa,
    .tooltip:hover .tooltiptext_temp,
    .tooltip:hover .tooltiptext_moist,
    .tooltip:hover .tooltiptext_chart,
    .tooltip:hover .tooltiptext_snow  {
        visibility: visible;
    }