/* 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;
}