@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');


@font-face {
    font-family: "Russo_One";
    src: url("../fonts/russo_one/Russo_One.ttf") format("truetype");
}

@font-face {
    font-family: "Roboto-Black";
    src: url("../fonts/roboto/Roboto-Black.ttf") format("truetype");
}

@font-face {
    font-family: "Roboto-Black";
    src: url("../fonts/roboto/Roboto-Black.ttf") format("truetype");
}

body {
    background: #111;
    line-height: 2vw;
    font-size: 3vw;
    color: #333;
}

.main {
    font-family: 'Roboto-Black';
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
}

.custom-container {
    width: 99vw;
    margin-top: 0px !important;
    padding-right: 1vw;
    padding-left: 1vw;
    margin-right: auto;
    margin-left: auto;

}
.custom-container:before{
    display: table;
    content: " ";
    clear: both;
}

.custom-container:after{
    clear: both;
    display: table;
    content: " ";
}

p{
margin: 0 0 2vw;
}

.cs-px-0 {
    padding-left: 1vw;
    padding-right: 1vw;
}

    .time-bar .cs-time {
        font-size: 2vw;
        padding-top: 1vw;
    }

    .time-bar .score-tm {
        font-size: 4vw;
    }

    img.header-logo {
        width: 100%;
	padding-top: .5vw;
    }


.score-part {
        border-radius: 2vw;
        height: 46vw;
        position: relative;
        font-family: 'Russo_One';
    }


.score-part .number-part {
    position: absolute;
    border: .75vw solid #ffffff4f;
        border-radius: 2vw;
        top: 1vw;
        left: 1vw;
        right: 1vw;
        height: 38vw;
}

.score-part .number-part .line {
    background-color: #ffffff4f;
}

 .score-part .number-part .up {
        top: 0px;
        height: 19vw;
    }

 .score-part .number-part .line {
        top: 19vw;
        height: .75vw;
    }

 .score-part .number-part .down {
        top: 19vw;
        height: 19vw;
    }


.score-part .number-part p {
    padding-top: 8vw;
    font-size: 24vw;
    color: white;
    -webkit-text-stroke: .6vw black;
    letter-spacing: 1vw;
}





    /* Round Part Starts */
    .round-part {
        border-radius: 2vw;
        height: 13.5vw;
        margin-top: 1vw;

    }

    .round-title {
        height: 3vw;
    }

    .round-part .number-part {
        position: relative;
        border-radius: 2vw;
        height: 12.5vw;
    }

    .round-part .number-part .up {
        top: 0px;
        height: 6vw;
    }

    .round-part .number-part .line {
        top: 6vw;
        height: .5vw;
    }

    .round-part .number-part .down {
        top: 6.5vw;
        height: 6vw;
    }

    .round-part .number-part p {
        padding-top: 2vw;
        font-size: 9vw;
        color: white;
    }



    /* for Full Screen */
    .round-part.fullscreen .number-part p {
        padding-top: 5vw;
        font-size: 30vw;
        color: white;
    }

    .round-part {
        margin-left: 0.5vw;
        width: 11vw;
    }

    .score-part .team-info {
        padding-left: 2vw;
        padding-right: 1vw;
        padding-top: 39.5vw;
        font-size: 2vw;
    }

    .score-part .team-info p {
        line-height: 1.0vw;
	margin-top: 1.5vw;
    }


.display-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
}

.c-center {
    justify-content: center;
}

.c-end {
    justify-content: flex-end;
}


.screen-icon img,
.display-control img {
    width: 20vw;
}

.display-control img:nth-child(1) {
    margin-right: 2vw;
}

.screen-icon img,
.display-control.c-end img {
    cursor: pointer;
    transition: transform .2s;
}

.screen-icon img:hover,
.display-control.c-end img:hover {
    transform: scale(1.2);
}

.border-tape-off {
    float: left;
    width: 20vw;
    background-color: #dfdfdf;
    font-weight: bold;
}

.border-tape-on {
    float: left;
    width: 20vw;
    margin-left: 0px !important;
    font-weight: bold;
}

