div.tyl-content,
div.tyl-content-container__v1{
    margin-bottom:32px;
}

tcw-icon[name="close"]::part(svg){
    color: var(--mdc-theme-text-icon-on-background);
}

@media (prefers-color-scheme: dark) {
    .tyl-button--raised:disabled, .tyl-button--unelevated:disabled {
        background-color: var(--mdc-gray-100);
        color: var(--mdc-theme-text-icon-on-dark);
    }

    input:autofill {
        color-scheme: dark;
    }
}

/* For some reason scaffold did not want to listen to the background for surfaces */
tcw-scaffold::part(root) {
    background: var(--mdc-theme-surface);
}

.tyl-typography--title,
tcw-busy-indicator::part(surface),
tcw-calendar::part(date-view-table),
tcw-calendar::part(next-button-icon),
tcw-calendar::part(previous-button-icon){
    color: var(--mdc-theme-text-primary-on-background);
}

.invalid{
    color: var(--mdc-theme-error);
}

/* TylerForge button icons look fine but when
 * they are used in project, they look bad.
 * This fixes it.
 */
i.tyler-icons.tcw-icon.tyl-button__icon{
    margin: 0;
    margin-right: 8px;
}

@media screen and (max-width: 600px){
    i.tyler-icons.tcw-icon.tyl-button__icon{
        margin:0;
    }

    .tcw-icon-button-content.tyl-button__label{
        padding:0;
    }
}

.dialog--button-footer{
    display:flex; 
    justify-content: space-between; 
    flex-grow: 1; 
    align-items:end;
    margin-top:16px;
}

.tyl-content-container__v1 {
    padding:15px 15px 0 15px;
}
.map-container {
    height: 100%;
    width: 100%;
}

.dymaptic-branding {
    display: none;
}

.cwDialogTemplateContainer {
    max-width: calc(100vw - 50px);
    width: 500px;
    max-height: 600px;
    height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.cwDialogTemplateHeader {
    flex-shrink: 0;
}

.cwDialogTemplateBody {
    flex-grow: 1;
    overflow-y: scroll;
    padding: 25px;
    max-height: 500px;
}

/*
* TcwButton needs updates with margin so they don't sit flush against other buttons or elements.
* This only really happens when other elements come between tcwbuttons.
*/
.button-spacer{
    display:inline-block;
}

.routedetail-rollout-arrow {
    font-size: 45px;
    margin-top: 5px;
}

.routedetail-rollout-previous {
    color: var(--mdc-theme-error);
}

.routedetail-rollout-new {
    color: var(--mdc-theme-success);
}

.routedetail-rollout-grid {
    display: grid;
    grid-template-columns: 40% 20% 40%;
}

.buttons-left {
    display: inline-block;
}

.buttons-right {
    display: inline-block;
    float: right;
}

.buttons-right > *:not(:last-child) {
    margin-right: 5px;
}

/* Created for Tcw Button, needs special 
 specificity from parent to child. */
.button-full-width {
    width:100%;
    & button {
        width:100%;
    }
}

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

.route-time-display-grid {
    postion:relative;
    margin: 20px 0 20px 0;
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: center;
}

@media (min-resolution: 4x) {
    .route-time-display-grid {
        display: none;
    }
}

@media (max-resolution: 3.9x) {
    .route-time-display-label {
        display: none;
    }
}

.tyl-dialog-container {
    overflow-y: auto;
}

.h-85 {
    height: 85%;
}

/* Adding these styles here so it doesn't get the control id added to it. */
@media screen and (min-width: 600px) {
    .forge-page-control--scaffold{
        max-width: 600px;
    }
}

.forge-page-control--scaffold{
    width: 100%;
}

.tyl-dialog--fullscreen .tyl-dialog__surface {
    height: 100%;
    width: 100%;
    min-width: auto;
    max-width: 100%;
    overflow-y: scroll;
    border-radius: 0;
}

.form--checkbox-invalid{
    color: var(--mdc-theme-error);
}

.form--field{
    margin-bottom: 16px;
}

.float-right{
    float:right;
}

.float-left{
    float:left;
}

.text-bold{
    font-weight:bold;
}

.text-highlight{
    color:var(--mdc-theme-secondary);
}