/*   PAGE STYLES   */
.container-custom {
    max-width: 1320px !important;
    margin: 60px auto !important;
}

.content-column {
    margin: 10px 0 !important;
}



/*   FONTS   */

@import url('https://fonts.cdnfonts.com/css/kiro');

*:not(.fa-sign-in):not(.bi) {
  font-family: 'Kiro', Arial, sans-serif !important;
}

*:not(button) {
  color: #485156 !important;
}

h2 {
    font-size: 26px !important;
}

.instance-card h5 {
    font-size: 20px !important;
}

.bi-check-circle-fill {
    color: white !important;
}

.footer a {
    color: white !important;
}

.dropdown-item {
    color: white !important;
}



/*   NAVBAR   */
.navbar {
    background-color: #485156 !important;
}

.navbar .nav-item > a, .navbar .nav-link > .username {
    color: white !important;
}

.navbar .nav-item > a:hover, .navbar > a:focus {
    background: none !important;
}

.navbar-toggler {
    background-color: transparent !important;
    border: none !important;
}

.navbar-toggler:focus {
    border: none !important;
}

.navbar-brand .xrm-attribute-value > a {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
}

.navbar-brand img {
    margin: 0 !important;
}

.navbar-dark .navbar-nav a.show:focus, .navbar-dark .navbar-nav a.dropdown-toggle.show:focus, .navbar-dark .navbar-nav > li > a:focus, .navbar-dark .navbar-nav > li.dropdown > a:focus {
    border-radius: 5px;
}



/*   BUTTONS   */

.btn {
    border-radius: 5em !important;
}

.btn-default:focus, .btn-default:hover {
    color: white !important;
}

.kit-actions.btn-group .btn.btn-primary {
    background-color: #50a9ce !important;
    color: white !important;
}

.btn.btn-primary .bi.bi-check-circle-fill {
    color: white !important;
}

.btn.btn-primary .bi.bi-check-circle-fill:hover {
    color: #50a9ce !important;
}

.instance-card .btn, .product-card .btn {
    border-radius: 0.5em !important;
}

.add-button, .btn-outline-primary {
    border-radius: 5em !important;
    background-color: #50a9ce !important;
    color: white !important;
}

.add-button:hover, .btn-outline-primary:hover {
    background-color: white !important;
    color: #50a9ce !important;
    border: 1px solid #50a9ce;
}

/*   

.btn-success {
    color: white !important;
}

.add-button {
    border-radius: 1000em !important;
}

*/

.employee-card, .inactive-employee-card {
    width: 290px;
}

.kit-header-card {
    background-color: white !important;
    border: none;
}

/*.kit-header-card > div > h5, .kit-header-card > div > p {
    color: white !important;
}
    */



/*   FOOTER   */

.footer {
    width: 100%;
    height: 60px;
}

.footer .footer-bottom {
    padding: 0.8em;
    background-color: #485156;
}



/*   KIT CONTAINERS   */

.mb-4 {
    margin-bottom: 0 !important;
}

.section-container {
    background-color: transparent !important;
    box-shadow: none !important;
}

.kit-product-grid, .section-container.grid-container {
    margin: 0;
    padding: 0 0 1.5rem;
    display: flex !important;
    flex-wrap: wrap;
}

.instance-card, .product-card {
    width: 306px !important;
    padding: 1rem !important;
}

.product-info {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.instance-actions {
    justify-content: center !important;
}


/*   MODAL WINDOWS   */
.modal-title {
    font-size: 24px;
}



/*   DASHBOARD   */
.grid-template-columns {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

.card-grid-wrapper {
    max-width: 100% !important;
}

.card-grid {
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

.card {
    background-color: #f6f7f7;
    border: 1px solid #DEE3E3;
}

.info-card {
    background-color: white !important;
}




/*   OTHER STYLES   */

.view-grid table th, .view-grid table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: black;
    color: black;
}
/* ---------------------------------------
   Retoure Download Buttons - Icon Farben
--------------------------------------- */
/* Label-Button: Icon weiß */
.instance-actions .btn-primary .bi::before {
    color: #fff !important;
}

/* Label-Button: Icon gleiche Farbe wie Text bei Hover */
.instance-actions .btn-primary:hover .bi::before {
    color: #50a9ce !important;
}

/* QR-Code Button: Icon weiß bei Hover */
.instance-actions .btn-outline-secondary:hover .bi::before {
    color: #fff !important;
}