@charset "UTF-8";

@font-face {
    font-family: "transperth";
    src: url('/App_Themes/TP_Mobi/font/transperth.eot?1523596500');
    src: url('/App_Themes/TP_Mobi/font/transperth.eot?&1523596500#iefix') format("embedded-opentype"), url('/App_Themes/TP_Mobi/font/transperth.woff?1523596500') format("woff"), url('/App_Themes/TP_Mobi/font/transperth.ttf?1523596500') format("truetype"), url('/App_Themes/TP_Mobi/font/transperth.svg?1523596500#transperth') format("svg");
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}

[class*="icon-"] {
    font-family: 'transperth';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.icon-Train-circ {
    font-size: 1.5em;
    position: relative;
}

.icon-Bus-circ {
    font-size: 1.5em;
    position: relative;
}

.icon-Ferry-circ {
    font-size: 1.5em;
    position: relative;
}

.icon-Ferry-circ::before {
    content: "\e01a";
}

.icon-Train-circ::before {
    content: "\e004";
}

.icon-Bus-circ::before {
    content: "\e007";
}

.icon-alert:before {
    content: "\e022";
}

.icon-Ferry-circ::after {
    color: #1d1d1b;
    left: 0;
    top: 0;
    position: absolute;
}

.icon-Bus-circ::after {
    color: #1d1d1b;
    left: 0;
    top: 0;
    position: absolute;
}

.icon-Train-circ::after {
    content: "\e003";
    color: #1d1d1b;
    left: 0;
    top: 0;
    position: absolute;
}

.icon-Ferry-circ::before {
    color: #005892;
}

.icon-Train-circ::before {
    color: #cdcccc;
}

.icon-Bus-circ::before {
    color: #008635;
}

.alert-red {
    color: #e2241b;
}

ul.service-changes {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.service-changes a {
    color: #e2241b;
}

ul.service-changes a span {
    padding-left: 5px;
    color: #e2241b;
    font-weight: bold;
    font-size: 14px;
}

ul.service-changes a i {
    position: static;
    left: 0;
    font-size: 18px;
}

ul.service-changes li {
    border-bottom-style: none;
    padding-bottom: 0px;
}

.tt-livetext {
    color: white;
    font-size: x-small;
    background: orange;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}

.interruption-link {
    color: #a10303;
}

/* * * * * * CSS RESET * * * * * */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    margin: 0;
    padding: 0
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
    content: none
}

ins {
    text-decoration: none
}

del {
    text-decoration: line-through
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

img {
    display: block;
    margin: 0px;
}


/* * * * * * WEBSITE STRUCTURE ELEMENTS * * * * * */

body {
    -webkit-text-size-adjust: none; /* iPhone restrict ability to resize text AUTOMATICALLY ( can still zoom! ) */
    /* BASIC FONT SETTINGS */
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 18px;
    /* width: 290px; */
}

.hometext {
    color: #000000;
}


.mainwrap {
    margin: 5px auto;
}

/* Header & Menu */

.tpm_menu {
    display: block;
    background: #ffffff;
    height: 43px;
    width: 290px;
    clear: both;
}

.tpm_menu_QR {
    display: block;
    background: #056314;
    width: 290px;
    clear: both;
    padding: 10px;
}

.tpm_row_black {
    display: block;
    background: #000000;
    color: #ffffff;
    width: 290px;
    clear: both;
    font-size: 16px;
    padding: 10px;
}

.tpm_row_white {
    display: block;
    background: #ffffff;
    color: #000000;
    width: 290px;
    clear: both;
    font-size: 14px;
    padding: 10px;
}

.tpm_row {
    display: block;
    background: #056314;
    color: #ffffff;
    width: 290px;
    clear: both;
    font-size: 16px;
    padding: 10px;
}

.tpm_menu a img {
    width: 145px;
    height: 43px;
    border: 0px;
    margin: 0px;
    padding: 0px;
    float: left;
}

/* Specific HOMEPAGE version */
.tmp_menu_home {
    height: 40px;
    /*border-bottom: solid 3px #009534;*/
    border-bottom: solid 3px #008A30;
    margin-bottom: 5px;
}

#tpm_logo {
    width: 126px;
    height: 29px;
    border: 0px;
}

/* * * * * Content * * * * */

.tpm_content {
    height: 100%;
    padding: 0px;
    /*border-bottom: 1px;
    border-bottom-style: solid;
    border-bottom-color: gray;*/
}

.tpm_content .btn-reverse-direction {
    text-align: center;
    display: inline-block;
    width: 100%;
    /*background-image: url('~/App_Themes/TP_Mobi/reverse.gif');*/
    background: orange;
    background-image: linear-gradient(#FFC700, orange);
    color: black;
    border-radius: 2px;
    margin-bottom: 5px;
    height: 32px;
    padding-top: 6px;
    box-sizing: border-box;
}

/* * * * * Footer * * * * */

div.tpm_footer {
    padding: 20px 0px;
    clear: both;
    text-align: center;
    font-size: 12px;
}

div.tpm_footer a {
    color: #000000;
    text-decoration: underline;
    padding: 0 10px;
}

span.copyright {
    padding: 0 10px;
}

/* * * * * * FONT ELEMENTS * * * * * */

h1 {
    font-size: 18px;
    line-height: 24px;
    margin: 10px 0;
    font-weight: bold;
}

h2 {
    font-size: 16px;
    font-weight: bold;
}

a {
    /*color: #009534;*/
    color: #008A30;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    /*color: #009534;*/
    color: #008A30;
}

p {
    margin: 10px 0;
}

.small {
    font-size: 12px;
    line-height: 16px;
}


.tpm_textalert {
    /*color: #ff0000;*/
    color: #EB0000;
    display: block;
}

/* * * * * * HOME PAGE * * * * * */

.tpm_homeicon {
    display: block;
    float: left;
    width: 90px;
    padding: 7px 27px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    color: #000000 !important;
    font-size: 13px;
}

.tpm_homeicon img {
    width: 69px;
    height: 69px;
    margin: 0 auto;
}


/* * * * * * HELP MENU * * * * * */

#tpm_help {
    background: #bfe4cc;
    margin: 0 0;
}


div #tpm_help ol {
    list-style: decimal;
    list-style-position: outside;
    padding: 0 0 0 20px;
    margin: 0px;
}

