#timer_container{
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    height: 100%;
    padding:10px;
    box-sizing: border-box;
    display:flex;
    height: 100%;
    flex-direction: column;
    border:1px solid #DDD;
    user-select: none;
}
#timer_container .timer-container{
    font-weight: 600;
    color: #000;
    border: 1px solid #ddd;
    margin-top: -1px;
    margin-bottom: 5px;
    background: #EEE;
}
#timer_container .timer{font-size: 55px;
    margin-left: auto;
    width: 325px;
    margin-right: auto;
}
#timer_container .timer_footer{ justify-content: space-around; margin: 10px -10px -10px -10px; background: #C3A961}
.jersey-container .popover{ min-width: 400px; font-weight: normal !important;}
#timer_container .user_timer span{font-size: 30px; font-weight: 500; display: block; line-height: 1}
#timer_container .other_timer a{ font-size: 18px; font-weight: 500; line-height: 1}
#timer_container .other_timer a span{ display:block; font-size: 11px}
#timer_container .actions a{ border-radius: 0; margin: 2px}

#timer_container .user_timer{ background: #eee; padding: 10px 15px 0 15px; border: 1px solid #DDD; border-bottom: 0px;}
#timer_container .user_timer.official{ border-top: 5px solid #8BBF61; padding-top: 6px}
#timer_container .other_timer a.official{background:#8BBF61;color: #FFF; border-color: #83B25D}
#timer_container .reset_official{ flex-wrap: wrap; justify-content: space-between}

#timer_container .timer_body{height: 100%; max-height: 100%; background: #fff; display: flex; align-content: center; align-items: center; overflow: hidden;  flex-wrap: wrap; flex-direction: column; justify-content:center;}
#timer_container .timer_body.started{justify-content:start;}
#timer_container .timer_body.stopped{justify-content:start; overflow-y: scroll}
#timer_container .timer_body #start{width: 250px;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 50%;
    background: #8BBF61;
    border: 5px #83B25D solid;
    text-align:center;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
#timer_container .timer_body #start:active{ background:#BD362F; border: 5px #AF342E solid; }
#timer_container .timer_body ul{margin:0; padding: 0; width: 100%}
#timer_container .timer_body ul li{ display: flex; text-align: center; padding:5px; border-bottom: 1px #EEE solid; font-size: 20px; font-weight: bold; user-select: none; justify-content: space-evenly}
#timer_container .timer_body ul li.bookmarked{ background: #FFF7DB;}
#timer_container .timer_body ul li.bookmarked mark:after{ content:' Bookmarked'; font-size: 10px; font-weight: normal;}

#timer_container .timer_body ul li mark{ background: none; color: #797979; text-align: left; display: block; width: 100%; padding-left: 15px}
#timer_container .timer_body ul li time{ background: none; color: #797979; text-align:right; display: block; width: 100%; padding-right: 15px}

#timer_container .close-timer{font-size: 20px; font-weight: normal; color: #fff; display: inline-block; align-self: end; margin-left: auto}
#timer_container #record{position:absolute;height: 100%; width: 100%;}

#timer_container .progressbarWrapper {height: 15px; width: 100%; display: block; margin: auto; position: relative; background: #EEEEEE; padding: 3px;  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);}
#timer_container #greenBar { display: block; height: 100%; width: 0%; background-color: #8BBF61;
    position: relative; overflow: hidden; font-size: 15px; text-align: center; color: white; transition: all 700ms ease;}

/*
.timer-tab-item{ background: #ddd; margin-right: 5px; padding: 10px 20px; font-size: 14px; line-height: 1; color:#4D4D4D; font-weight: bold; display: flex; align-items: center; cursor: pointer;}

.active.timer-tab-item, .timer-tab-item:hover{ background:#C3A961; color:#FFF }
.timer-tab-item.is_official{ flex-direction: column}
.timer-tab-item span{ display: block; font-size: 11px; font-weight: lighter}

 */

#finish_times .finish_time{ display: none}
#finish_times .finish_time.active{ display: block}

#finish_times .times{border-bottom: 1px solid #ddd; align-items: center; justify-content: space-evenly}
#finish_times .times.bookmarked{ background: #FFF7DB}
#finish_times .times.focus{ background: #EAEAEA}
#finish_times .times input{ width: 100%; border:0; padding: 5px 8px; font-size: 14px; background: none; margin-bottom: 0px}


#finish_times .times span{ display: block; width: 50px; font-weight: bold; padding-left: 8px}
#finish_times .edit-cols{ border-right:1px solid #DDD}
#finish_times .edit-cols:first-child{border-left:1px solid #DDD}

#finisher-list .pl input{ width: auto; display: inline-block; border:0; background: none; margin: 0; max-width: 30px; padding: 0px; line-height: 1; text-align: center}
#finisher-list td{ vertical-align: middle}
#team_scores tr.text-success td{ color: #037903}
#team_scores tr.text-danger td{ color: #BD362F}

.finishers_bar{ font-weight: bold; font-size: 24px; background: #303030; color:#fff; padding: 10px 0; margin-bottom: 4px;}





div.the_events{border: 1px solid #EBF1F6; padding: 20px;margin-bottom: 20px;}

body .select2-container {
    display: inline-block !important;
}

body .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height: 26px}

.numpad{
    margin-left: -5px;
    margin-top: 26px;
    padding-left: 0px !important;
    border-left:none
}
.numpad button{ height: 41px;}
.nmpd-wrapper {display: none;}
.nmpd-target {cursor: pointer;}

.nmpd-grid {position:absolute;
    left:0px;
    right:0px;
    top:50px;
    margin-left: auto;
    margin-right: auto;
    z-index:5000;
    -khtml-user-select: none; padding:10px; width: initial;
    background: #fff;

}

.nmpd-overlay {z-index:4999;}
input.nmpd-display {text-align: right;}
.nmpd-grid {border: none; padding: 20px;}

.nmpd-grid>tbody>tr>td {border: none;}

input[type=number].nmpd-display::-webkit-inner-spin-button,
input[type=number].nmpd-display::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}


.nmpd-grid td{ padding:5px !important;}
.nmpd-grid .numero, .nmpd-grid .sep , .nmpd-grid .neg{ padding:5px 20px; font-size: 35px}
.nmpd-grid .clear, .nmpd-grid .del, .nmpd-grid .cancel, .nmpd-grid .done{ font-size: 18px; padding:17px 10px}
.nmpd-grid .nmpd-display{ font-size: 25px}


/*
.nmpd-grid .numero, .nmpd-grid .sep , .nmpd-grid .neg{ padding:5px 20px; font-size: 35px}
.nmpd-grid .clear, .nmpd-grid .del, .nmpd-grid .cancel, .nmpd-grid .done{ font-size: 18px; padding:17px 10px}
.nmpd-grid .nmpd-display{ font-size: 25px}

 */

#numpadButton-btn .ti-calculator{ font-size: 50px; line-height: 20px; color:#003C70}

.finish_time{display: none;}
.finish_time.active{ display: block;}

.user-profile-tab .nav-item .nav-link.active{
    background: #EDF5FD !important;
color: #444F58 !important;
border-bottom: none !important;
}