/* General */
    .Dropdown{position:relative;margin:20px; border-radius: 5px; border:1px solid #aaa}
    .Dropdown:hover{box-shadow: 0px 0px 0px 3px #eee;}
/* Apperture */
    .Dropdown > label{display:block; font-size: 0.8em; padding:.4rem .8rem;line-height:1.6; position:relative; }
    .Dropdown > label:after{font-weight: 900; border:1px solid #aaa; border-left: none; border-bottom: none; z-index:3; position:absolute; right:20px;top:50%;margin-top: -8px; font-size:0.9em;transform: rotate(135deg); height:10px; width: 10px; top:50%; content: ""; display: inline-block;}
    .Dropdown > input:checked ~ label{background:rgb(238, 238, 238); border-radius:5px 5px 0px 0px}
    .Dropdown > input:checked ~ label:after{ transform: rotate(-45deg);margin-top: -2px; }
    .Dropdown > input{ display:none}
/* List */
    .Dropdown > ul{ position: relative; display: block; height:0; overflow:hidden; margin:0; padding:0}
    .Dropdown > ul li{ font-size: 0.9em;  border-top:1px solid #ddd; display:block; margin:0;}
    .Dropdown > ul li input{  display:none}
/* Close */
    .Dropdown > input ~ ul li input[type="radio"]{display:none}
    .Dropdown > input ~ ul li label[type="radio"]{display:none}
    .Dropdown > input ~ ul input[type="radio"] + label:after{z-index:2;border-radius:4px 4px 0px 0px; background:#fff}
    .Dropdown > input:checked ~ ul input[type="radio"] + label:after{ background:rgb(248, 249, 255); }
/* Open */
    .Dropdown > input:checked ~ ul{overflow:auto; position: static; height:auto}
    .Dropdown > input:checked ~ ul li input[type="radio"]{display:block}
    .Dropdown > input:checked ~ ul li label[type="radio"]{display:block}
/* Divisor */
    .Dropdown > ul li:empty{ height:10px;background:#eee; padding:0;position:relative;}
/* Checkboxs */
    .Dropdown label:last-child{height: 40px;font-weight: normal; display:block; line-height: 40px;; font-size:1em;box-sizing: border-box;  ;padding:0 1rem;}
    .Dropdown input[type="radio"]:checked {-webkit-appearance: none; -moz-appearance: none;background:green; width:20px; height:20px}
    .Dropdown input[type="radio"]:checked + label:after{position:absolute; left:0; top:0; content:attr(data-title)}
    .Dropdown input[type="radio"]:checked + label:after{display:block; padding:.4rem .8rem;line-height:1.6; right:0; pointer-events: none; }
    .Dropdown input[type="radio"] {position:absolute; width: 20px;margin:10px;  } 
    .Dropdown input[type="radio"]:after { border-top: none; border-left: none; position: absolute; content: '';border-radius: 20px; background: #fff; display: block; width: 10px; height: 10px; left: 4px; opacity: 0; top: 4px;  -webkit-transform: scale(2); transform: scale(2);-webkit-transform:scale(0.5) rotate(50deg); transform:scale(0.5)  rotate(50deg); -webkit-transition: opacity .3s, -webkit-transform .6s cubic-bezier(.2, .85, .32, 1.2); transition: opacity .3s, -webkit-transform .6s cubic-bezier(.2, .85, .32, 1.2); transition: transform .6s cubic-bezier(.2, .85, .32, 1.2), opacity .3s; transition: transform .6s cubic-bezier(.2, .85, .32, 1.2), opacity .3s, -webkit-transform .6s cubic-bezier(.2, .85, .32, 1.2);}
    .Dropdown input[type="radio"] {-webkit-appearance: none; -moz-appearance: none; height: 20px; outline: none; display: inline-block; vertical-align: top; cursor: pointer; border: 1px solid #000; background: #fff; border-radius: 24px; -webkit-transition: background .3s, border-color .3s, box-shadow .2s; transition: background .3s, border-color .3s, box-shadow .2s; } 
    /* Disabled */
        .Dropdown input[type="radio"]:disabled { opacity: 0.8; } 
    /* Focus */
        .Dropdown input[type="radio"]:focus { box-shadow: 0 0 0 2px rgba(157, 157, 157, 0.5); } 
        .Dropdown input[type="radio"]:checked { background: #444; } 
        .Dropdown input[type="radio"]:checked:after { opacity: 1;-webkit-transform: scale(1) rotate(45deg); transform: rotate(1) rotate(45deg); } 
        .Dropdown input[type="radio"] + label { font-size: 1em; line-height: 40px; display: block;margin-left: 25px; vertical-align: top; cursor: pointer; } 
/* Input Text */
    .Dropdown label:first-child{height: 40px;font-weight: normal; display:block; width:20%; text-align: right;line-height: 40px;; font-size:0.7em;box-sizing: border-box; background:rgb(252, 252, 252); border-right:1px solid #ddd; ;padding:0 1rem; position:absolute;}
    .Dropdown input[type="text"] {height: 40px;font-weight: normal;;background:none;font-size:1em;box-sizing: border-box;line-height: 40px;font-size:1em; display:block; width:100%;border:none;outline:none; padding:0 1rem}
    .Dropdown label + input[type="text"]{height: 40px; margin-left: 20%;width:80%; background:transparent}
/* Links */
    .Dropdown > ul > li > a{ text-decoration: none; color: #555; padding:0 .8rem;line-height:3;  display:block; position:relative}
    .Dropdown > ul > li > a:hover{ background:#eee; cursor:pointer}
    .Dropdown > ul > li > a:after{font-weight: 900; border:1px solid #aaa; border-left: none; border-bottom: none; z-index:3; position:absolute; right:23px;top:50%;margin-top: -5px; font-size:0.9em;transform: rotate(45deg); height:10px; width: 10px; top:50%; content: ""; display: inline-block;}