div#tpm_help ol li {
    padding: 0 0 3px 0;
}

#tpm_helpbutton {
    width: 25px;
    height: 26px;
    border: 0px;
    float: right;
    cursor: pointer;
    margin-right: 17px;
    background-image: url("help.gif");
}


/* * * * * RESULT/FOLD SYSTEM * * * * */

.tpm_row {
    margin-bottom: 3px;
}

/* Heading with green background standard */
.tpm_row_heading_black {
    width: 290px;
    display: block;
    overflow: hidden;
    padding: 10px;
    background: #000000;
    color: #ffffff !important;
    font-size: 16px;
    box-sizing: border-box;
}

.tpm_row_heading_black .tpm_row_heading_stop, .tpm_row_heading_black .tpm_row_heading_trip_route {
    font-size: 16px;
    font-weight: bold;
}

.tpm_row_heading_black .tpm_row_heading_stop_name, .tpm_row_heading_black .tpm_row_heading_trip_fleet {
    font-size: 12px;
}

/* Heading with green background standard */
.tpm_row_heading {
    /*height: 34px;
    width: 270px;*/
    display: block;
    overflow: hidden;
    padding: 10px;
    /*background: #009534;*/ /* Basic default GREEN Transperth */
    background: #008A30;
    color: #ffffff !important;
    font-size: 16px;
    line-height: 34px;
    font-weight: normal;
}

#lnkTripInterruption {
    padding-left: 10px;
    padding-bottom: 2px;
}

#lnkTripInterruption .interruption-link {
    display: none;
    cursor: pointer;
    text-decoration: underline;
}

.tpm_row_white.info {
    font-style: italic;
    font-size: 12px;
}

.tpm_row_timetable_wrap:not(:first-child) {
    border-top: 1px;
    border-top-style: solid;
    border-color: gray;
}

.tpm_row_timetable {
    font-size: 14px;
    padding-bottom: 5px;
    /*padding: 10px;
    border-right: 8px;
    border-right-style: solid;
    border-image: radial-gradient(rgb(255,165,0),rgb(250,224,66)) 1;*/
}

.tpm_row_timetable.fleet-running .route-display-name {
    cursor: pointer;
}

.tpm_row_timetable_QR {
    font-size: 14px;
    padding: 10px;
}

.tpm_row_timetable_QR .route-display-name {
    float: left;
    width: 75px;
    min-width: 45px;
    text-align: left
}

.tpm_row_timetable_QR.fleet-running .route-display-name {
    cursor: pointer;
}

.tpm_fleettrip_content_wrap {
    overflow: hidden;
    height: 500px;
    border-top: 1px;
    border-top-style: solid;
    border-color: gray;
}

