/* normal size button */

.button {
    display: inline-block;
    vertical-align: baseline;
    font-weight: 700;
    margin: 0;
    padding: 5px 10px;
    outline: none;
    border: none;
    border-radius: 3px;

    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none
}

/* small size button for use in .record_list and .timetable_container */

.record_list .button,
.timetable_container .button {
    padding: 2px 5px;
}






.button:not(:last-child) {
    margin-right: 10px;
}

/* Selected button */

.s_state {
    color: rgba(0,93,131,1); /* Pantone 634 */
    border: 1px solid rgb(0,93,131); /* Pantone 634 */
    background-color: rgb(255,255,255); /* White */
    padding: 4px 9px;
    cursor: default;
}


/* Disabled button */

.d_state {
	color: rgb(255,255,255); /* White */
	background-color: rgb(217,217,217); /* 15% Black */
	cursor: default;
}


/* Active button */

.a_state {
    color: rgb(255,255,255); /* White */
    background-color: rgb(0,93,131); /* Pantone 634 */
    cursor: pointer;
    -webkit-transition: background 0.35s;
    -moz-transition: background 0.35s;
    -o-transition: background 0.35s;
    transition: background 0.35s;
}

    .a_state:hover,
    .a_state:active {
        color: rgb(255,255,255); /* White */
        background-color: rgb(0,145,179); /* Pantone 632 */
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
    }

    .a_state:active {
        box-shadow: rgb(0,93,131) 0 3px 6px inset; /* Pantone 634 */
        padding-top: 6px;
        padding-bottom: 4px
    }

.record_list .a_state:active,
.timetable_container .a_state:active {
    box-shadow: rgb(0,93,131) 0 3px 6px inset; /* Pantone 634 */
    padding-top: 3px;
    padding-bottom: 1px
}

.button_group {
    vertical-align: top;
    display: block
}

    .button_group .button {
        vertical-align: top
    }

.inline_button_group {
    vertical-align: middle;
    display: inline-block;
    margin-left: 10px
}

    .inline_button_group .button {
        vertical-align: middle
    }

/* Register buttons */

.consent,
.info,
.medical {
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 5px;
    color: rgb(255,255,255);
    cursor: pointer;
    background-color: rgb(0,93,131); /* Pantone 634 */
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-transition: background 0.35s;
    -moz-transition: background 0.35s;
    -o-transition: background 0.35s;
    transition: background 0.35s;
}
.consent {
    background-image: url('/images/consent.png');
}
.info {
    background-image: url('/images/info.png');
}
.medical {
    background-image: url('/images/medical.png');
}
    .consent:hover,
    .consent:active,
    .info:hover,
    .info:active,
    .medical:hover,
    .medical:active {
        background-color: rgb(0,145,179); /* Pantone 632 */
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
    }


    .consent:active,
    .info:active,
    .medical:active {
        box-shadow: rgba(51,51,51,0.5) 0 3px 6px inset; /* 20% Black */
        background-position-y: 1px
    }




/* Register buttons */


.save,
.cancel,
.delete,
.revert,
.add,
.login,
.logout,
.discard,
.amend,
.reset,
.proceed,
.remove,
.archive,
.recycle {
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 30px
}
    .save:active,
    .cancel:active,
    .delete:active,
    .revert:active,
    .add:active,
    .login:active,
    .logout:active,
    .discard:active,
    .amend:active,
    .reset:active,
    .proceed:active,
    .remove:active,
    .archive:active,
    .recycle:active {
        background-position: right 1px;
    }
.save {
    background-image: url('../images/buttons/save-icon.png');
}
.cancel {
    background-image: url('../images/buttons/cancel-icon.png');
}
.delete {
    background-color: rgb(204,0,0) !important;
    background-image: url('../images/buttons/delete-icon.png');
}
    .delete:hover,
    .delete:active {
        background-color: rgb(229,0,0) !important;
        background-image: url('../images/buttons/delete-icon.png');
    }
    .delete:active {
        box-shadow: rgb(153,0,0) 0 3px 6px inset !important;
    }
.revert {
    background-image: url('../images/buttons/revert-icon.png');
}
.add {
    background-image: url('../images/buttons/add-icon.png');
}
.login {
    background-image: url('../images/buttons/login-icon.png');
}
.logout {
    background-image: url('../images/buttons/logout-icon.png');
}
.discard {
    background-image: url('../images/buttons/cancel-icon.png'); /* SAME AS CANCEL */
}
.amend {
    background-image: url('../images/buttons/amend-icon.png');
}
.reset {
    background-image: url('../images/buttons/reset-icon.png');
}
.proceed {
    background-image: url('../images/buttons/save-icon.png'); /* SAME AS SAVE */
}
.remove {
    background-image: url('../images/buttons/remove-icon.png'); /* NEEDS CREATING */
}
.archive {
    background-image: url('../images/buttons/archive-icon.png');
}
.recycle {
    background-image: url('../images/buttons/recycle-icon.png');
}