﻿/* See: https://pterkildsen.com/2014/07/13/styling-a-group-of-checkboxes-as-a-dropdown-via-css-and-javascript/ and http://jsfiddle.net/mTSLa/222/ for the checkbox list dropdown technique used. */
.cb-dd {
    width: 500px;
    border: 1px solid silver;
    cursor: pointer; /* use correct mouse pointer when hovering over the dropdown */
    padding: 8px;
    position: relative;
    z-index:999; 
    /*margin: 0 auto; SEM */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Display CSS arrow to the right of the dropdown text */
.cb-dd:after {
    content:'';
    height: 0;
    position: absolute;
    width: 0;
    border: 6px solid transparent;
    border-top-color: #000;
    top: 50%;
    right: 10px;
    margin-top: -3px;
}
/* Reverse the CSS arrow when the dropdown is active */
.cb-dd.is-active:after {
    border-bottom-color: #000;
    border-top-color: #fff;
    margin-top: -9px;
}
.cb-dd-list {
    list-style: none;
    margin: 0;
    padding:10px 0px 10px 0px;
    position: absolute;
    top: 100%; /* align the dropdown right below the dropdown text */
    border: inherit;
    border-top: none;
    left: -1px; /* align the dropdown to the left */
    right: -1px; /* align the dropdown to the right */
    opacity: 0; /* hide the dropdown */
    /*background-color:#ffffff;*/
    background-color:#efefef;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none; /* avoid mouse click events inside the dropdown */
}
.is-active .cb-dd-list {
    opacity: 1; /* display the dropdown */
    pointer-events: auto; /* make sure that the user still can select checkboxes */
}
.cb-dd-list li label{
    font-size:14px;
    padding: 10px;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
.cb-dd-list li label{
    display: block; 
    margin-left:23px;
}
.cb-dd-list li input{
    float:left;
    margin-left:-23px;
    margin-right:10px;
    margin-top:3px;
}
.cb-dd-list li:hover{background-color:#D7E1F0;}
.cb-dd-selection{font-size:16px;color:#007DCD;}
.itm-title{font-weight:bold;color:#007DCD;}
.itm-text{color:#333333;}