/* INPUT[TYPE=CHECKBOX] /
.checkbox_container {
    cursor              : pointer;
    display             : block;
    position            : relative;
    line-height         : 27px;
    padding-left        : 35px;
    padding-right       : 35px;
    text-align          : left;
    user-select         : none;
    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
}

/* Hide the browser's default checkbox /
.checkbox_container input {
    position : absolute;
    opacity  : 0;
    cursor   : pointer;
    height   : 0;
    width    : 0;
}

/* Create a custom checkbox /
.checkbox_checkmark {
    position              : absolute;
    top                   : 0;
    left                  : 0;
    height                : 27px;
    width                 : 27px;
    background-color      : #E8E3DF;
    border                : 1px solid #A56734;
    border-radius         : 10px;
    -webkit-border-radius : 10px;
    -moz-border-radius    : 10px;
}

.checkbox_checkmark.right {
    left  : auto;
    right : 0;
}

/* On mouse-over, add a grey background color /
.checkbox_container:hover input ~ .checkbox_checkmark {
    background-color : #A56734;
}

/* When the checkbox is checked, add a blue background /
.checkbox_container input:checked ~ .checkbox_checkmark {
    background-color : #A56734;
}

/* Create the checkmark/indicator (hidden when not checked) /
.checkbox_checkmark:after {
    content  : "";
    position : absolute;
    display  : none;
}

/* Show the checkmark when checked /
.checkbox_container input:checked ~ .checkbox_checkmark:after {
    display : block;
}

/* Style the checkmark/indicator /
.checkbox_container .checkbox_checkmark:after {
    left              : 9px;
    top               : 5px;
    width             : 5px;
    height            : 10px;
    border            : solid white;
    border-width      : 0 3px 3px 0;
    transform         : rotate(45deg);
    -webkit-transform : rotate(45deg);
    -ms-transform     : rotate(45deg);
}

.checkbox_container .checkbox_checkmark.arrow_left:after {
    top               : 6px;
    width             : 10px;
    transform         : rotate(135deg);
    -webkit-transform : rotate(135deg);
    -ms-transform     : rotate(135deg);
}

.checkbox_container .checkbox_checkmark.arrow_right:after {
    left         : auto;
    right        : 9px;
    top          : 6px;
    width        : 10px;
    border-width : 3px 3px 0 0;
}*/