.footer-bar {
    margin: 0 auto;
    padding: 1.5vw 0 0;
    display: block;
    clear: both;
}

.mob-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.c-mt-5 {
    margin-top: .1vw;
}

img.header-logo {
    width: 100%;
}

.round-part {
    position: relative;
    font-family: 'Russo_One';
    border: 0.5vw solid #404040;
}

.control-bar .control-btn {
    width: 55vw;
    cursor: pointer;
    text-align: center;
}

.control-btn p, .round-part p, .round-part-title p {
    font-size: 2vw;
}


    .control-btn p {
        padding-top: 1vw;
        padding-bottom: 1vw;
    }

    .control-bar .control-btn {
        border-radius: 1vw;
        padding: 0.5vw 0;
        margin-bottom: 0px;
    }

    .control-btn.fullscreen {
        border: solid 5px #5b79fd;
    }

    .control-btn.submit,
    .control-btn.switch,
    .control-btn.sync,
    .control-btn.reset-score {
        margin-top: 2vw;
    }

    .control-btn.switch .glyphicon {
        font-size: 3vw;
    }

    .modal-dialog {
        width: 95vw;
	margin: 2wv;
    }

    .modal-dialog input {
        width: 15vw;
        display: inline-block;
    }

    .modal-dialog .number-info input {
        width: 15vw;
        display: inline-block;
    }

    .modal-dialog .btn {
        padding: 1vw 2vw;
    }

    .modal-header {
        padding: 1vw;
    }

    .modal-footer {
        padding: 2vw;
    }

    .modal-title {
        font-size: 3vw;
    }

    .modal-body .form-group input,
    .modal-body .form-group label {
        font-size: 2vw;
    }

    .winning .modal-body .form-group label:first-child {
        width: 20vw;
    }

    .winning .modal-body .form-group label:nth-child(3) {
        width: 20vw;
    }

    .control-bar p {
        padding-top: 1vw;
        padding-bottom: 0vw;
    }

    .mob-flex,
    .mob-baseline {
        display: block;
    }

 
    .display-control img:nth-child(1) {
        margin-right: 2vw;
    }

    .screen-icon img,
    .display-control img {
        width: 5vw;
    }

    .control-bar .mt-btn {
        width: 55vw;
    }


.modal-body .form-group label {
    text-align: right;
}

.main {
    padding-bottom: 1vw;
}

.form-control {
    padding: 1vw 1vw;
    height: 4vw;
}

.modal-dialog .name {
    font-size: 10pt;
    padding-left: 10px;
    font-weight: 100;
}

.modal-dialog .modal-header {
    color: #ffffff;
    background-color: #448bc9;
}

.modal-dialog .modal-footer {
    background-color: #f9f9f9;
}

.cs-red {
    background-color: #ff0000;
    color: #ff0000;
}

.cs-blue {
    background-color: #0000ff;
    color: #0000ff;
}

.cs-bg-red {
    background-color: #ff0000;
}

.cs-bg-blue {
    background-color: #0000ff;
}


.score-part .team-info {
    color: #ffffff;
}

.main .custom-row {
    margin-left: 0px;
    margin-right: 0px;
}

.time-bar {
    color: #ffffff;
}

.time-bar .socre-tm {
    font-family: 'Roboto-Black';
}

.time-bar .score-tm span {
    vertical-align: super;
    font-size: 40%;
}


.round-part .number-part .line {
    background-color: #404040;
}

.score-part .number-part .sub-item {
    cursor: pointer;
    position: absolute;
    width: 100%;
}

.round-part .number-part .sub-item {
    cursor: pointer;
    position: absolute;
    width: 100%;
}

.score-part .number-part p {
    position: relative;
    cursor: pointer;
    text-align: center;
    line-height: 1;
}

.round-part .number-part p {
    position: relative;
    cursor: pointer;
    text-align: center;
    line-height: 1;
}

.score-part .team-info {
    width: 100%;
    position: absolute;
}

.round-part .team-info {
    width: 100%;
    position: absolute;
}

.score-part .team-info:hover {
    cursor: pointer;
}

.round-part .team-info:hover {
    cursor: pointer;
}