.tpm_fleettrip_content_wrap .tpm_content {
    overflow: auto;
    height: 100%;
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
}

.tpm_fleettrip_content_wrap .tpm_content::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

/*.tpm_row_fleettrip_wrap:not(:first-child) {*/
/*.tpm_row_fleettrip_wrap:first-child {
    border-top: 1px;
    border-top-style: solid;
    border-color: gray;
}*/

.sonar-wave {
    display: none;
    position: absolute;
    top: -2px;
    left: 6px;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background-color: HSL(45, 100%, 50%);
    opacity: 0;
    z-index: 1000;
    pointer-events: none;
    background-size: contain;
    background-image: url('/App_Themes/TP_Mobi/liveBusGreen.png');
}

/*
  Animate!
  NOTE: add browser prefixes where needed.
*/
.sonar-wave {
    -webkit-animation: sonarWave 2s linear infinite;
    animation: sonarWave 2s linear infinite;
}

@keyframes sonarWave {
    from {
        opacity: 1;
    }

    to {
        transform: scale(1.5);
        opacity: 0;
    }
}

.tpm_row_fleettrip_wrap {
    position: relative;
}

.tpm_row_fleettrip_wrap .circle-icon {
    width: 8px; /* Adjust the size as needed */
    height: 8px; /* Adjust the size as needed */
    border: 2px solid green; /* Color and thickness of the ring */
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    margin-left: 12px;
}

.tpm_fleettrip_content_wrap #pnlFleetTrip .fleet-trip-detail {
    padding-top: 8px;
}

.tpm_fleettrip_content_wrap #pnlFleetTrip .fleet-trip-detail.BUS .tpm_row_fleettrip_wrap .sonar-wave {
    background-image: url('/App_Themes/TP_Mobi/liveBusGreen.png');
}

.tpm_fleettrip_content_wrap #pnlFleetTrip .fleet-trip-detail.RAIL .tpm_row_fleettrip_wrap .sonar-wave {
    background-image: url('/App_Themes/TP_Mobi/liveRailGreen.png');
}

.tpm_fleettrip_content_wrap #pnlFleetTrip .fleet-trip-detail.FERRY .tpm_row_fleettrip_wrap .sonar-wave {
    background-image: url('/App_Themes/TP_Mobi/liveFerryGreen.png');
}

.tpm_row_fleettrip_wrap .dot-icon-live {
    width: 8px; /* Adjust the size as needed */
    height: 8px; /* Adjust the size as needed */
    background-color: orange; /* Change the color as needed */
    border-radius: 50%;
    display: inline-block;
}

.tpm_row_fleettrip_wrap .tpm_row_fleettrip_QR {
    font-size: 14px;
    padding: 0 10px 10px 12px;
    border-left: 1px solid green;
    margin-left: 16px;
}

.tpm_row_fleettrip_wrap .tpm_row_fleettrip_QR .tpm_row_fleettrip_stop {
    float: left;
    margin-top: -17px;
    width: 70%;
    min-width: 45px;
    text-align: left;
    font-weight: bold;
}

.tpm_row_fleettrip_wrap .tpm_row_fleettrip_QR .tpm_row_fleettrip_stop .service-stop-name {
    display: block;
}

.tpm_row_fleettrip_wrap .tpm_row_fleettrip_QR .tpm_row_fleettrip_stop .service-stop-number {
    font-weight: normal;
    font-size: 12px;
}

.tpm_row_fleettrip_wrap .tpm_row_fleettrip_QR .tpm_row_fleettrip_status {
    float: left;
    margin-top: -17px;
    width: 30%;
    text-align: right;
    font-weight: bold;
}

.tpm_row_fleettrip_wrap .tpm_row_fleettrip_QR .tpm_row_fleettrip_status .service-time {
    padding-left: 3px;
}

.tpm_row_fleettrip_wrap .tpm_row_fleettrip_QR .tpm_row_fleettrip_status .service-status-flag {
    font-weight: normal;
    font-size: 12px;
}

.tpm_row_fleettrip_wrap .tpm_row_fleettrip_QR .dot-icon-live {
    display: none;
}

.tpm_row_fleettrip_wrap.Scheduled .tpm_row_fleettrip_QR {
}

.tpm_row_fleettrip_wrap.Predicted .tpm_row_fleettrip_QR {
}

.tpm_row_fleettrip_wrap.Predicted .tpm_row_fleettrip_QR .service-status-flag {
    display: none;
}

.tpm_row_fleettrip_wrap.Predicted .tpm_row_fleettrip_QR .dot-icon-live {
    display: inline-block;
}

