@charset "utf-8";

.mad-select .material-icons { vertical-align: middle; }

.mad-select { position: relative; display: inline-block; vertical-align: middle; border-bottom: 1px solid rgb(189, 189, 189); width: 100%; height: 3.1rem; line-height: 1.5; margin-top: 0.4rem; margin-bottom: 1rem; padding: 0.5rem 0px 0.6rem; }

.mad-select ul { list-style: none; display: inline-block; width: calc(100% - 24px); padding: 0px; }

.mad-select li { vertical-align: middle; white-space: nowrap; height: 24px; line-height: 24px; display: none; padding: 8px 0px; margin: 0px; box-sizing: initial; }

.mad-select > ul:first-of-type { }

.mad-select > ul:first-of-type li.selected { display: inline-block; height: 24px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }

.mad-select i.material-icons { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); font-size: 20px; opacity: 0.6; color: rgb(102, 102, 102); pointer-events: none; }

.mad-select ul.mad-select-drop { position: absolute; z-index: 9999; visibility: hidden; opacity: 0; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 4px; top: 0px; left: 0px; transition: 0.24s; max-height: 0px; overflow: hidden auto; }

.mad-select ul.mad-select-drop.show { visibility: visible; opacity: 1; max-height: 200px; }

.mad-select ul.mad-select-drop li { display: block; transition: background 0.24s; cursor: pointer; }

.mad-select ul.mad-select-drop li.selected { background: rgba(0, 0, 0, 0.07); }

.mad-select ul.mad-select-drop li:hover { background: rgba(0, 0, 0, 0.04); }