/* used in page column headers - example Header Height and Text Orientation*/
.header1 .ag-header-cell-label {
    /*Necessary to allow for text to grow vertically*/
    height: 100%;
    padding: 0 !important;
}

.header1 .ag-header-group-cell {
    font-size: 50px;
}

.header1 .ag-header-cell-label .ag-header-cell-text {
    /*Force the width corresponding at how much width
      we need once the text is laid out vertically*/
    width: 55px;
    writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    line-height: 2em;
    margin-top: 60px;
}

/* Used in Column Groups page - example Align the Header Group Label*/
.center-aligned-group-header .ag-header-group-cell-label {
    justify-content: center;
}

.right-aligned-group-header .ag-header-group-cell-label {
    justify-content: right;
}

/* Used in Column Groups page - example Marry Children example and Span Header Height*/
.column-groups-headers .ag-header-group-cell-with-group {
    background-color: #119dff !important;
}

/* Used in Column Groups page - example Group Changes*/
.column-groups-participant-group {
    background-color: #119dff !important;
}

.column-groups-medals-group {
    background-color: #66c2a5 !important;
}

span.legend-box {
    display: inline-block;
    border: 1px solid #aaa;
    height: 15px;
    width: 15px;
    margin-left: 15px;
    margin-right: 5px;
}

/* Used in Column Sizing page for Resizing Groups example*/
.resizable-header {
    background-color: #66c2a5 !important;
}

.fixed-size-header {
    background-color: #e78ac3 !important;
}

/* Used in Column Moving page - example Suppress Hide Leave and Lock Visible*/
.lock-visible-col {
    background: #66c2a5;
}

/* Used in Column Moving page - example Suppress Movable & Lock Position*/
.lock-position-col {
    background: #e78ac3;
}

/* Used in Column Moving page - example Suppress Movable & Lock Position*/
.suppress-movable-col {
    background: #fc8d62;
}

/* Used in Column Pinning page - example Lock Pinned*/
.lock-pinned {
    background: #119dff;
}

.lock-unpinned {
    background: #66c2a5;
}


/* Used in Column Spanning page - example Configuring Column Spanning */
.spanned-col {
    background-color: #119dff;
}

/*  Used in Column Spanning page - example Column Spanning Complex Example */
.header-cell {
    background-color: #119dff;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
}

.quarters-cell {
    background-color: #66c2a5;
    font-weight: bold;
}

/* Used in the Row Spanning page - example Row Spanning Simple Example*/
.spanned-row {
    background-color: #119dff;
}

/* Used in the Row Spanning page - example Row Spanning Complex Example*/
.show-cell {
    background: #119dff;
    border-left: 1px solid lightgrey !important;
    border-right: 1px solid lightgrey !important;
    border-bottom: 1px solid lightgrey !important;
}

.show-name {
    font-weight: bold;
}

.show-presenter {
    font-style: italic;
}

/* End in the Row Spanning page - example Row Spanning Complex Example*/

.ag-theme-alpine.ag-theme-busybee {
    --ag-odd-row-background-color: #F7CE87;
    --ag-header-background-color: silver;
    --ag-header-cell-hover-background-color: #c7c4bf;
}


.ag-theme-alpine.ag-theme-busybee .ag-pinned-left-cols-container, .ag-theme-busybee .ag-pinned-right-cols-container {
    --ag-odd-row-background-color: rgb(215, 215, 215);
    --ag-background-color: rgb(230, 230, 230);
}

.header-style-on-filter .ag-header-cell-filtered {
    background-color: #1b6d85 !important;
    color: #fff !important;
}

.header-style-on-filter .ag-header-cell-filtered span {
    color: #fff !important;
}