.control-bar {
    color: #000000;
}

.text-color-white {
    color: #E0E0E0;
    padding-top: .5vw;    
    padding-bottom: .5vw;    
    line-height: .3vw;
    margin: 1vw;
}

p.text-color-white {

    
}

.control-bar p {
    line-height: 2vw;
}

.round-part p {
    text-align: center;
}

.round-part-title p {
    text-align: center;
}


.control-btn.switch .glyphicon {
    line-height: 0.6em;
}

.btn,
.control-btn {
    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}


.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus,
.control-btn:focus,
.control-btn:active:focus,
.control-btn.active:focus,
.control-btn.focus,
.control-btn:active.focus,
.control-btn.active.focus {
    outline: none;
}

.btn:hover,
.control-btn:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.26);
}

.control-btn,
.middlebar-btn {
    cursor: pointer;
}

.middlebar-btn.reset-score {
    background-color: #FF3615;
}

.middlebar-btn.reset-score:hover {
    background-color: #ff3615bf;
}

.middlebar-btn.switch {
    background-color: #558ED5;
}

.middlebar-btn.switch:hover {
    background-color: #558ed5b5;
}

.control-btn.fullscreen {
    background-color: #4d4d4d;
}

.control-btn.fullscreen:hover {
    background-color: #414141;
}

.middlebar-btn.submit {
    background-color: #46801E;
}

.middlebar-btn.submit:hover {
    background-color: #46801ed9;
}

.middlebar-btn.sync {
    background-color: #353535;
}

.middlebar-btn.sync:hover {
    background-color: #2a2a2a;
}

.middlebar-btn.sync.on {
    background-color: #A6B800;
}

.middlebar-btn.sync.on:hover {
    background-color: #a6b800bf;
}

.control-bar.game-info {
    margin-top: 0px;
}

.control-btn.game-number,
.control-btn.court-number {
    color: #ffffff;
    background-color: #353535;
    float: left;
    margin-left: 1vw;
    width: 12vw;
    height: 4.5vw;
}

.control-btn.game-number:hover,
.control-btn.court-number:hover {
    background-color: #2a2a2a;
}


.team-info .p1-last,
.team-info .p2-last {
    padding-left: 1vw;
}

.number-part .press {
    z-index: 1000;
}

.btn.btn-go-back {
    background-color: #adabab;
}

.btn.btn-go-back:hover {
    background-color: #9e9c9c;
}

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

.modal-body .says {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 12pt;
    color: #ff0000;
}

.modal-body .says span {
    margin-right: 10px;
}

.modal-body label {
    font-weight: 100;
}

.time-bar #time {
    display: inline-block;
}

.time-bar .fa {
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    border-radius: 3px;
    border: solid 2px #d4d4d4;
    color: #d4d4d4;
}

.time-bar .fa:hover {
    border: solid 2px #c1c1c1;
    color: #c1c1c1;
}

.hide {
    display: none;
}

.minimize-bar .inline {
    float: left;
}

.minimize-bar .name-item {
    width: 500px;
    height: 40px;
    margin-top: 5px;
    border-radius: 10px;
}

.minimize-bar .name-item p {
    padding-left: 15px;
    color: #ffffff;
    font-size: 19pt;
}

.minimize-bar .mini-score-bar {
    margin-left: 5px;
}

.minimize-bar .score-item {
    width: 40px;
    height: 40px;
    margin-top: 5px;
    border-radius: 7px;
    text-align: center;
}

.minimize-bar .score-item p {
    color: #ffffff;
    font-size: 19pt;
}

.minimize-bar .mini-number-bar {
    margin-top: 10px;
    margin-left: 10px;
}

.minimize-bar .number-item {
    background-color: #454545;
    width: 70px;
    height: 75px;
    border-radius: 7px;
    text-align: center;
}

.minimize-bar .number-item p {
    color: #ffffff;
    font-size: 19pt;
}

.minimize-bar .mini-btn-bar {
    margin-top: 20px;
    margin-left: 10px;
    cursor: pointer;
}

.cs-maximize {
    width: 35px;
    height: 35px;
    border-radius: 3px;
    border: solid 2px #d4d4d4;
}

