/*--------------------------------------------------
說明用Tooltip
於class中設定樣式
加上Gtooltip會有此功能
加上notice則會顯示notice的ico
加上bottom/left/right則會預設顯示位置【尚須調整】

<a href="javascript:return false;" class="Gtooltip notice" yk-message="文字說明">
    <span>說明</span>
</a>    
-------------------------*/


:root {
    --ico-smquetion: url('ico/ico_smquetion.png');
    --ico-notice: url('ico/ico_notice.png');
}

.yk_tooltip {
    font-family: Century Gothic,Microsoft JhengHei;
    font-size: 16px;
    display: inline;
    position: relative;
    color: #E16689;
    text-align: left;
    text-decoration: none;
}

    .yk_tooltip > span {
        font-size: 14px;
        text-decoration: none;
        white-space: nowrap;
    }

    .yk_tooltip:before {
        content: var(--ico-smquetion);
        height: 16px;
        width: 16px;
        vertical-align: middle;
    }

    .yk_tooltip.notice {
        color: #D91616;
    }

        .yk_tooltip.notice:before {
            content: var(--ico-notice);
        }



    /*    .yk_tooltip:hover:after {
        background: #333;
        background: rgba(0,0,0,.8);
        border-radius: 5px;
        bottom: 26px;
        color: #fff;
        content: attr(yk-message);
        left: 20%;
        padding: 4px 8px;
        position: absolute;
        z-index: 2000;
        width: max-content;
        height: max-content;
        max-width: 280px;
        word-break: break-all;
    }*/

    .yk_tooltip:hover:after {
        background: #333;
        background: rgba(0,0,0,.8);
        border-radius: 5px;
        color: #fff;
        content: attr(yk-message);
        padding: 4px 8px;
        position: fixed; /* 改為 fixed 來相對視窗定位 */
        z-index: 2000;
        bottom: 10px; /* 距離視窗底部 10px */
        right: 10px; /* 距離視窗右邊 10px */
        width: max-content;
        height: max-content;
        max-width: 280px;
        word-break: break-all;
        text-align: left !important;
        font-size: 16px !important;
        line-height: 16px !important;
    }

    .yk_tooltip:hover:before {
        /*        border: solid;
        border-color: #333 transparent;
        border-width: 6px 6px 0 6px;
        bottom: 20px;
        content: "";
        left: 50%;
        position: absolute;
        z-index: 99;*/
        content: var(--ico-smquetion);
    }

    .yk_tooltip.notice:hover:before {
        /*        border: solid;
        border-color: #333 transparent;
        border-width: 6px 6px 0 6px;
        bottom: 20px;
        content: "";
        left: 50%;
        position: absolute;
        z-index: 99;*/
        content: var(--ico-notice);
    }


    /*向上(預設向上)*/
    .yk_tooltip.top:hover:after {
        bottom: 115%;
    }

    .yk_tooltip.top:hover:before {
        bottom: 100%;
    }


    /*向左*/
    .yk_tooltip.left:hover:after {
        top: -10%;
        left: attr(msg-width);
        /*left: -240px;*/
    }

    .yk_tooltip.left:hover:before {
        border-color: transparent transparent transparent #333;
        border-width: 6px 0px 6px 10.4px;
        top: 20%;
        left: -25%;
    }


    /*向右*/
    .yk_tooltip.right:hover:after {
        top: -5%;
        left: 130%;
    }

    .yk_tooltip.right:hover:before {
        border-color: transparent #333 transparent transparent;
        border-width: 6px 10.4px 6px 0px;
        top: 20%;
        left: 110%;
    }



    /*向下*/
    .yk_tooltip.bottom:hover:after {
        top: 130% !important;
    }

    .yk_tooltip.bottom:hover:before {
        border-width: 0px 6px 6px 6px !important;
        top: 100% !important;
    }


/*IE用樣式*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */

    .yk_tooltip:hover:after {
        min-height: 24px;
        height: auto;
        /*max-height:64px;*/
        height: -moz-max-content;
        height: -webkit-max-content;
        height: -o-max-content;
        height: -ms-max-content;
        width: -moz-max-content;
        width: -webkit-max-content;
        width: -o-max-content;
        width: -ms-max-content;
        width: 400px !important;
        max-width: 400px !important;
    }
}