/* TODO: Shiraz, Please add/update following styles */
.w-btn {
    border: solid 1px #cccccc;
    border-radius: 4px;
    padding: 4px;
    margin: 2px 0 2px 0;
    background: white;
    color: #000;
    display: inline-block;
    min-width: 75px;
    text-align: center;
    cursor: pointer;
}

.w-btn:hover {
    background: #23282d;
    color: #fff;
}

#news_vidget a {
    cursor: pointer;
}

.saddle-cloth {
    min-width: 40px;
    padding: 5px 3px;
    border: 1px solid #666;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    font-weight: bold;
    margin: 0 5px 0 5px;
    display: inline-block;
    text-align: center;
}

.weg-track {
    color: red;
}

.input {
    width: 50%;
}

.twitter .media {
    width: 120px;
}

.plcupcomming {
    text-align: center;
}

#upcomming {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    width: 80px;
    white-space: nowrap;
}

.bio table {
    width: 100%;
    border: solid 1px;
}

.bio table th {
    background: #7c0000;
    color: white;
}

.bio table th,
.bio table td {
    padding: 4px;
    border-bottom: solid 1px #000;
    text-align: center;
}

.bio table tr:nth-child(odd) {
    background-color: #ccc;
}

.biopost .swiper-container {
    height: 140px;
}

.biopost .swiper-slide {
    text-align: center;
    min-width: 65px;
}

.biopost .swiper-slide img {
    width: 88px;
}

.raceday sup {
    font-size: .7em;
}

.raceday .runner {
    font-size: 1.2em;
    font-weight: bold
}

.simulcast-padding {
    padding: 15px;
}

.simulcast-padding h1 {
    text-align: left;
    font-size: 3em;
}

.modal-header h4 {
    display: inline
}

.modal-body h4 {
    padding: 16px 0 0 0;
    border-bottom: solid 1px #e5e5e5;
    font-size: 1.1em;
}

.modal-body h2:not(:first-child),
.modal-body h3:not(:first-child),
.modal-body h4:not(:first-child) {
    margin-top: 0px;
}

.name-earnings span {
    font-size: 13px;
    display: block;
    line-height: 16px;
    padding-top: 14px;
}

.raceday-results .nav-tabs {
    margin-bottom: 2px;
}

.race-header {
    margin-top: 60px;
}

.race-header.no-top-margin {
    margin-top: 0px;
}

#alerts {
    display: none;
}

.wb-alert,
.mk-alert {
    padding: 10px;
    background-color: rgb(254, 194, 16);
    color: #000;
    text-align: center;
}

.wb-alert a,
.mk-alert a {
    text-decoration: underline;
    color: #000;
}

.wb-alert a:hover,
.mk-alert a:hover {
    color: #000;
    text-decoration: underline;
}

.yellow {
    /* background-color: rgb(254,194,16); */
    background-color: #C75000;
}

/* 
1. Make sure the information conveyed by color differences is also available by other means, for example, visible and programmatic text.
2. Use color and patterns to differentiate one element from the other.
3. People who cannot see the screen, or who are not able to differentiate between colors should have another way to understand all content and functionality. 
*/

/* make the active bullet wider to fulfill accessibility requirements */
.wpb_gallery_slides .flex-control-nav li .flex-active {
    width: 1.5em;
}

/* make the active bullet wider to fulfill accessibility requirements */
.wpb_revslider_element .tp-bullets {
    display: flex;
    justify-content: space-between;
    background-color: transparent;
}

.wpb_revslider_element .tp-bullets .tp-bullet {
    position: relative !important;
    left: unset !important;
}

.wpb_revslider_element .tp-bullets .tp-bullet.selected {
    width: 1.5em !important;
    border-radius: 1.5em !important;
}