.chevron{position:relative;display:block;width:28px;height:28px;border-radius:50%;margin:0;padding:0;background:transparent}
.chevron-down{position:relative;box-sizing:border-box;width:32px;height:32px;margin:0;padding:0;border-radius:50%}
.chevron-down:before{left:7px;top:9px;width:10px;height:10px;border-width:4px 4px 0px 0px;border-style:solid;border-color:#00FF00;margin-top:-5px;background:transparent;content: "";position:absolute;-webkit-transform:rotate(-225deg);-ms-transform:rotate(-225deg);transform:rotate(-225deg)}
.chevron-up{position:relative;box-sizing:border-box;width:32px;height:32px;margin:0;padding:0;border-radius:50%}
.chevron-up:before{left:7px;top:14px;width:10px;height:10px;border-width:4px 4px 0px 0px;border-style:solid;margin-top:-5px;background:transparent;content: "";position:absolute;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
.chevron-left{position:relative;box-sizing:border-box;width:32px;height:32px;margin:0;padding:0;border-radius:50% }
.chevron-left:before{left:9px;top:12px;width:10px;height:10px;border-width:4px 4px 0px 0px;border-style:solid;margin-top:-5px;background:transparent;content: "";position:absolute;-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg)}
.chevron-right{position:relative;box-sizing:border-box;width:32px;height:32px;margin:0;padding:0;border:2px solid #888;background:#000;border-radius:50%}
.chevron-right:before{left:5px;top:12px;width:10px;height:10px;border-width:4px 4px 0px 0px;border-style:solid;border-color:#00FF00;margin-top:-5px;background:transparent;content: "";position:absolute;-webkit-transform:rotate(-315deg);-ms-transform:rotate(-315deg);transform:rotate(-315deg)}