.tpm_row_fleettrip_wrap.AtStop .circle-icon {
    border-color: transparent;
}

.tpm_row_fleettrip_wrap.AtStop .sonar-wave {
    display: block;
}

.tpm_row_fleettrip_wrap.AtStop .tpm_row_fleettrip_QR {
}

.tpm_row_fleettrip_wrap.AtStop .tpm_row_fleettrip_QR .dot-icon-live {
    display: inline-block;
}

.tpm_row_fleettrip_wrap.Departed .circle-icon {
    opacity: 0.5;
    border-color: lightgray;
}

.tpm_row_fleettrip_wrap.Departed.current-trip .sonar-wave {
    display: block;
    top: 25px;
}

.tpm_row_fleettrip_wrap.Departed .tpm_row_fleettrip_QR {
    opacity: 0.5;
    border-left-color: lightgray;
}

.tpm_row_fleettrip_wrap.Departed .tpm_row_fleettrip_QR .service-status-flag {
    display: none;
}

.tpm_row_fleettrip_wrap.PastedSchedule .circle-icon {
    opacity: 0.5;
    border-color: lightgray;
}

.tpm_row_fleettrip_wrap.PastedSchedule.current-trip .sonar-wave {
    display: block;
    top: 25px;
}

.tpm_row_fleettrip_wrap.PastedSchedule .tpm_row_fleettrip_QR {
    opacity: 0.5;
    border-left-color: lightgray;
}

.tpm_row_fleettrip_wrap.PastedSchedule .tpm_row_fleettrip_QR .service-status-flag {
    display: none;
}

.tpm_row_fleettrip_wrap:last-child .circle-icon {
    width: 12px;
    height: 12px;
    border-width: 3px;
    margin-left: 11px;
}

.tpm_row_fleettrip_wrap:last-child .tpm_row_fleettrip_QR {
    border-left: 0;
}

.smallHeader {
    font-size: 14px;
    font-weight: bold;
    line-height: 34px;
    margin: 10px 0;
}

.tpm_row_content {
    background: #BFE4CC;
    width: 270px;
    padding: 10px;
}

.arrow {
    display: none; /* Only show when JAVASCRIPT is active */
    width: 25px;
    height: 25px;
    border: 0px;
    float: right;
    margin: 5px 8px 0 0;
    background-image: url('arrows.gif');
    background-position: 25px 0px;
}

.arrow_right {
    width: 25px;
    height: 25px;
    border: 0px;
    float: right;
    margin: 5px 7px 0 0;
}


/* * * * * * Station List * * * * * */

.station_list {
    background: #ffffff !important; /* Offset train specific backgrounds */
    margin: 0 0 10px 0;
}

.station_list tr {
    border-bottom: solid 3px #ffffff;
}

.station_list td {
    height: 34px;
    width: 270px;
    padding: 0px 10px;
    /* Default green Transperth background */
    /*background: #009534;*/
    background: #008A30;
    color: #ffffff;
    line-height: 34px;
}

/* Each TRAIN LINE has a different background color */
tr.Airport, td.Airport, table.Airport td {
    background: #49c6bb;
    color: #ffffff;
}

tr.Armadale, td.Armadale, table.Armadale td {
    background: #FFC700;
    color: #000000;
}

tr.Ellenbrook, td.Ellenbrook, table.Ellenbrook td {
    background: #da282f;
    color: #ffffff;
}

tr.Fremantle, td.Fremantle, table.Fremantle td {
    background: #006FAC;
    color: #ffffff;
}

tr.Yanchep, td.Yanchep, table.Yanchep td {
    background: #B7B60E;
    color: #000000;
}

tr.Mandurah, td.Mandurah, table.Mandurah td {
    background: #EE8219;
    color: #ffffff;
}

tr.Midland, td.Midland, table.Midland td {
    background: #BF1B67;
    color: #ffffff;
}

tr.Thornlie, td.Thornlie, table.Thornlie td {
    background: #ffc700;
    color: #4a4a4a;
}

/* * * * * TRAIN HEALTH * * * * */

.train_health {
    width: 100%;
}

.train_health tr {
    border-bottom: solid 3px #ffffff;
}

.train_health th {
    text-align: left;
    font-weight: normal;
    padding-left: 10px;
}

.train_health td {
    height: 32px;
    line-height: 32px;
}

.tpm_radio_wrap {
    display: inline;
    margin-right: 10px;
    line-height: 34px;
}


/* * * * * * JOURNEY PLANNER * * * * * */

.journey_planner_form {
    width: 100%;
}

