/**********************************
 * All Buttons (input + class btn)
 **********************************/
input[type=submit], input[type=button], input[type=reset], .btn {
    display: inline-block;
    line-height: 3rem;
    font-size: 1.6rem;
    border: solid 1px #7BA4CC;
    font-weight: bold;
    color: #7BA4CC;
    padding: 0 1rem;
    border-radius: 0.2rem;
    background-color: #FFFFFF;
    cursor: pointer;
}
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, .btn:hover,
.btn.btn-icon.active {
    text-decoration: none;
    background-color: #7BA4CC;
    border-color: #7BA4CC;
    color: #FFFFFF;
}

input[type=submit].active, input[type=button].active, input[type=reset].active,
input[type=submit].selected, input[type=button].selected, input[type=reset].selected, .btn.selected {
    color: #40BB5A;
    border-color: #40BB5A;
}

.btn.btn-lg {
    line-height: 9.6rem;
    font-size: 3.2rem;
}
.btn.btn-md {
    line-height: 6.4rem;
    font-size: 2.4rem;
}
.btn.btn-sm {
    line-height: 2.4rem;
    font-size: 1.4rem;
}

/*******************************************
 * Style for class="btn btn-second" buttons
 * Style secondaire de bouton
 *******************************************/
.btn.btn-second {}
.btn.btn-second:hover {}
.btn.btn-second.active, .btn.btn-second.selected {}

/*********************************************************************
 * Style for class="btn btn-icon" buttons (with btn-lg,btn-md,btn-sm)
 * Simple square buttons with icon and no text
 *********************************************************************/
.btn.btn-icon {
    width: 3.2rem;
    height: 3.2rem;
    background-position: center center;
    background-size: 2.4rem 2.4rem;
    background-repeat: no-repeat;
    line-height: 3rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0;
}
.btn.btn-icon:hover, .btn.btn-icon.active {}

.btn.btn-icon.btn-lg {
    width: 9.6rem;
    height: 9.6rem;
    background-size: 7.4rem 7.4rem;
    font-size: 7.4rem;
}
.btn.btn-icon.btn-md {
    width: 6.4rem;
    height: 6.4rem;
    background-size: 4.8rem 4.8rem;
    font-size: 4.8rem;
}
.btn.btn-icon.btn-sm {
    width: 2.4rem;
    height: 2.4rem;
    background-size: 1.4rem 1.4rem;
    font-size: 1.5rem;
}

/*********************************************************************
 * Style for class="btn btn-img" buttons (with btn-lg,btn-md,btn-sm)
 * Simple buttons with icon and text
 *********************************************************************/
.btn.btn-img {
    background-position: 0.2rem center;
    background-size: 2.8rem 2.8rem;
    background-repeat: no-repeat;
    padding-left: 2em;
    text-align: left;
}
.btn.btn-img:hover, .btn.btn-img.active, .btn.btn-img.selected {}
.btn.btn-img.btn-lg {
    padding-left: 1.2em;
    background-size: 7.4rem 7.4rem;
    font-size: 7.4rem;
}
.btn.btn-img.btn-md {
    padding-left: 1.2em;
    background-size: 4.8rem 4.8rem;
    font-size: 4.8rem;
}
.btn.btn-img.btn-sm {
    padding-left: 1.6em;
    background-size: 1.4rem 1.4rem;
    font-size: 1.5rem;
}


/*********************************************************************
 * List of icons to use by class
 *********************************************************************/
.btn-icon.btn-ok,       .btn-img.btn-ok             { background-image: url(/img/icons/40BB5A/ok.svg); }
.btn-icon.btn-add,      .btn-img.btn-add            { background-image: url(/img/icons/7BA4CC/add.svg);}
.btn-icon.btn-shutdown, .btn-img.btn-shutdown       { background-image: url(/img/icons/DD3C3C/on.svg); }
.btn-icon.btn-save,     .btn-img.btn-save           { background-image: url(/img/icons/40BB5A/save.svg); }
.btn-icon.btn-back,     .btn-img.btn-back           { background-image: url(/img/icons/7BA4CC/back.svg); }
.btn-icon.btn-stop,     .btn-img.btn-stop           { background-image: url(/img/icons/7BA4CC/stop.svg); }
.btn-icon.btn-restart,  .btn-img.btn-restart        { background-image: url(/img/icons/7BA4CC/restart.svg); }
.btn-icon.btn-update,   .btn-img.btn-update         { background-image: url(/img/icons/7BA4CC/update.svg); }
.btn-icon.btn-zoomp,    .btn-img.btn-zoomp          { background-image: url(/img/icons/7BA4CC/zoomp.svg); }
.btn-icon.btn-zoomm,    .btn-img.btn-zoomm          { background-image: url(/img/icons/7BA4CC/zoomm.svg); }
.btn-icon.btn-view,     .btn-img.btn-view           { background-image: url(/img/icons/7BA4CC/eye.svg); }
.btn-icon.btn-edit,     .btn-img.btn-edit           { background-image: url(/img/icons/7BA4CC/edit.svg); }
.btn-icon.btn-folder,   .btn-img.btn-folder         { background-image: url(/img/icons/7BA4CC/folder.svg); }
.btn-icon.btn-down,     .btn-img.btn-down           { background-image: url(/img/icons/7BA4CC/down.svg); }
.btn-icon.btn-up,       .btn-img.btn-up             { background-image: url(/img/icons/7BA4CC/up.svg); }
.btn-icon.btn-previous, .btn-img.btn-previous       { background-image: url(/img/icons/7BA4CC/previous.svg); }
.btn-icon.btn-next,     .btn-img.btn-next           { background-image: url(/img/icons/7BA4CC/next.svg); }
.btn-icon.btn-first,    .btn-img.btn-first          { background-image: url(/img/icons/7BA4CC/first.svg); }
.btn-icon.btn-last,     .btn-img.btn-last           { background-image: url(/img/icons/7BA4CC/last.svg); }
.btn-icon.btn-mail,     .btn-img.btn-mail           { background-image: url(/img/icons/7BA4CC/mail.svg); }
.btn-icon.btn-delete,   .btn-img.btn-delete         { background-image: url(/img/icons/DD3C3C/delete.svg); }
.btn-icon.btn-remove,   .btn-img.btn-remove         { background-image: url(/img/icons/DD3C3C/remove.svg); }
.btn-icon.btn-cancel,   .btn-img.btn-cancel         { background-image: url(/img/icons/DD3C3C/cancel.svg); }
.btn-icon.btn-close,    .btn-img.btn-close          { background-image: url(/img/icons/DD3C3C/close.svg); }
.btn-icon.btn-document,   .btn-img.btn-document     { background-image: url(/img/icons/7BA4CC/file.svg); }

