﻿.btn {
    margin: .125rem;
}

    .btn.disabled, .btn:disabled, .btn-asp:disabled, .btn-round:disabled, a:disabled, .btn.aspNetDisabled, .btn-asp.aspNetDisabled, .btn-round.aspNetDisabled, a.aspNetDisabled {
        opacity: 0.65;
        cursor: not-allowed !important;
    }

/*------------------------------------
  btn-round
------------------------------------*/
.btn-round:link, .btn-round:visited, .btn-round:active, .btn-round:focus {
    color: #fff; /* Werkt voor primary, secondary, success, info, danger, dark */
}

.btn-warning.btn-round:link, .btn-warning.btn-round:visited, .btn-warning.btn-round:active, .btn-warning.btn-round:focus {
    color: #212529;
}

.btn-light.btn-round:link, .btn-light.btn-round:visited, .btn-light.btn-round:active, .btn-light.btn-round:focus {
    color: #212529;
}

.btn-round {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    perspective: 1px; /* Voor Chrome Bug */
    padding: .375em .5em;
}

    .btn-round:after {
        font-family: "Font Awesome 6 Free";
    }

    .btn-round.btn-sm {
        width: 24px;
        height: 24px;
        font-size: .5em;
        padding: .5em .35em;
    }

    .btn-round.btn-lg {
        width: 48px;
        height: 48px;
        font-size: 1.25em;
        padding: .35em .35em;
    }

    .btn-round.icon-archive:after {
        font-style: normal;
        font-weight: 900;
        content: "\f187";
    }

    .btn-round.icon-bell-splash:after {
        font-style: normal;
        font-weight: 900;
        content: "\f1f6";
    }

    .btn-round.icon-calendar-alt:after {
        font-style: normal;
        font-weight: 900;
        content: "\f073";
    }

    .btn-round.icon-check-circle:after {
        font-style: normal;
        font-weight: 400;
        content: "\f058";
    }

    .btn-round.icon-chevron-down:after {
        font-style: normal;
        font-weight: 900;
        content: "\f078";
    }

    .btn-round.icon-chevron-up:after {
        font-style: normal;
        font-weight: 900;
        content: "\f077";
    }

    .btn-round.icon-cog:after {
        font-style: normal;
        font-weight: 900;
        content: "\f013";
    }

    .btn-round.icon-download:after {
        font-style: normal;
        font-weight: 900;
        content: "\f019";
    }

    .btn-round.icon-euro-sign:after {
        font-style: normal;
        font-weight: 900;
        content: "\f153";
    }

    .btn-round.icon-exclamation-circle:after {
        font-style: normal;
        font-weight: 900;
        content: "\f06a";
    }

    .btn-round.icon-expand-arrows-alt:after {
        font-style: normal;
        font-weight: 900;
        content: "\f31e";
    }

    .btn-round.icon-external-link-alt:after {
        font-style: normal;
        font-weight: 900;
        content: "\f35d";
    }

    .btn-round.icon-eye:after {
        font-style: normal;
        font-weight: 900;
        content: "\f06e";
    }

    .btn-round.icon-file-excel:after {
        font-style: normal;
        font-weight: 900;
        content: "\f1c3";
    }

    .btn-round.icon-file-invoice:after {
        font-style: normal;
        font-weight: 900;
        content: "\f570";
    }

    .btn-round.icon-graduation-cap:after {
        font-style: normal;
        font-weight: 900;
        content: "\f19d";
    }

    .btn-round.icon-link:after {
        font-style: normal;
        font-weight: 900;
        content: "\f0c1";
    }

    .btn-round.icon-share-from-square:after {
        font-style: normal;
        font-weight: 900;
        content: "\f14d";
    }

    .btn-round.icon-th-list:after {
        font-style: normal;
        font-weight: 900;
        content: "\f00b";
    }

    .btn-round.icon-lock:after {
        font-style: normal;
        font-weight: 900;
        content: "\f023";
    }

    .btn-round.icon-minus-circle:after {
        font-style: normal;
        font-weight: 900;
        content: "\f056";
    }

    .btn-round.icon-minus:after {
        font-style: normal;
        font-weight: 900;
        content: "\f068";
    }

    .btn-round.icon-paper-plane:after {
        font-style: normal;
        font-weight: 900;
        content: "\f1d8";
    }

    .btn-round.icon-pen:after {
        font-style: normal;
        font-weight: 900;
        content: "\f304";
    }

    .btn-round.icon-plus:after {
        font-style: normal;
        font-weight: 900;
        content: "\f067";
    }

    .btn-round.icon-print:after {
        font-style: normal;
        font-weight: 900;
        content: "\f02f";
    }

    .btn-round.icon-recycle:after {
        font-style: normal;
        font-weight: 900;
        content: "\f1b8";
    }

    .btn-round.icon-redo:after {
        font-style: normal;
        font-weight: 900;
        content: "\f01e";
    }

    .btn-round.icon-undo:after {
        font-style: normal;
        font-weight: 900;
        content: "\f0e2";
    }

    .btn-round.icon-search:after {
        font-style: normal;
        font-weight: 900;
        content: "\f002";
    }

    .btn-round.icon-shield-alt:after {
        font-style: normal;
        font-weight: 900;
        content: "\f3ed";
    }

    .btn-round.icon-sms:after {
        font-style: normal;
        font-weight: 900;
        content: "\f7cd";
    }

    .btn-round.icon-times-circle:after {
        font-style: normal;
        font-weight: 400;
        content: "\f057";
    }

    .btn-round.icon-trash-alt:after {
        font-style: normal;
        font-weight: 900;
        content: "\f2ed";
    }

    .btn-round.icon-user:after {
        font-style: normal;
        font-weight: 900;
        content: "\f007";
    }

    .btn-round.icon-user-shield:after {
        font-style: normal;
        font-weight: 900;
        content: "\f505";
    }


