/*
    HTML CODE FOR THE SPLIT BUTTON
    <div class="splitbuttondropdown">
        <a class="splitbutton button tiny">
            <i class="fa fa-chevron-down"></i>
        </a>
        <div class="splitbuttondropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
*/


/* The container <div> - needed to position the dropdown content */
.splitbuttondropdown {
    /*position: absolute;*/
    display: inline-block;
    padding-right:1px;
}

.splitbuttondropdown-separator {
    border-top: solid 1px lightgrey;
    padding-top:2px;
    padding-bottom:2px;
}

/* Dropdown Content (Hidden by Default) */
.splitbuttondropdown-content {
    display: none;
    position: absolute;
    border:#ddd 1px  solid;
    background-color:#f9f9f9;
    min-width: 160px;
    z-index: 1;
    border-radius:10px !important;
    margin-top: -13px !important;
    padding-top:10px;
    padding-bottom:10px;
    right:16px !important;
    text-align:left;
    font-size:8pt !important;
}

/* Links inside the dropdown */
.splitbuttondropdown-content a {
    color: black;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left:5px;
    padding-right:5px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.splitbuttondropdown-content a:hover {
    background-color: #ddd;

}

/* Show the dropdown menu on hover */
.splitbuttondropdown:hover .splitbuttondropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.splitbutton:hover, .splitbuttondropdown:hover .btn  {
    background-color: #0b7dda;
}

.splitbutton {
    margin-bottom: 0px;
}