/* global */
#cluetip{
    border-radius: 6px;
}

.layout_v4 #cluetip {
    background: var(--tooltip-bg-color);
    color: var(--tooltip-text-color);
    border-radius : 6px;
    padding       : 10px 20px;
    font-size     : 0.7em;
    text-align    : justify;
}

.layout_v4 #cluetip .ui-widget-content{
    color: var(--tooltip-text-color);
}

div.ui-cluetip {
    font-size : 1em;
}

.ui-cluetip-header,
.ui-cluetip-content {
    padding : 6px;
}

.ui-cluetip-header {
    font-size : 1em;
    margin    : 0;
    overflow  : hidden;
}

#cluetip-title #cluetip-close {
    float    : right;
    position : relative;
}

#cluetip-close img {
    border : 0;
}

#cluetip-waitimage {
    width            : 43px;
    height           : 11px;
    position         : absolute;
    background-image : url(../images/jquery.tooltip/wait.gif);
}

.cluetip-arrows {
    display             : none;
    position            : absolute;
    top                 : 0;
    left                : -11px;
    height              : 22px;
    width               : 11px;
    background-repeat   : no-repeat;
    background-position : 0 0;
}

#cluetip-extra {
    display : none;
}

/***************************************
   =cluetipClass: 'default'
-------------------------------------- */

.cluetip-default{
    background-color: #fff;
}

.layout_v4 .cluetip-default {
    background-color : var(--box-bg-color);
}



.cluetip-default .ui-cluetip-header {
    background-color : #87876a;
}


/*
.cluetip-default #cluetip-outer {
  position: relative;
  margin: 0;
  background-color: #d9d9c2;
}
.cluetip-default h3#cluetip-title {
  margin: 0 0 5px;
  padding: 8px 10px 4px;
  font-size: 1.1em;
  font-weight: normal;
  background-color: #87876a;
  color: #fff;
}
.cluetip-default #cluetip-title a {
  color: #d9d9c2;
  font-size: 0.95em;
}
.cluetip-default #cluetip-inner {
  padding: 10px;
}
.cluetip-default div#cluetip-close {
  text-align: right;
  margin: 0 5px 5px;
  color: #900;
}
*/
/* default arrows */

.clue-right-default .cluetip-arrows {
    background-image : url(../images/jquery.tooltip/darrowleft.gif);
}

.clue-left-default .cluetip-arrows {
    background-image : url(../images/jquery.tooltip/darrowright.gif);
    left             : 100%;
    margin-right     : -11px;
}

.clue-top-default .cluetip-arrows {
    background-image : url(../images/jquery.tooltip/darrowdown.gif);
    top              : 100%;
    left             : 50%;
    margin-left      : -11px;
    height           : 11px;
    width            : 22px;
}

.clue-bottom-default .cluetip-arrows {
    background-image : url(../images/jquery.tooltip/darrowup.gif);
    top              : -11px;
    left             : 50%;
    margin-left      : -11px;
    height           : 11px;
    width            : 22px;
}

#cluetip .ui-widget-content {
    border : 0 !important;
}

/***************************************
   =cluetipClass: 'jtip'
-------------------------------------- */
.cluetip-jtip {
    background-color : #fff;
}

.cluetip-jtip #cluetip-outer {
    border   : 2px solid var(--box-border-color);
    position : relative;
}

.cluetip-jtip #cluetip-inner {
    padding : 0 5px 5px;
    display : inline-block;
}

.cluetip-jtip div#cluetip-close {
    text-align : right;
    margin     : 0 5px 0;
    color      : #900;
}

.cluetip-jtip .ui-cluetip-header {
    background-color : #ccc;
    padding          : 6px;
    margin-bottom    : 1em;
}

/* jtip arrows */

.clue-right-jtip .cluetip-arrows {
    background-image : url(../images/jquery.tooltip/arrowleft.gif);
}

.clue-left-jtip .cluetip-arrows {
    background-image : url(../images/jquery.tooltip/arrowright.gif);
    left             : 100%;
    margin-right     : -11px;
}

.clue-top-jtip .cluetip-arrows {
    background-image : url(../images/jquery.tooltip/arrowdown.gif);
    top              : 100%;
    left             : 50%;
    margin-left      : -11px;
    height           : 11px;
    width            : 22px;
}

.clue-bottom-jtip .cluetip-arrows {
    background-image : url(../images/jquery.tooltip/arrowup.gif);
    top              : -11px;
    left             : 50%;
    margin-left      : -11px;
    height           : 11px;
    width            : 22px;
}

/***************************************
   =cluetipClass: 'rounded'
-------------------------------------- */
.cluetip-rounded {
    border-radius         : 1em;
    background-color      : #fff;
    border                : 1px solid #ccc;
}

#cluetip .ui-widget-content {
    background : transparent;
}

.layout_v2 #cluetip .ui-widget-content {
    background    : url('../images/layout_v2/noise-tooltip.png'), linear-gradient(to bottom, #fff4cc 0%, #c9a95d 100%);
    border        : 1px solid #000;
    border-radius : 6px;
    box-shadow    : 5px 5px 5px rgba(0, 0, 0, 0.5);
    font-size     : 15px;
    padding       : 20px 10px;
    line-height   : 1.5em;
    text-align    : justify;
}


.layout_v4 #cluetip {
    padding: 0.5rem;
    box-shadow : var(--dialog-shadow) !important;
    font-size: 0.8rem;
    line-height: 1.2rem;
}