.ag-theme-alpine.color-fonts {
    --ag-foreground-color: rgb(126, 46, 132);
    --ag-background-color: rgb(249, 245, 227);
    --ag-header-foreground-color: rgb(204, 245, 172);
    --ag-header-background-color: rgb(209, 64, 129);
    --ag-odd-row-background-color: rgb(0, 0, 0, 0.03);
    --ag-header-column-resize-handle-color: rgb(126, 46, 132);

    --ag-font-size: 17px;
    --ag-font-family: monospace;
}


.ag-theme-alpine.borders {
    /* disable all borders */
    --ag-borders: none;
    /* then add back a border between rows */
    --ag-row-border-style: dashed;
    --ag-row-border-width: 5px;
    --ag-row-border-color: rgb(150, 150, 200);
}


.ddk-container.ddk-container .ag-theme-alpine.headers1 div {
    --ag-header-height: 30px !important;
    --ag-header-foreground-color: white;
    --ag-header-background-color: black !important;
    --ag-header-cell-hover-background-color: rgb(80, 40, 140);
    --ag-header-cell-moving-background-color: rgb(80, 40, 140);
}

.ddk-container.ddk-container .ag-theme-alpine.headers1 .ag-header.headers1 div {
    font-family: cursive;
}

.ddk-container.ddk-container .ag-theme-alpine.headers1 .ag-header-group-cell.headers1 div {
    font-weight: normal;
    font-size: 22px;
}

.ddk-container.ddk-container .ag-theme-alpine.headers1 .ag-header-cell.headers1 div {
    font-size: 18px;
}

.ag-theme-alpine.headers2 {
    --ag-header-column-separator-display: block;
    --ag-header-column-separator-height: 100%;
    --ag-header-column-separator-width: 2px;
    --ag-header-column-separator-color: purple;

    --ag-header-column-resize-handle-display: block;
    --ag-header-column-resize-handle-height: 25%;
    --ag-header-column-resize-handle-width: 5px;
    --ag-header-column-resize-handle-color: orange;
}

.ag-theme-alpine.selection {
    /* bright green, 10% opacity */
    --ag-selected-row-background-color: rgb(0, 255, 0, 0.1);
}


/* custom row dragger */
/* /dash-ag-grid/row-dragging#row-dragger-with-custom-start-drag-pixels */

ag-ltr .ag-cell.custom-athlete-cell.ag-cell-focus:not(.ag-cell-range-selected):focus-within {
    border: 1px solid #ff7b7b;
}

