// .ct-tooltop {
//     position: relative;
//     display: inline-block;
//     .ct-tooltip-tip {
//             position: absolute;
//             z-index:2000; 
//             transition:.3s ease-in-out;
//             max-width: 250px;                    
//             width: max-content;
//             word-break: break-all;
//             border-radius: 3px;                
//             &.ct-tooltip__dark {
//                 background: #303133;
//                 color: #fff;
//             }
//             &.ct-tooltip__light {
//                 background: #fff;
//                 color: #7b7b7b;
//                 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
//             }
//             .ct-tooltip-wrap {
//                 font-size: 12px; 
//                 padding: 8px 10px;
//                 box-sizing: border-box;
//                 .ct-tooltip-wrap__title {
//                     font-size: 14px;
//                     margin-bottom: 10px;
//                 }
//             }
//             .ct-tooltip-arrow {
//                 position: absolute;
//                 z-index: 1999;
//                 .ct-tooltip-arrow__inner {
//                     display: inline-block;
//                     width: 0;
//                     height: 0;
//                     border-color: transparent;
//                     border-style: solid;
//                     border-width: 5px;              
//                 }
//             }
//             &.is-top,&.is-bottom {
//                 .ct-tooltip-arrow {
//                     width:100%;
//                     text-align: center;
//                 }
//             }
//             &.is-top {
//                 .ct-tooltip-arrow {
//                     .ct-tooltip-arrow__inner {
//                         vertical-align: top;
//                         &.ct-tooltip__dark {border-top-color: #303133;}
//                         &.ct-tooltip__light {border-top-color: #fff;}
//                     }
//                 }
//             }
//             &.is-bottom {
//                 .ct-tooltip-arrow {
//                     position: absolute;
//                     top: -16px;
//                     .ct-tooltip-arrow__inner {
//                         vertical-align: bottom;
//                         &.ct-tooltip__dark {border-bottom-color: #303133;}
//                         &.ct-tooltip__light {border-bottom-color: #fff;}
//                     }
//                 }
//             }
//             &.is-right {
//                 .ct-tooltip-arrow {
//                     position: absolute;
//                     left: -10px;
//                     .ct-tooltip-arrow__inner {
//                         &.ct-tooltip__dark {border-right-color: #303133;}
//                         &.ct-tooltip__light {border-right-color: #fff;}
//                     }
//                 }               
//             }
//             &.is-left {
//                 .ct-tooltip-arrow {
//                     position: absolute;
//                     right: -10px;
//                     .ct-tooltip-arrow__inner {
//                         &.ct-tooltip__dark {border-left-color: #303133;}
//                         &.ct-tooltip__light {border-left-color: #fff;}
//                     }
//                 }                     
//             }
    
//     }
//     &.is-disabled {
//         .ct-tooltip-container {
//             cursor: not-allowed;
//             pointer-events: none;
//             &:hover,&:active,&:focus {
//                 cursor: not-allowed;
//             }
//         }
//     }
// }   
.ct-tooltip {
    display: inline-block;
    position: relative;
    .ct-tooltip-popper {
        width: max-content;
        .ct-tooltip-arrow,.ct-tooltip-arrow::after {
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            border-color: transparent;
            border-style: solid;
        }
        //bottom
        &[x-placement^=bottom] {
            padding-top: 10px;
            .ct-tooltip-arrow {
                top: 2px;
                border-width: 0 8px 8px;
                border-bottom-color: rgba(0, 0, 0, 0.05); 
                left: 50%;
                margin-left:-8px;
                &::after {
                    content: " ";
                    top: 1px;
                    left: 0;
                    margin-left: -8px;
                    border-width: 0 8px 8px;
                    border-bottom-color: #fff;
                }
            }
        }
        //top
        &[x-placement^=top] {
            padding-bottom: 10px;
            .ct-tooltip-arrow {
                bottom: 2px;
                border-width: 8px 8px 0 8px;
                border-top-color: rgba(0, 0, 0, 0.05); 
                left: 50%;
                margin-left:-8px;
                &::after {
                    content: " ";
                    bottom: 1px;
                    left: 0;
                    margin-left: -8px;
                    border-width: 8px 8px 0 8px;
                    border-top-color: #fff;
                }
            }
        }        
        //top&bottom
        &[x-placement=bottom-start],&[x-placement=top-start]{
            .ct-tooltip-arrow {
                left: 13px;
                margin-left: 0;
            }
        }
        &[x-placement=bottom-end],&[x-placement=top-end] {
            .ct-tooltip-arrow {
                left:auto;
                right: 13px;
                margin-left: 0;
            }
        }
        //left
        &[x-placement^=left] {
            padding-right: 10px;
            .ct-tooltip-arrow {
                border-width: 8px 0 8px 8px;
                border-left-color: rgba(0, 0, 0, 0.05); 
                right: 2px;
                top:50%;
                margin-top:-8px;
                &::after {
                    content: " ";
                    right: 1px;
                    // left: 0;
                    margin-top: -8px;
                    border-width: 8px  0 8px 8px;
                    border-left-color: #fff;
                }
            }
        }
        //right
        &[x-placement^=right] {
            padding-left: 10px;
            .ct-tooltip-arrow {
                border-width: 8px  8px 8px 0;
                border-right-color: rgba(0, 0, 0, 0.05); 
                left: 2px;
                top:50%;
                margin-top:-8px;
                &::after {
                    content: " ";
                    left: 1px;
                    margin-top: -8px;
                    border-width: 8px   8px 8px 0;
                    border-right-color: #fff;
                }
            } 
        }
        //left&right
        &[x-placement=left-start],&[x-placement=right-start]{
            .ct-tooltip-arrow {
                top: 10px;
                margin-top: 0;
            }
        }
        &[x-placement=left-end],&[x-placement=left-end] {
            .ct-tooltip-arrow {
                top:auto;
                bottom: 13px;
                margin-top: 0;
            }
        }
        .ct-tooltip-inner {
            border-radius: 3px;
            box-shadow: 0 1px 5px rgba(0,0,0,.2);
            padding: 10px;
            font-size: 12px;
            background: #fff;
        }
    }    
    &.ct-tooltip-dark {
        .ct-tooltip-popper {
            &[x-placement^=bottom] {
                border-bottom-color: rgba(0, 0, 0, 0.05); 
                &::after {
                    border-bottom-color: #494a4c;
                }
            }
            &[x-placement^=top] {
                .ct-tooltip-arrow {
                    border-top-color: rgba(0, 0, 0, 0.05);
                    &::after {
                        border-top-color: #494a4c;
                    }
                }
            }
            &[x-placement^=left] {
                .ct-tooltip-arrow {
                    border-left-color: rgba(0, 0, 0, 0.05); 
                    &::after {
                        border-left-color: #494a4c;
                    }
                }
            }
            &[x-placement^=right] {
                .ct-tooltip-arrow {
                    border-right-color: rgba(0, 0, 0, 0.05); 
                    &::after {
                        border-right-color: #494a4c;
                    }
                } 
            }
            .ct-tooltip-inner {
                background: #494a4c;
                color: #fff;
            }
            .ct-tooltip-content {
                
            }
        }
    }
}