.cs-maximize:hover {
    border-color: #a1a1a1;
}

.cs-maximize .inner {
    margin-top: 5px;
    margin-left: 4px;
    margin-right: 4px;
    padding-top: 10px;
    padding-bottom: 4px;
    border-radius: 3px;
    border: solid 2px #d4d4d4;
}

.cs-minimize {
    margin-left: 10px;
    width: calc(100vw*.025);
    height: calc(100vw*.025);
    border-radius: 3px;
    border: solid 2px #d4d4d4;
    float: right;
    cursor: pointer;
}

.cs-minimize:hover {
    border-color: #a1a1a1;
}

.cs-minimize .inner {
    position: relative;
    top: calc(100vw*.003);
    width: 70%;
    height: calc(100vw*.004);
    margin-left: auto;
    margin-right: auto;
    border-radius: 3px;
    border: solid 1px #d4d4d4;
}

.mt-15 {
    margin-top: 2vw;
    HEIGHT: 15VW;
}

.box-size {
    margin: 0 auto;
    width: 20vw;
    height: 15vw;
}

select:focus {
    outline: none;
}

select#left_side_color,
#right_side_color {
    background-color: #dfdfdf;
    border: 0px solid transparent;
    padding: 8px 95px 8px 10px;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
}

.dis-block {
    display: block;
    text-align: center;
}

p.middlebar-btn {
    font-size: 2.4vw;
    border-radius: .5vw;
    margin: 0 1vw;
    margin-top: 1.5vw;
    padding: 1vw 0;
}


div#center-round {
    margin-top: 0.5vw;
}

.custom-row{
    clear:both;
    display: block;
}


.custom-row:after, .custom-row:before{
    display: table;
    content: " ";
    clear: both;
}

.custom-col-xs-4, .custom-col-xs-5, .custom-col-xs-6, .custom-col-xs-2{    
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 0.5vw;
    padding-left: 0.5vw;
}

.custom-col-xs-4{
    width: 33.33333333%;
}

.custom-col-xs-6{
    width: 50%;
}

.custom-col-xs-5{
    width: 42vw;
}

.custom-col-xs-2{
    width: 13vw;
}
#dlg_help_iframe{
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

/* --- Center stack layout (adds, does not replace) --- */
#center-round { display:flex; flex-direction:column; align-items:center; }
#center-round .center-stack { display:flex; flex-direction:column; align-items:center; gap:1.2vw; width:100%; }

/* Court pill that was in the footer */
#center-round .court-pill {
  display:inline-block;
  background:#2c2c2c;
  color:#fff;
  border-radius:1vw;
  border:.3vw solid #111;
  font-weight:900;
  padding:.6vw 1.2vw;
  font-size:1.6vw;
  letter-spacing:.06vw;
  box-shadow:0 0 0 .3vw #2c2c2c inset;
}

/* Use existing button styles for Switch/Reset; just center them */
#center-round .center-stack .middlebar-btn {
  display:inline-block;
  min-width:10vw;
  text-align:center;
  margin:0;
}

/* Final row: fullscreen + color picker, on one line */
#center-round .center-row {
  display:flex; gap:1.2vw; align-items:center; justify-content:center; width:100%;
}

/* Make the fullscreen icon touch-friendly when it’s in the center */
#center-round .center-row #btn_fullscreen { height:2.8vw; max-height:40px; cursor:pointer; }

/* Hide things we don’t want in the center stack */
.middlebar-btn.submit,
.middlebar-btn.sync { display:none !important; }

/* Hide the original footer containers we are moving from */
.footer-bar .screen-icon,
.footer-bar .game-info { display:none !important; }

/* Hide player-name blocks under each score panel */
#team1 .team-info,
#team2 .team-info {
  display: none !important;
}

/* Optional: tighten panel spacing since names are gone */
.score-bar .score-part { padding-bottom: 1.2vw; }

/* allow JS width to take effect on the color wheel */
#colorBTN {
  display: block;         /* so width applies predictably */
  max-width: 100%;
  height: auto;           /* keep aspect ratio */
  object-fit: contain;
}