.ag-cell.custom-athlete-cell {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ag-cell.custom-athlete-cell > div {
    height: 100%;
}

.my-custom-cell-renderer {
    display: flex;
    font-size: 0.7rem;
    background-color: #4180d6;
    color: white;
    padding: 0.25rem;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 100%;
}

.my-custom-cell-renderer > * {
    line-height: normal;
}

.my-custom-cell-renderer i {
    visibility: hidden;
    cursor: move;
    color: orange;
}

.my-custom-cell-renderer:hover i {
    visibility: visible;
}

.my-custom-cell-renderer .athlete-info {
    display: flex;
    flex-direction: column;
    width: 85px;
    max-width: 85px;
}

.my-custom-cell-renderer .athlete-info > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* used in page column definitions - example Centered columns*/
.center-aligned-header .ag-header-cell-label {
    justify-content: center;
}

.center-aligned-cell {
    text-align: center;
}

/* used in page Full Width Rows - examples Define Full Width Rows and Full Width Keyboard Navigation*/
.full-width-panel {
    white-space: normal;
    height: 100%;
    width: 100%;
    border: 2px solid blue;
    box-sizing: border-box;
    padding: 5px;
    background-color: lightblue;
}

.full-width-flag {
    float: left;
    padding: 6px;
}

.full-width-summary {
    float: left;
    margin-right: 10px;
}

.full-width-panel label {
    padding-top: 3px;
    display: inline-block;
    font-size: 12px;
}

.full-width-center {
    overflow-y: scroll;
    border: 1px solid grey;
    padding: 2px;
    height: 100%;
    box-sizing: border-box;
    font-family: cursive;
    background-color: #fafafa;
}

.full-width-center p {
    color: black;
    margin-top: 0px !important;
}

.full-width-title {
    font-size: 20px;
}

/* used in page Full Width Rows - examples Detailed Full Width Example and Embedded Full Width Rows*/
.pinned-row, .pinned-column {
    background-color: lightblue;
}

.full-width-row {
    border: 2px solid darkblue !important;
    box-sizing: border-box;
    height: 100%;
    white-space: normal;
}

/* used in page Full Width Rows - example Full Width Keyboard Navigation*/
.ag-row:focus .full-width-panel {
    background-color: #e9d985;
}

/* used in page Row Dragging External Dropzone - example Adding and Removing External Drop Zones*/
/* used in page Row Dragging External Dropzone - example Grid to Grid Simple Example*/
/* used in page Row Dragging External Dropzone - example Grid to Grid Complex Example*/
.grid-green-row, .dragged-tile.tile-green {
    background-color: #66c2a5 !important;
}

.grid-red-row, .dragged-tile.tile-red {
    background-color: #e78ac3 !important;
}

.grid-blue-row, .dragged-tile.tile-blue {
    background-color: #119dff !important;
}

.tile-container-header {
    border: 1px solid;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.tile-container {
    background-color: lightgray;
    height: 350px;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
}

.dragged-tile {
    width: calc(25% - 10px);
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    color: white;
}

/* used in page Row Dragging External Dropzone - example Grid to Grid Simple Example*/
.row-dragging-grid-to-grid-container {
    display: flex;
    align-items: center;
    column-gap: 20px;
}

/* used in page Row Dragging External Dropzone - example Grid to Grid Complex Example*/
#div-row-dragging-grid2grid-complex-bin {
    transition: transform 500ms;
}

/* used in page Compactness - example simple and runtime Examples*/
.ag-theme-alpine.large {
    --ag-grid-size: 10px;
}

.ag-theme-alpine.large.font {
    --ag-font-size: 32px;
}

.ag-theme-alpine.compact {
    --ag-grid-size: 3px;
}

.ag-theme-alpine.compact.font {
    --ag-font-size: 10px;
}

/*used in page Custom Icons Global- Provided themes Example*/
.ag-theme-alpine.balham {
    --ag-icon-font-family: agGridBalham !important;
}

.ag-theme-alpine.material {
    --ag-icon-font-family: agGridMaterial !important;
}

/*used in page Custom Icons Global- Using an Alternative Icon Font Example*/
.ag-theme-alpine.fontawesome {
    --ag-icon-font-family: 'Font Awesome 5 Free' !important;
    --ag-icon-font-code-asc: '\f164';
    --ag-icon-font-code-desc: '\f165';
    --ag-icon-font-code-none: '\f256';
    --ag-icon-font-code-checkbox-checked: '\f118';
    --ag-icon-font-code-checkbox-unchecked: '\f111';
    --ag-icon-font-code-checkbox-indeterminate: '\f11a';
    --ag-icon-font-code-grip: '\f58d';
    --ag-icon-font-code-menu: '\f142';
    --ag-icon-font-code-small-down: '\2b';
}

.ag-theme-alpine.fontawesome .ag-icon-filter {
    --ag-icon-font-family: agGridMaterial !important;
    --ag-icon-font-code-filter: '\f115';
    color: #66c2a5;
    font-size: 30px;
}

.ag-theme-alpine.fontawesome .ag-icon,
.ag-theme-alpine.fontawesome .ag-checkbox-input-wrapper,
.ag-theme-alpine.fontawesome .ag-radio-button-input-wrapper {
    /* Font Awesome requires bold on all icon elements */
    font-weight: bold;
}

/*used in page Custom Icons Global- Image Icons Example*/
.ag-theme-alpine.image-icon .ag-icon-filter {
    background: transparent url("/assets/favicon.ico") center/contain no-repeat;
    color: transparent;
}


/*used in page Inputs & Widgets - Styling Text Inputs Example*/

#styling-inputs-text-inputs.ag-theme-alpine input {
    /*to override DDK*/
    border: var(--ag-borders-input) var(--ag-input-border-color) !important;
}

