/* Add margin so tooltip doesn't appear exactly over the mouse*/
.vis-tooltip {
    margin-left: 2em !important;
}

/*Bring timeline item to the front on hover and change color*/
.vis-item:hover {
    z-index: 999;
    border-color: #1E5277;
    background-color: #1E5277;
}

.vis-item.vis-selected {
    border-color: #a2a099 !important;
    background-color: #2bacdf !important;
}

/*Row containing timeline element*/
#timelineRow {
    margin-top: -15px;
}

/*Toggle button*/
#timelineToggleBtnContainer {
    z-index: 2;
    margin-top: -13px !important;
}

#timelineToggleBtn {
    cursor: pointer;
    color: #716e6e;
    font-size: 12px !important;
    transition: 0.2s linear all;
}

    #timelineToggleBtn:hover {
        color: #222020;
    }

/*Container for legend button*/
#timelineLegendContainer {
    bottom: 0;
    left: 0;
    z-index: 1;
    position: absolute;
}

/*Legend button*/
#timelineLegendBtn {
    transition: all linear 0.5s;
    opacity: 0;
    height: auto;
}

.timelineLegendShow {
    opacity: 1 !important;
}

/*Custom Zoom In/Out buttons container*/
#timelineMenu {
    top: 0;
    right: 0;
    z-index: 1;
    position: absolute;
}

/*Current timeline item loaded in view*/
.vis-currently-viewing {
    border-width: 2px;
    border-color: black !important;
}

/*Timeline item, latest*/
.vis-latest-custom,
.vis-item.vis-latest-custom {
    border-color: #00871f;
    background-color: #01ad28;
}

    .vis-item.vis-latest-custom.vis-item.vis-selected {
        border-color: #00871f !important;
        background-color: #01ad28 !important;
    }

/*Timeline item, earliest*/
.vis-earliest-custom,
.vis-item.vis-earliest-custom {
    border-color: #c39bf9;
    background-color: #4682ac;
}

    /*Timeline item, earliest*/
    .vis-item.vis-earliest-custom.vis-item.vis-selected {
        border-color: #762bdc !important;
        background-color: #8831ff !important;
    }

/*Timeline item, in force*/
.vis-item.vis-inForce-custom {
    border-color: #00871f;
    background-color: #01ad28;
}

    /*Timeline item, in force*/
    .vis-item.vis-inForce-custom.vis-item.vis-selected {
        border-color: #00871f !important;
        background-color: #01ad28 !important;
    }

/*Timeline item, not in force*/
.vis-notInForce-custom,
.vis-item.vis-notInForce-custom {
    border-color: #d58c50;
    background-color: #e59654;
}

    /*Timeline item, not in force*/
    .vis-item.vis-notInForce-custom.vis-item.vis-selected {
        border-color: #d58c50 !important;
        background-color: #e59654 !important;
    }

/*Timeline item, partially in force*/
.vis-partInForce-custom,
.vis-item.vis-partInForce-custom {
    color: black;
    border-color: #808080;
    background-color: #f4f457;
}

    /*Timeline item, partially in force*/
    .vis-item.vis-partInForce-custom.vis-item.vis-selected {
        color: black;
        border-color: #e7e732 !important;
        background-color: #f7f733 !important;
    }

/*Timeline item, neutral*/
.vis-neutral-custom,
.vis-item.vis-neutral-custom {
    color: black;
    border-color: #7c7f7c;
    background-color: #ffffff;
}

    .vis-item.vis-neutral-custom.vis-item.vis-selected {
        color: black !important;
        border-color: #7c7f7c !important;
        background-color: #ffffff !important;
    }

/*Timeline item, repealed*/
.vis-repealed-custom,
.vis-item.vis-repealed-custom {
    border-color: #ad1d1d;
    background-color: #d42424;
}

    .vis-item.vis-repealed-custom.vis-item.vis-selected {
        border-color: #ad1d1d !important;
        background-color: #d42424 !important;
    }

/*Timeline item, in force*/
.indicative-date-custom,
.vis-item.vis-indicative-date-custom {
    border-color: #7c7f7c;
    background-color: #f7bdc5;
}

    .vis-item.vis-indicative-date-custom.vis-item.vis-selected {
        border-color: #7c7f7c !important;
        background-color: #ecc8c8 !important;
    }

/*Font size for item tooltips*/
.timeline-item-tooltip {
    font-size: 80%;
}

/*Show legend tooltip*/
.tooltip.show {
    opacity: 1;
}

/*Size and colour for the entire legend tooltip*/
.tooltip.legend .tooltip-inner {
    width: 500px;
    max-width: 500px;
    background-color: #4aa3d9;
}

/*Timeline legend tooltip*/
.my-legend {
    background-color: white;
}

    /*Font size for title*/
    .my-legend .legend-title {
        font-size: 120%;
    }

    /*Font size for description*/
    .my-legend .legend-description {
        font-size: 90%;
    }

    /*Font size for list of force types*/
    .my-legend .legend-scale ul li {
        font-size: 90%;
        list-style: none;
    }

    /*The squares used to show force status colours*/
    .my-legend ul.legend-labels li span {
        float: left;
        height: 16px;
        width: 30px;
        border: 1px solid #999;
    }