/*************************************************************************************
/ MOVE THIS SECTION TO app.css FILE IN THIS SAME FOLDER AND WE WILL USE IT FOR GENERAL
/ OVERRIDES SO THE APP-DARK AND APP-LIGHT FILES CAN BE FOR DARK/LIGHT STYLING ONLY
*************************************************************************************/
.brand-link .brand-image {
    margin-left: 0 !important;
}
.btn-sm { font-size: 12px; padding: 3px 4px; }
.table select { font-size: 13px; width: 100%; }
.table td { padding: 15px 8px !important; text-align: left; }
.table thead th { font-size: 12px; text-transform: uppercase; }
.sorting.sorting_disabled::before,  .sorting.sorting_disabled::after { display:none !important; }
.leader-chart { width: 100%; display: block; }
.leader-chart ul { list-style: none; padding:0; margin:0; }
.leader-chart .items-container .item { display: flex; width: 100%; justify-content: space-between; padding: 5px 10px; font-size: 13px; margin-bottom: 3px; }
.leader-chart .items-container.winner-ul .winner-trophy {
    width: 50px;
    height: 50px;
    top: 0px;
    position: absolute;
    background: url(../img/momex-trophy.png);
    background-size: contain;
    background-repeat: no-repeat;
    right: 14%;
}
#revenue-chart { max-height:400px; }
label.error { font-size: 14px; font-weight: 500; padding: 2px 10px; border-radius: 5px; margin: 5px 0 0 0; }

.slider-container { text-align: center; padding: 70px 0; }
.slider-container .slider-item { display: block; align-items: center; margin: auto; }
.slider-container .slider-item .range-start,
.slider-container .slider-item .range-end {
    padding: 0; margin: 0; position: relative; top: 1px;
}
.slider-container .slider-item input { margin: 0 20px; width: 58%; }
.slider-range { -webkit-appearance: none; appearance: none; height: 5px !important; width: 100%; border-radius: 10em; outline: none; margin-bottom: 14px; }
.slider-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; }
.slider-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; }
.slider-container .label-range { display: block; padding: 38px 0 40px 0; }
.statement-heading { width: 100%; text-align: center; font-size:20px; }
.statement-heading-sub { width: 100%; text-align: center; font-size:20px; }

.load-leaders { border: none; padding: 10px 30px; margin: 20px auto 0 auto; }
.build-rank, .maintain-rank, .hurt-rank { padding: 0 5px; cursor:default; }
.length-bar { align-items: center; display: flex; padding: 10px 0; }



/*************************************************************************************
/ START OF DARK MODE SPECIFIC CSS CODE
*************************************************************************************/

.danger-row { background-color: rgb(251 109 109 / 20%) !important; }
.dark-mode .form-control { background-color: #282c30 !important; }

.dark-mode .form-control.bg-danger-important {
    background-color: #ff0000 !important; /* Red color */
}
.dark-mode .form-control.bg-success-important {
    background-color: #28a745 !important;
}
.dark-mode .form-control.bg-warning-important {
    background-color: #ffc107 !important;
}

.center .inline-errormsg, span.error { background-color: #fcaaaa; margin-top: 3px; padding: 5px; }

.warning-row.odd, .warning-row.odd td { background-color: #394450 !important; margin-top: 3px; color: #fff; }

.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*="navbar"]) { background-color: #008087; }

[class*=sidebar-dark-] { background-color: #008087 !important; }

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active { background-color: #00676c; }
.dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .dark-mode .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active { background-color: #00676c; }
.dark-mode .content-wrapper { background-color: #01676c; }
.btn-primary, .dark-mode .btn-primary { color: #fff; background-color: #008087; border-color:#008087; box-shadow: none; }
.btn-primary:hover,.dark-mode .btn-primary:hover { background-color: #008087; border-color: #008087; }
.dark-mode .btn-success { color: #fff; background-color: #008087; border-color: #008087; box-shadow: none; }

.leaderboardCard { background-color: #008087 !important; }
.leader-chart .items-container .item.winner { background-color: #fff; color:#000; }

label.error { background: #e18681; }

.slider-range {background-color:#008087; }
.slider-range::-webkit-slider-thumb { background: #ffc009; }
.slider-range::-moz-range-thumb { background-color: #ffc009; }
.statement-heading .highlight { color:#ffc009; }
.load-leaders { background: #ffc009; }
.build-rank { background: #fff; color: #000; }
.maintain-rank { background: #008087; color: #ffffff; }
.hurt-rank { background: #b62525; color: #ffffff; }

.table a { color: #acafbb; }
/* Old th light-green color I removed to go with gold: #acbbb4; */
.table th { color: #c29b59; }
.table td { border-top: solid 1px #585858 !important; }
.dark-mode .table-bordered, .dark-mode .table-bordered td, .dark-mode .table-bordered th { border-color: rgba(0,0,0, 0); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.15) !important; }
td a.btn { background-color: #4a6078 !important; color: #fff !important; border: none; }
.dark-mode .navbar-white {background-color: #008087 !important}