#styling-inputs-text-inputs.ag-theme-alpine {
    --ag-borders-input: dashed 2px !important;
    --ag-input-border-color: red !important;
}

#styling-inputs-text-inputs.ag-theme-alpine .ag-text-field-input {
    background-image: linear-gradient(to right, white, #fc8d62) !important;
}

#styling-inputs-text-inputs.ag-theme-alpine .ag-text-field-input::placeholder {
    color: red !important;
    font-weight: bold;
}

/*used in page Inputs & Widgets - Styling Checkboxes Example*/
.ddk-container.ddk-container div {
    /*to override DDK*/
    --ag-checkbox-checked-color: unset !important;
}

#styling-inputs-checkboxes.ag-theme-alpine {
    --ag-checkbox-background-color: rgb(209, 255, 123) !important;
    --ag-checkbox-checked-color: #66c2a5 !important;
    --ag-checkbox-unchecked-color: darkred !important;
    --ag-checkbox-indeterminate-color: #fc8d62 !important;
}

/*used in page Menu and Popups - Example*/
.styling-popups-example .ag-theme-alpine {
    --ag-card-radius: 10px !important;
    --ag-card-shadow: 0 10px 40px rgb(83, 0, 106) !important;
    --ag-popup-shadow: var(--ag-card-shadow) !important;
}

.styling-popups-example .ag-theme-alpine .ag-menu {
    background-color: rgb(244, 220, 250) !important;
}

/* Used in the themes - Bootstrap example */
.ag-theme-alpine.dbc-ag-grid  {
    --ag-alpine-active-color: var(--bs-primary);
    --ag-selected-row-background-color: rgba(var(--bs-primary-rgb), 0.3);
    --ag-row-hover-color: rgba(var(--bs-primary-rgb), 0.1);
    --ag-column-hover-color: rgba(var(--bs-primary-rgb), 0.1);
    --ag-input-focus-border-color: rgba(var(--bs-primary-rgb), 0.4);
    --ag-range-selection-background-color: rgba(var(--bs-primary-rgb), 0.2);
    --ag-range-selection-background-color-2: rgba(var(--bs-primary-rgb), 0.36);
    --ag-range-selection-background-color-3: rgba(var(--bs-primary-rgb), 0.49);
    --ag-range-selection-background-color-4: rgba(var(--bs-primary-rgb), 0.59);
    --ag-background-color: var(--bs-body-bg);
    --ag-foreground-color: var(--bs-body-color);
    --ag-border-color: rgba(173, 181, 189, 0.40);
    --ag-cell-horizontal-border: rgba(173, 181, 189, 0.20);
    --ag-secondary-border-color: rgba(173, 181, 189, 0.20);
    --ag-header-background-color: rgba(173, 181, 189, 0.20);
    --ag-odd-row-background-color: rgba(173, 181, 189, 0.05);
    --ag-control-panel-background-color: var(--bs-body-bg);
    --ag-subheader-background-color: var(--bs-body-bg);
    --ag-invalid-color: var(--bs-form-invalid-color);
    --ag-font-family: var(--bs-font-family);
    --ag-tooltip-background-color: var(--bs-gray-400);
}

/* used in the rendering flashing cells example */
#grid-flash-cells-custom {
    --ag-value-change-value-highlight-background-color: #cc222244;
}

/* used in the Change Cell Renderers example */
#cell-rendering-show-change-cell-grid.alt-colors {
    --ag-value-change-delta-down-color: rgb(200, 0, 200);
    --ag-value-change-delta-up-color: rgb(200, 200, 0);
}