.btn-icon.btn-ok:hover,         .btn-img.btn-ok:hover             { background-image: url(/img/icons/FFFFFF/ok.svg); }
.btn-icon.btn-add:hover,        .btn-img.btn-add:hover            { background-image: url(/img/icons/FFFFFF/add.svg);}
.btn-icon.btn-shutdown:hover,   .btn-img.btn-shutdown:hover       { background-image: url(/img/icons/DD3C3C/on.svg); }
.btn-icon.btn-save:hover,       .btn-img.btn-save:hover           { background-image: url(/img/icons/FFFFFF/save.svg); }
.btn-icon.btn-back:hover,       .btn-img.btn-back:hover           { background-image: url(/img/icons/FFFFFF/back.svg); }
.btn-icon.btn-stop:hover,       .btn-img.btn-stop:hover           { background-image: url(/img/icons/FFFFFF/stop.svg); }
.btn-icon.btn-restart:hover,    .btn-img.btn-restart:hover        { background-image: url(/img/icons/FFFFFF/restart.svg); }
.btn-icon.btn-update:hover,     .btn-img.btn-update:hover         { background-image: url(/img/icons/FFFFFF/update.svg); }
.btn-icon.btn-zoomp:hover,      .btn-img.btn-zoomp:hover          { background-image: url(/img/icons/FFFFFF/zoomp.svg); }
.btn-icon.btn-zoomm:hover,      .btn-img.btn-zoomm:hover          { background-image: url(/img/icons/FFFFFF/zoomm.svg); }
.btn-icon.btn-view:hover,       .btn-img.btn-view:hover           { background-image: url(/img/icons/FFFFFF/eye.svg); }
.btn-icon.btn-close:hover,      .btn-img.btn-close:hover          { background-image: url(/img/icons/DD3C3C/close.svg); }
.btn-icon.btn-edit:hover,       .btn-img.btn-edit:hover           { background-image: url(/img/icons/FFFFFF/edit.svg); }
.btn-icon.btn-folder:hover,     .btn-img.btn-folder:hover         { background-image: url(/img/icons/FFFFFF/folder.svg); }
.btn-icon.btn-down:hover,       .btn-img.btn-down:hover           { background-image: url(/img/icons/FFFFFF/down.svg); }
.btn-icon.btn-up:hover,         .btn-img.btn-up:hover             { background-image: url(/img/icons/FFFFFF/up.svg); }
.btn-icon.btn-previous:hover,   .btn-img.btn-previous:hover       { background-image: url(/img/icons/FFFFFF/previous.svg); }
.btn-icon.btn-next:hover,       .btn-img.btn-next:hover           { background-image: url(/img/icons/FFFFFF/next.svg); }
.btn-icon.btn-first:hover,      .btn-img.btn-first:hover          { background-image: url(/img/icons/FFFFFF/first.svg); }
.btn-icon.btn-last:hover,       .btn-img.btn-last:hover           { background-image: url(/img/icons/FFFFFF/last.svg); }
.btn-icon.btn-mail:hover,       .btn-img.btn-mail:hover           { background-image: url(/img/icons/FFFFFF/mail.svg); }
.btn-icon.btn-delete:hover,     .btn-img.btn-delete:hover         { background-image: url(/img/icons/FFFFFF/delete.svg); }
.btn-icon.btn-remove:hover,     .btn-img.btn-remove:hover         { background-image: url(/img/icons/FFFFFF/remove.svg); }
.btn-icon.btn-cancel:hover,     .btn-img.btn-cancel:hover         { background-image: url(/img/icons/FFFFFF/cancel.svg); }
.btn-icon.btn-close:hover,      .btn-img.btn-close:hover          { background-image: url(/img/icons/FFFFFF/close.svg); }
.btn-icon.btn-document:hover,   .btn-img.btn-document:hover       { background-image: url(/img/icons/FFFFFF/file.svg); }

.btn.btn-delete, .btn.btn-remove, .btn.btn-close { border-color: #DD3C3C; color: #DD3C3C; }
.btn.btn-delete:hover, .btn.btn-remove:hover, .btn.btn-close:hover { background-color: #DD3C3C; color: #FFFFFF; }

.btn.btn-cancel { color:#FFFFFF; background-color: #F0AD4E; border: 1px solid #F0AD4E;}
.btn.btn-cancel:hover { color:#F0AD4E; background-color: #FFFFFF; border: 1px solid #F0AD4E;}

.btn.btn-add, .btn.btn-save, .btn.btn-ok { border-color: #4B9D5D; color: #4B9D5D; }
.btn.btn-add:hover, .btn.btn-save:hover, .btn.btn-ok:hover { background-color: #4B9D5D; color: #FFFFFF; }