@charset "utf-8";
/* CSS Document */

/*dropdown////////////////////////////////////////*/
/*
*,*:after,*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
*/



/* DEMO 3 */

.wrapper-dropdown-3 {
	/* Size and position */
	position: relative;
	width: 250px;
	padding: 5px 10px;
	/* Styles */
	background: #fff;
	border-radius: 2px;
	border: 1px solid rgba(0,0,0,0.15);
	box-shadow: 0 1px 1px rgba(50,50,50,0.1);
	cursor: pointer;
	outline: none;
	/* Font settings */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #5d3110;
}


/*ลูกศร*/
.wrapper-dropdown-3:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
	/*สี arrow*/

    border-color: #5d3110 transparent;
}

.wrapper-dropdown-3 .dropdown {
	/* Size & position */
	position: absolute;
	/* [disabled]top: 140%; */
	left: 0;
		padding:0px;
	right: 0;
	/* Styles */
	background: white;
	border-radius: inherit;
	border: 1px solid rgba(0,0,0,0.17);
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	font-weight: normal;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	list-style: none;
	/* Hiding */
	opacity: 0;
	pointer-events: none;
}



/*ลูกศรชี้ขึ้นตอนเปิดออก*/
.wrapper-dropdown-3 .dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;    
}


.wrapper-dropdown-3 .dropdown:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;    
}

.wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 5px 10px;
	font-size:12px;
    text-decoration: none;
    color: #515151;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}



/*.wrapper-dropdown-3 .dropdown li i {
    float: right;
    color: inherit;
}*/

.wrapper-dropdown-3 .dropdown li:first-of-type a {
    border-radius: 2px 2px 0 0;
}

.wrapper-dropdown-3 .dropdown li:last-of-type a {
    border: none;
    border-radius: 0 0 2px 2px;
}


/* Hover state */
 
.wrapper-dropdown-3 .dropdown li:hover a {
    background: #d2d2d2;
}



/* Active state */

.wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

/* No CSS3 support */

.no-opacity       .wrapper-dropdown-3 .dropdown,
.no-pointerevents .wrapper-dropdown-3 .dropdown {
    display: none;
    opacity: 1; /* If opacity support but no pointer-events support */
    pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity       .wrapper-dropdown-3.active .dropdown,
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
    display: block;
}