.journey_planner_form th {
    width: 35%;
    text-align: left;
    font-weight: bold;
    padding: 5px 0;
}

.journey_planner_form td {
    text-align: right;
    padding: 5px 0;
}

.journey_planner_select {
    width: 100%;
}

.journey_planner_select td {
    text-align: left;
    width: 50%;
    padding: 5px 0;
}

.journey_planner_results {
    width: 100%;
    margin-bottom: 10px;
}

.journey_planner_results th {
    font-weight: bold;
    text-align: left;
    padding: 5px 0;
}

.journey_planner_results td {
    width: 70%;
    text-align: left;
    padding: 5px 0;
}

.journey_planner_leg {
    width: 100%;
}

.journey_planner_leg tr {
    /*border-bottom: solid 1px #009534;*/
    border-bottom: solid 1px #008A30;
}

.journey_planner_leg th {
    vertical-align: middle;
    text-align: center;
    padding: 0 20px 0 10px;
}

.legend {
    width: 100%;
    margin: 10px 0;
}

.legend td {
    padding: 5px 0;
}

/* * * * * * STANDARD FORM INPUT * * * * * */

input.tpm_show_times {
    background: url('show_times.gif');
    border: 0px;
    width: 115px;
    height: 37px;
    margin: 0 5px;
    color: #ffffff;
    font-size: 0;
    line-height: 0;
}

input.tpm_reverse {
    background: url('reverse.gif');
    border: 0px;
    width: 115px;
    height: 37px;
    margin: 0 5px;
    color: #ffffff;
    font-size: 0;
    line-height: 0;
}

input.tpm_reset {
    background: url('reset.gif');
    border: 0px;
    width: 115px;
    height: 37px;
    margin: 0 5px;
    color: #ffffff;
    font-size: 0;
    line-height: 0;
}

input.tpm_show_balance {
    background: url('show_balance.gif');
    border: 0px;
    width: 115px;
    height: 37px;
    margin-top: 0px;
    margin-right: 5px;
    margin-bottom: 8px;
    margin-left: 5px;
    color: #ffffff;
    font-size: 0;
    line-height: 0;
}

input.tpm_send_feedback {
    background: url('send_feedback.gif');
    border: 0px;
    width: 139px;
    height: 37px;
    margin: 0 5px;
    color: #ffffff;
    font-size: 0;
    line-height: 0;
}


@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.refresh-btn {
    border: 0;
    background-color: transparent;
    color: currentColor;
}

.refresh-btn .refresh-icon {
    width: 16px;
    color: #446CB3;
    font-size: 2em;
    cursor: pointer
}

.refresh-btn .refresh-icon.spin-animation {
    animation-name: spin;
    -webkit-animation-name: spin;
    -moz-animation-name: spin;
    -ms-animation-name: spin;
    animation-duration: .5s;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -ms-animation-duration: .5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-timing-function: ease-in; /*linear;*/
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in
}

/** MODAL DIALOG **/

.modal {
}

.modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

.modal__container {
    background-color: #fff;
    width: 300px;
    max-height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    border-radius: 8px;
}

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #008A30;
    color: #fff;
    padding: 0.5em 0.8em 0.8em;
}

.modal__title {
    margin-top: 0.3em;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
}

.modal__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
    font-size: 1.25rem;
    color: currentColor;
}

.modal__close::after {
    content: '';
    position: absolute;
    top: -0.5em;
    bottom: -0.5em;
    right: -0.5em;
    left: -0.5em;
}

.modal__content {
    color: #000;
    overflow-y: auto;
    padding: 1em 1em 0.5em;
}

/** MODAL DIALOG ANIMATION **/
@keyframes mmfadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes mmfadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes mmslideIn {
    0% {
        transform: translateY(15%);
    }
    99.9% {
        transform: translateY(0);
    }
    100% {
        /* use sub-pixel rendering when animation is over */
        transform: none;
    }
}

@keyframes mmslideOut {
    0% {
        transform: translateY(0);
    }
    99.9% {
        transform: translateY(-10%);
    }
    100% {
        /* use sub-pixel rendering when animation is over */
        transform: none;
    }
}

.modal-slide {
    display: none;
}

.modal-slide.is-open {
    display: block;
}

.modal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.modal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.modal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.modal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

/** FOR ACCESSIBILITY **/
/** disabled because it reveals bogus focus targets, etc.
:focus {
    outline: 2px solid currentColor;
}

.tpm_row_heading:focus {
    outline: 2px solid #000;
}*/

:focus { outline: 0; }