@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500&subset=cyrillic");#hint-container {
    position: absolute
}

#hint-template {
    display: none
}

.hint {
    position: absolute;
    z-index: 10;
    padding: 6px 12px;
    display: flex;
    visibility: hidden;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    opacity: 0;
    font-size: 12px;
    line-height: 18px;
    pointer-events: none;
    background: #ffffff;
    border: 1px solid #d2ddec;
    border-radius: 6px;
    transition: all 0.15s ease-in-out;
    white-space: pre
}

.hint:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    display: inline-block;
    background: #ffffff;
    border: 1px solid #edf2f9;
    transform: rotateZ(45deg)
}

.hint-modal {
    z-index: 16
}

.hint div {
    display: block;
    line-height: 1
}

.hint .icon {
    padding-right: 5px;
    font-size: 18px
}

.hint.top {
    box-shadow: 0 19px 18px -10px rgba(18,38,63,0.03);
    transform: translateY(-20px)
}

.hint.top:after {
    top: calc(100% - 5px);
    left: calc(50% - 5px);
    border-top: 0;
    border-left: 0
}

.hint.bottom {
    box-shadow: 0 19px 18px -10px rgba(18,38,63,0.03);
    transform: translateY(20px)
}

.hint.bottom:after {
    left: calc(50% - 5px);
    bottom: calc(100% - 5px);
    border-right: 0;
    border-bottom: 0
}

.hint.left {
    box-shadow: 0 19px 18px -10px rgba(18,38,63,0.03);
    transform: translateX(-20px)
}

.hint.left:after {
    top: calc(50% - 5px);
    left: calc(100% - 5px);
    border-left: 0;
    border-bottom: 0
}

.hint.right {
    box-shadow: 0 19px 18px -10px rgba(18,38,63,0.03);
    transform: translateX(20px)
}

.hint.right:after {
    top: calc(50% - 5px);
    right: calc(100% - 5px);
    border-top: 0;
    border-right: 0
}

.hint.border:after {
    border: 1px solid #d2ddec
}

.hint.border.top:after {
    border-top: 0;
    border-left: 0
}

.hint.border.bottom:after {
    border-right: 0;
    border-bottom: 0
}

.hint.border.left:after {
    border-left: 0;
    border-bottom: 0
}

.hint.border.right:after {
    border-top: 0;
    border-right: 0
}

.hint.inverse {
    color: #edf2f9;
    background: #12263f
}

.hint.inverse:after {
    background: #0f1f33
}

.hint.inverse b {
    color: #ffffff
}

.hint.danger {
    color: #e63757;
    background: #fff;
    border-color: #e63757
}

.hint.danger:after {
    background: #fff;
    border-color: #e63757
}

.hint.warning {
    color: #f6c343;
    background: #fff;
    border-color: #f6c343
}

.hint.warning:after {
    background: #fff;
    border-color: #f6c343
}

.hint.success {
    color: #00d97e;
    background: #a6ffda;
    border-color: #00d97e
}

.hint.success:after {
    background: #a6ffda;
    border-color: #00d97e
}

.hint.info {
    color: #39afd1;
    background: #fff;
    border-color: #39afd1
}

.hint.info:after {
    background: #fff;
    border-color: #39afd1
}

.hint.no-border {
    border: 0 !important
}

.hint.no-border:after {
    border: 0 !important
}

.hint.show {
    visibility: visible;
    opacity: 1;
    transform: translateX(0) translateY(0)
}

.hint table tbody td {
    padding-top: 5px !important;
    padding-bottom: 5px !important
}