/* Global style for all the apps in the project */

html,
body {
    background-color: var(--black);
}

.page-container {
    padding-right: 1.5%;
    height: fit-content;
    min-height: 100vh;
    & dtcoach-apps-header {
        position: sticky;
        top: 0;
        z-index: 999;
    }
}

/* @media (width < 1440px) {
    .page-container {
        height: fit-content;
    }
} */

span,
h2 {
    font-family: 'Titillium Web', sans-serif !important;
    line-height: 33px;
    font-style: normal;
}

/*
    font-YY, where:
        - YY: font-weight
*/
.font-600 {
    font-weight: 600 !important;
}

.font-300 {
    font-weight: 300 !important;
}

.font-700 {
    font-weight: 700 !important;
}

.font-bold {
    font-weight: bold !important;
}

/*
    padding-X-YY, where:
        - X: bottom, right, left, top
        - YY: value
*/

.padding-b-15 {
    padding-bottom: 15px;
}

/* Box Shadow styles */
.box-shadow-active-grey {
    box-shadow: 0px 0px 5px var(--active-grey) !important;
}

.box-shadow-grey {
    box-shadow: 0px 0px 5px var(--grey) !important;
}

@media (max-width: 500px) {
    .box-shadow-grey {
        box-shadow: 0px 0px 3px var(--grey) !important;
    }
}

.box-shadow-mid-red {
    box-shadow: 0px 0px 5px var(--mid-red) !important;
}

.box-shadow-white {
    box-shadow: 0px 0px 5px var(--white) !important;
}

.box-shadow-mid-white {
    box-shadow: 0px 0px 5px var(--mid-white) !important;
}
/* .mat-form-field-infix {
    border-top: none !important;
} */
.mat-table {
    background: transparent !important;
}
/* Scrollbar css */
td.mat-cell::-webkit-scrollbar,
.mat-select-panel::-webkit-scrollbar,
.mat-dialog-content::-webkit-scrollbar,
.mat-dialog-container::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0.5em;
}
td.mat-cell::-webkit-scrollbar-track,
.mat-select-panel::-webkit-scrollbar-track,
.mat-dialog-content::-webkit-scrollbar-track,
.mat-dialog-container::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
td.mat-cell::-webkit-scrollbar-thumb,
.mat-select-panel::-webkit-scrollbar-thumb,
.mat-dialog-content::-webkit-scrollbar-thumb,
.mat-dialog-container::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background-color: var(--active-grey);
    outline: 1px solid slategrey;
    border-radius: 0.25em;
}
td.mat-cell::-webkit-scrollbar-thumb:hover,
.mat-select-panel::-webkit-scrollbar-thumb:hover,
.mat-dialog-content::-webkit-scrollbar-thumb:hover,
.mat-dialog-container::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: var(--dark);
}

/* MAT DIALOG CSS*/
.mat-dialog-transition {
    transition: width 2s;
}

.mat-dialog-container {
    background: var(--dark) !important;
    border-radius: 15px !important;
}

.mat-edit-icon-button {
    color: var(--mid-white);
    background: var(--dark-grey);
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.common-form-extra-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    border: 1px solid var(--dark-grey);
    border-radius: var(--radius-medium);
    padding: 6px;
    margin-block: 12px;

    & > * {
        width: 100%;
    }

    .common-form-extra-content-all-columns {
        grid-column: 1 / -1;
    }
}

@media screen and (width < 750px) {
    .common-form-extra-content {
        grid-template-columns: 1fr;
        width: 92%;
    }
}

.extra-content-title {
    color: var(--white);
    margin-block-start: 20px;
}

#common-form-change-password-button {
    width: 50%;
    min-width: 180px;
}

.pop-up-common-actions-container {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

@media screen and (width < 430px) {
    .pop-up-common-actions-container {
        flex-wrap: wrap !important;
    }
}