/*------------------------------------
  btn-asp
------------------------------------*/

.btn-asp:link, .btn-asp:visited, .btn-asp:active, .btn-asp:focus {
    color: #fff; /* Werkt voor primary, secondary, success, info, danger, dark */
}

.btn-warning.btn-asp:link, .btn-warning.btn-asp:visited, .btn-warning.btn-asp:active, .btn-warning.btn-asp:focus {
    color: #212529;
}

.btn-light.btn-asp:link, .btn-light.btn-asp:visited, .btn-light.btn-asp:active, .btn-light.btn-asp:focus {
    color: #212529;
}

.btn-asp:before {
    font-family: "Font Awesome 6 Free";
    padding-right: 10px;
    line-height: 1rem;
}

.btn-asp.icon-archive:before {
    font-style: normal;
    font-weight: 900;
    content: "\f187";
}

.btn-asp.icon-book-open:before {
    font-style: normal;
    font-weight: 900;
    content: "\f518";
}

.btn-asp.icon-cog:before {
    font-style: normal;
    font-weight: 900;
    content: "\f013";
}

.btn-asp.icon-download:before {
    font-style: normal;
    font-weight: 900;
    content: "\f019";
}

.btn-asp.icon-eraser:before {
    font-style: normal;
    font-weight: 900;
    content: "\f12d";
}

.btn-asp.icon-external-link-alt:before {
    font-style: normal;
    font-weight: 900;
    content: "\f35d";
}

.btn-asp.icon-eye:before {
    font-style: normal;
    font-weight: 900;
    content: "\f06e";
}

.btn-asp.icon-eye-slash:before {
    font-style: normal;
    font-weight: 900;
    content: "\f070";
}

.btn-asp.icon-file-excel:before {
    font-style: normal;
    font-weight: 900;
    content: "\f1c3";
}

.btn-asp.icon-filter:before {
    font-style: normal;
    font-weight: 900;
    content: "\f0b0";
}

.btn-asp.icon-link:before {
    font-style: normal;
    font-weight: 900;
    content: "\f0c1";
}

.btn-asp.icon-paper-plane:before {
    font-style: normal;
    font-weight: 900;
    content: "\f1d8";
}

.btn-asp.icon-pen:before {
    font-style: normal;
    font-weight: 900;
    content: "\f304";
}

.btn-asp.icon-plus:before {
    font-style: normal;
    font-weight: 900;
    content: "\f067";
}

.btn-asp.icon-print:before {
    font-style: normal;
    font-weight: 900;
    content: "\f02f";
}

.btn-asp.icon-share-from-square:before {
    font-style: normal;
    font-weight: 900;
    content: "\f14d";
}

.btn-asp.icon-sync-alt:before {
    font-style: normal;
    font-weight: 900;
    content: "\f2f1";
}

.btn-asp.icon-th-list:before {
    font-style: normal;
    font-weight: 900;
    content: "\f00b";
}

.btn-asp.icon-th:before {
    font-style: normal;
    font-weight: 900;
    content: "\f00a";
}

.btn-asp.icon-trash-alt:before {
    font-style: normal;
    font-weight: 900;
    content: "\f2ed";
}

.btn-asp.icon-upload:before {
    font-style: normal;
    font-weight: 900;
    content: "\f093";
}

.btn-asp.icon-user:before {
    font-style: normal;
    font-weight: 900;
    content: "\f007";
}

.btn-asp.icon-user-circle:before {
    font-style: normal;
    font-weight: 900;
    content: "\f2bd";
}

.btn-asp.icon-user-check:before {
    font-style: normal;
    font-weight: 900;
    content: "\f4fc";
}

.btn-asp.icon-user-edit:before {
    font-style: normal;
    font-weight: 900;
    content: "\f4ff";
}

.btn-asp.icon-user-plus:before {
    font-style: normal;
    font-weight: 900;
    content: "\f234";
}

.btn-asp.icon-user-tag:before {
    font-style: normal;
    font-weight: 900;
    content: "\f507";
}

.btn-asp.icon-user-times:before {
    font-style: normal;
    font-weight: 900;
    content: "\f235";
}

.btn-asp.icon-user-secret:before {
    font-style: normal;
    font-weight: 900;
    content: "\f21b";
}

.btn-asp.icon-users-cog:before {
    font-style: normal;
    font-weight: 900;
    content: "\f509";
}


/*------------------------------------
  Social Logins
------------------------------------*/

.btn-social {
    position: relative;
    padding-left: 35px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

    .btn-social > :first-child {
        position: absolute;
        left: 0;
        top: 7px;
        width: 30px;
        font-size: 1.25em;
        text-align: center;
        border-right: 1px solid rgba(0,0,0,0.2)
    }

.btn-facebook {
    color: #fff;
    background-color: #3b5998;
    border-color: rgba(0,0,0,0.2)
}

    .btn-facebook:focus, .btn-facebook.focus {
        color: #fff;
        background-color: #2d4373;
        border-color: rgba(0,0,0,0.2)
    }

    .btn-facebook:hover {
        color: #fff;
        background-color: #2d4373;
        border-color: rgba(0,0,0,0.2)
    }

    .btn-facebook:active, .btn-facebook.active, .open > .dropdown-toggle.btn-facebook {
        color: #fff;
        background-color: #2d4373;
        border-color: rgba(0,0,0,0.2)
    }

        .btn-facebook:active:hover, .btn-facebook.active:hover, .open > .dropdown-toggle.btn-facebook:hover, .btn-facebook:active:focus, .btn-facebook.active:focus, .open > .dropdown-toggle.btn-facebook:focus, .btn-facebook:active.focus, .btn-facebook.active.focus, .open > .dropdown-toggle.btn-facebook.focus {
            color: #fff;
            background-color: #23345a;
            border-color: rgba(0,0,0,0.2)
        }

    .btn-facebook:active, .btn-facebook.active, .open > .dropdown-toggle.btn-facebook {
        background-image: none
    }

    .btn-facebook.disabled:hover, .btn-facebook[disabled]:hover, fieldset[disabled] .btn-facebook:hover, .btn-facebook.disabled:focus, .btn-facebook[disabled]:focus, fieldset[disabled] .btn-facebook:focus, .btn-facebook.disabled.focus, .btn-facebook[disabled].focus, fieldset[disabled] .btn-facebook.focus {
        background-color: #3b5998;
        border-color: rgba(0,0,0,0.2)
    }

    .btn-facebook .badge {
        color: #3b5998;
        background-color: #fff
    }

.btn-google {
    color: #fff;
    background-color: #dd4b39;
    border-color: rgba(0,0,0,0.2)
}

    .btn-google:focus, .btn-google.focus {
        color: #fff;
        background-color: #c23321;
        border-color: rgba(0,0,0,0.2)
    }

    .btn-google:hover {
        color: #fff;
        background-color: #c23321;
        border-color: rgba(0,0,0,0.2)
    }

    .btn-google:active, .btn-google.active, .open > .dropdown-toggle.btn-google {
        color: #fff;
        background-color: #c23321;
        border-color: rgba(0,0,0,0.2)
    }

        .btn-google:active:hover, .btn-google.active:hover, .open > .dropdown-toggle.btn-google:hover, .btn-google:active:focus, .btn-google.active:focus, .open > .dropdown-toggle.btn-google:focus, .btn-google:active.focus, .btn-google.active.focus, .open > .dropdown-toggle.btn-google.focus {
            color: #fff;
            background-color: #a32b1c;
            border-color: rgba(0,0,0,0.2)
        }

    .btn-google:active, .btn-google.active, .open > .dropdown-toggle.btn-google {
        background-image: none
    }

    .btn-google.disabled:hover, .btn-google[disabled]:hover, fieldset[disabled] .btn-google:hover, .btn-google.disabled:focus, .btn-google[disabled]:focus, fieldset[disabled] .btn-google:focus, .btn-google.disabled.focus, .btn-google[disabled].focus, fieldset[disabled] .btn-google.focus {
        background-color: #dd4b39;
        border-color: rgba(0,0,0,0.2)
    }

    .btn-google .badge {
        color: #dd4b39;
        background-color: #fff
    }

.btn-microsoft {
    color: #fff;
    background-color: #2672ec;
    border-color: rgba(0,0,0,0.2)
}

    .btn-microsoft:focus, .btn-microsoft.focus {
        color: #fff;
        background-color: #125acd;
        border-color: rgba(0,0,0,0.2)
    }

    .btn-microsoft:hover {
        color: #fff;
        background-color: #125acd;
        border-color: rgba(0,0,0,0.2)
    }

    .btn-microsoft:active, .btn-microsoft.active, .open > .dropdown-toggle.btn-microsoft {
        color: #fff;
        background-color: #125acd;
        border-color: rgba(0,0,0,0.2)
    }

        .btn-microsoft:active:hover, .btn-microsoft.active:hover, .open > .dropdown-toggle.btn-microsoft:hover, .btn-microsoft:active:focus, .btn-microsoft.active:focus, .open > .dropdown-toggle.btn-microsoft:focus, .btn-microsoft:active.focus, .btn-microsoft.active.focus, .open > .dropdown-toggle.btn-microsoft.focus {
            color: #fff;
            background-color: #0f4bac;
            border-color: rgba(0,0,0,0.2)
        }

    .btn-microsoft:active, .btn-microsoft.active, .open > .dropdown-toggle.btn-microsoft {
        background-image: none
    }

    .btn-microsoft.disabled:hover, .btn-microsoft[disabled]:hover, fieldset[disabled] .btn-microsoft:hover, .btn-microsoft.disabled:focus, .btn-microsoft[disabled]:focus, fieldset[disabled] .btn-microsoft:focus, .btn-microsoft.disabled.focus, .btn-microsoft[disabled].focus, fieldset[disabled] .btn-microsoft.focus {
        background-color: #2672ec;
        border-color: rgba(0,0,0,0.2)
    }

    .btn-microsoft .badge {
        color: #2672ec;
        background-color: #fff
    }

.btn-twitter {
    color: #fff;
    background-color: #55acee;
    border-color: rgba(0,0,0,0.2)
}

    .btn-twitter:focus, .btn-twitter.focus {
        color: #fff;
        background-color: #2795e9;
        border-color: rgba(0,0,0,0.2)
    }

    .btn-twitter:hover {
        color: #fff;
        background-color: #2795e9;
        border-color: rgba(0,0,0,0.2)
    }

    .btn-twitter:active, .btn-twitter.active, .open > .dropdown-toggle.btn-twitter {
        color: #fff;
        background-color: #2795e9;
        border-color: rgba(0,0,0,0.2)
    }

        .btn-twitter:active:hover, .btn-twitter.active:hover, .open > .dropdown-toggle.btn-twitter:hover, .btn-twitter:active:focus, .btn-twitter.active:focus, .open > .dropdown-toggle.btn-twitter:focus, .btn-twitter:active.focus, .btn-twitter.active.focus, .open > .dropdown-toggle.btn-twitter.focus {
            color: #fff;
            background-color: #1583d7;
            border-color: rgba(0,0,0,0.2)
        }

    .btn-twitter:active, .btn-twitter.active, .open > .dropdown-toggle.btn-twitter {
        background-image: none
    }

    .btn-twitter.disabled:hover, .btn-twitter[disabled]:hover, fieldset[disabled] .btn-twitter:hover, .btn-twitter.disabled:focus, .btn-twitter[disabled]:focus, fieldset[disabled] .btn-twitter:focus, .btn-twitter.disabled.focus, .btn-twitter[disabled].focus, fieldset[disabled] .btn-twitter.focus {
        background-color: #55acee;
        border-color: rgba(0,0,0,0.2)
    }

    .btn-twitter .badge {
        color: #55acee;
        background-color: #fff
    }

/*------------------------------------
  Air Button Style
------------------------------------*/
a.btn-primary-air, .btn-primary-air, a.btn-secondary-air, .btn-secondary-air, a.btn-success-air, .btn-success-air, a.btn-warning-air, .btn-warning-air, a.btn-danger-air, .btn-danger-air {
    font-weight: bold;
}

    /* PRIMARY AIR */

    .btn-primary-air.btn-asp:link, .btn-primary-air.btn-asp:visited, .btn-primary-air.btn-asp:active, .btn-primary-air.btn-asp:focus {
        color: #377dff;
    }

.btn-primary-air {
    color: #377dff;
    background: rgba(55, 125, 255, 0.1);
    border-color: transparent;
}

    .btn-primary-air.btn-asp:hover, .btn-primary-air:hover {
        color: #fff;
        background: #377dff;
        box-shadow: 0 4px 17px rgba(55, 125, 255, 0.35);
    }

/* SECUNDARY AIR */

.btn-secondary-air.btn-asp:link, .btn-secondary-air.btn-asp:visited, .btn-secondary-air.btn-asp:active, .btn-secondary-air.btn-asp:focus {
    color: #77838f;
}

.btn-secondary-air {
    color: #77838f;
    background: rgba(119, 131, 143, 0.1);
    border-color: transparent;
}

    .btn-secondary-air.btn-asp:hover, .btn-secondary-air:hover {
        color: #fff;
        background: #77838f;
        box-shadow: 0 4px 11px rgba(119, 131, 143, 0.35);
    }

/* SUCCESS AIR */

.btn-success-air.btn-asp:link, .btn-success-air.btn-asp:visited, .btn-success-air.btn-asp:active, .btn-success-air.btn-asp:focus {
    color: #00c9a7;
}

.btn-success-air {
    color: #00c9a7;
    background: rgba(0, 201, 167, 0.1);
    border-color: transparent;
}

    .btn-success-air.btn-asp:hover, .btn-success-air:hover {
        color: #fff;
        background: #00c9a7;
        box-shadow: 0 4px 11px rgba(0, 201, 167, 0.35);
    }

/* WARNING AIR */

.btn-warning-air.btn-asp:link, .btn-warning-air.btn-asp:visited, .btn-warning-air.btn-asp:active, .btn-warning-air.btn-asp:focus {
    color: #fd7e14;
}

.btn-warning-air {
    color: #fd7e14;
    background: rgba(250, 174, 110, 0.1);
    border-color: transparent;
}

    .btn-warning-air.btn-asp:hover, .btn-warning-air:hover {
        color: #fff;
        background: #fd7e14;
        box-shadow: 0 4px 11px rgba(250, 174, 110, 0.35);
    }

/* DANGER AIR */

.btn-danger-air.btn-asp:link, .btn-danger-air.btn-asp:visited, .btn-danger-air.btn-asp:active, .btn-danger-air.btn-asp:focus {
    color: #ed4c78;
}

.btn-danger-air {
    color: #ed4c78;
    background: rgba(245, 122, 156, 0.1);
    border-color: transparent;
}

    .btn-danger-air.btn-asp:hover, .btn-danger-air:hover {
        color: #fff;
        background: #ed4c78;
        box-shadow: 0 4px 11px rgba(245, 122, 156, 0.35);
    }

/*------------------------------------
  Badges
------------------------------------*/

.badge-success-air {
    color: #fff;
    background: #00c9a7;
}

.badge-warning-air {
    color: #fff;
    background: #f5ca99;
}

.badge-danger-air {
    color: #fff;
    background: #de4437;
}

/*------------------------------------
  Backgrounds
------------------------------------*/

.bg-success-air {
    color: #00c9a7;
    background: rgba(0, 201, 167, 0.1);
    border-color: transparent;
}

.bg-danger-air {
    color: #de4437;
    background: rgba(222, 68, 55, 0.1);
    border-color: transparent;
}

.bg-warning-air {
    color: #f5ca99;
    background: rgba(245, 202, 153, 0.1);
    border-color: transparent;
}
