.no-pad { padding: 0px; }
.no-pad-left { padding-left: 0px; }
.no-pad-right { padding-right: 0px; }

body { max-width: 100%; overflow-x: hidden; background-color: var(--background); }

#controls { height: 100vh; background-color: #222; padding: 40px; position: relative; overflow: auto; }

    #controls .border-bottom { border-bottom: 1px solid #fff; padding-bottom: 25px; margin-bottom: 15px; }

    #controls .buttons {display: flex; justify-content: space-between; }
    #controls .buttons .btn { text-transform: uppercase; border-radius: 0; padding: 10px 20px 10px 20px; width: 31%; }
        #controls .buttons .btn.btn-keyline { background-color: #222; border: 1px solid #fff; color: #fff; }
        #controls .buttons .btn.btn-keyline:hover { background-color: #fff; border: 1px solid #fff; color: #222; font-weight: 500; }

        #controls .buttons.bottom { margin-top: 20px; }
        #controls .buttons.bottom .btn { width: 48%; }

    #controls .current-number h2 { font-size: 30px; color: #fff; font-weight: 400; margin-top: 10px; }
    #controls .current-number h4 { font-size: 16px; color: #fff; font-weight: 400; }
    #controls .current-number h5 { font-size: 14px; color: #b3b3b3; text-transform: uppercase; }

    #controls .current-number .song .text { max-width: 200px; }

    #controls .song { margin-top: 15px; }
        
        #controls .song .icon { display: inline-block; vertical-align: middle; }
            #controls .song .icon span { color: #fff; border: 1px solid #fff; padding: 10px; border-radius: 50%; }
            #controls .song .icon:hover span { color: #222; border: 1px solid #fff; padding: 10px; border-radius: 50%; background-color: #fff; }
        
            #controls .song .text { display: inline-block; vertical-align: middle; margin-left: 10px; }
            #controls .song .text h4 { font-size: 16px; color: #fff; font-weight: 400; margin-top: 0px; margin-bottom: 0px; }
            #controls .song .text h5 { font-size: 14px; color: #b3b3b3; margin-top: 5px; margin-bottom: 0px; text-transform: inherit; }

    #controls .spotify-player { color: inherit; }

        #controls .spotify-player h5 { font-size: 14px; color: #b3b3b3; text-transform: uppercase; margin-bottom: 20px; }
        #controls .spotify-player p { color: #777; margin-top: 10px; }
        #controls .spotify-player p a.spotify { color: #1DB954; text-decoration: none; }
        #controls .spotify-player p a.spotify:hover { color: #fff; }

        #controls .spotify-player ol { color: #fff; padding-left: 15px; }
        #controls .spotify-player ol li span { text-decoration: none; font-weight: 500; }
        #controls .spotify-player ol li img { width: 25px; }
        
        #controls .spotify-player .left { display: inline-block; vertical-align: middle; }
            #controls .spotify-player .left img { height: 120px; width: auto; }
        
        #controls .spotify-player .right { display: inline-block; vertical-align: middle; margin-left: 15px; }
            #controls .spotify-player .right h4 { font-size: 16px; color: #fff; font-weight: 400; margin-top: 0px; margin-bottom: 0px; }
            #controls .spotify-player .right h5 { font-size: 14px; color: #b3b3b3; margin-top: 5px; margin-bottom: 0px; text-transform: inherit; }
            #controls .spotify-player .right .icon { display: inline-block; vertical-align: middle; margin-top: 15px; margin-right: 5px; }
            #controls .spotify-player .right .icon span { color: #fff; border: 1px solid #fff; padding: 10px; border-radius: 50%; }
            #controls .spotify-player .right .icon:hover span { color: #222; border: 1px solid #fff; padding: 10px; border-radius: 50%; background-color: #fff; }

            #controls .spotify-player .btn-spotify { background-color:#1DB954; border-radius:28px; border:1px solid #18ab29; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:17px; padding:16px 31px; text-decoration:none; text-shadow:0px 1px 0px #2f6627; }
            #controls .spotify-player .btn-spotify:hover { background-color: #349a4f; }

    #controls .number-checker { color: inherit; }
        #controls .number-checker h4 { font-size: 16px; color: #fff; font-weight: 400; margin-top: 0px; margin-bottom: 0px; }
        #controls .number-checker h5 { font-size: 14px; color: #b3b3b3; text-transform: uppercase; margin-bottom: 20px; }
        
        #controls .number-checker input { border-radius: 0; padding: 10px 20px 10px 20px; margin-right: 10px; background-color: #222; border: 1px solid #fff; color: #fff; width: 100px; }
        #controls .number-checker input::-webkit-inner-spin-button { opacity: 1 }
        
        #controls .number-checker .btn { text-transform: uppercase; border-radius: 0; padding: 10px 20px 10px 20px; margin-right: 15px; min-width: 100px; }
            #controls .number-checker .btn.btn-keyline { background-color: #222; border: 1px solid #fff; color: #fff; }
            #controls .number-checker .btn.btn-keyline:hover { background-color: #fff; border: 1px solid #fff; color: #222; }

            #controls .number-checker .numbers { margin-top: 10px; margin-bottom: 10px; }
            #controls .number-checker .numbers .number-container { margin-top: 10px; margin-right: 10px; display: inline-block; vertical-align: middle; text-align: center; width: 60px; height: 60px;  position: relative; width: 60px; height: 60px; }
            #controls .number-checker .numbers .number { color: #fff; border: 3px solid #fff; border-radius: 50%; font-size: 20px; font-weight: 500; width: 100%; height: 100%; line-height: 50px; font-size: 24px; cursor: pointer; }
            #controls .number-checker .number.green { color: #1ae000; border: 3px solid #1ae000; }
            #controls .number-checker .number.red { color: #df0303; border: 3px solid #df0303; }

        /* #controls .number-checker .number { display: inline-block; vertical-align: middle; margin-top: 40px; margin-right: 10px; } */
            /* #controls .numbers { margin-bottom: 25px; } */
            /* #controls .number-checker .number span { color: #fff; border: 3px solid #fff; padding: 15px; border-radius: 50%; font-size: 20px; font-weight: 400; } */
            

#results { height: 100vh; background-color: var(--background); padding: 50px 80px; width: 100%; overflow: auto;}

#results .top { border-bottom: 2px solid var(--inactive-color); padding-bottom: 30px; width: 800px; left: 0; right: 0; margin: auto;}
    #results .top .col-xs-6 { height: 200px; }
    
    #results .top .ball { width: 200px; height: 200px; position: absolute;  }
        #results .top .ball img { width: 200px; height: auto; }
        #results .top .ball .text { position: absolute; font-size: 50px; z-index: 999; margin: 0 auto; left: 0; right: 0; top: 33%; text-align: center; width: 60%; }

    /* #results .top .recent-numbers { bottom: 0; right: 0; position: absolute; margin-right: 16px; border: 1px solid black;}
        #results .top .recent-numbers h4 { font-size: 18px; color: var(--active-color); font-weight: 400; text-transform: uppercase; text-align: right; margin-bottom: 30px; }
        #results .recent-numbers .number { display: inline-block; vertical-align: middle; margin-bottom: 16px; margin-left: 10px; }
        #results .recent-numbers .number span { color: var(--background); border: 3px solid var(--background); padding: 15px; border-radius: 50%; font-size: 20px; font-weight: 400; }
        #results .recent-numbers .number.active span { color: var(--active-color); border: 3px solid var(--active-color); padding: 15px; border-radius: 50%; font-size: 20px; font-weight: 400; } */

        #results .top .recent-numbers { position: absolute; right: 0; bottom: 0; }
        #results .top .recent-numbers h4 { font-size: 18px; color: var(--active-color); font-weight: 400; text-transform: uppercase; text-align: right; padding-right: 30px; }
        #results .top .recent-numbers .numbers {display: flex; justify-content: space-between; margin-top: 15px; width: 375px; margin-right: 30px; }
        #results .top .recent-numbers .numbers .number-container { display: inline-block; vertical-align: middle; text-align: center; width: 60px; height: 60px;  position: relative; width: 60px; height: 60px; }
        #results .top .recent-numbers .numbers .number { color: var(--inactive-color); border: 3px solid var(--inactive-color); border-radius: 50%; font-size: 20px; font-weight: 400; width: 100%; height: 100%; line-height: 50px; font-size: 24px; cursor: pointer; }
        #results .top .recent-numbers .numbers .number.active { color: var(--active-color); border-color: var(--active-color); }

        /* #results .recent-numbers {display: flex; justify-content: space-between; margin-top: 15px; } */
        /* #results .recent-numbers .number { color: #fff; border: 3px solid #fff; padding: 15px; border-radius: 50%; font-size: 20px; font-weight: 400; width: 10%;  display: inline-block; vertical-align: middle; text-align: center; width: 60px; height: 60px; } */

#results .bottom { width: 800px; left: 0; right: 0; margin: auto; }

#results .bottom .all-numbers {display: flex; justify-content: space-between; margin-top: 15px; }
#results .bottom .all-numbers .number-container { display: inline-block; vertical-align: middle; text-align: center; width: 60px; height: 60px;  position: relative; width: 60px; height: 60px; }
#results .bottom .all-numbers .number { color: var(--inactive-color); border: 3px solid var(--inactive-color); border-radius: 50%; font-size: 20px; font-weight: 400; width: 100%; height: 100%; line-height: 50px; font-size: 24px; cursor: pointer; }
#results .bottom .all-numbers .number.active { color: var(--active-color); border-color: var(--active-color); }

/* #results .bottom .number { display: inline-block; vertical-align: middle; margin-bottom: 16px; margin-left: 10px; width: 8%; } */
/* #results .bottom .number span { color: #fff; border: 3px solid #fff; padding: 15px; border-radius: 50%; font-size: 20px; font-weight: 400; height: 90px; width: 90px; } */

.modal { overflow-y:auto; }
.modal-content { border-radius: 0px; background-color: #222; }
.modal-header { border-bottom: 0px; margin: 15px 15px 0px 15px; }
.modal-footer { border-top: 0px; }
.modal-backdrop { opacity: .75; }
.modal-title { color: #fff; font-size: 20px; font-weight: 400; text-transform: uppercase; }
.modal .close { color: #fff; font-size: 32px; font-weight: 400; height: 40px; width: 40px; border: 2px #fff solid; border-radius: 50%; position: absolute; right: 20px; top: 20px; cursor: pointer; opacity: 1; font-weight: 300; }
.modal .close span { height: 33px; display: block; }
.modal label { color: #fff; font-weight: 400;}
.modal input { border-radius: 0; padding: 10px 20px 10px 20px; margin-right: 10px; background-color: #222; border: 1px solid #fff; color: #fff; height: 45px; }
.modal input[type="time"]::-webkit-calendar-picker-indicator{ filter: invert(1); }
.modal textarea { border-radius: 0; padding: 10px 20px 10px 20px; margin-right: 10px; background-color: #222; border: 1px solid #fff; color: #fff; height: auto; }
.modal select { border-radius: 0; padding: 10px 20px 10px 20px; margin-right: 10px; background-color: #222; border: 1px solid #fff; color: #fff; height: 45px; font-size: 20px; font-weight: 400; }
.modal h4 { color: #fff; font-weight: 400; font-size: 14px; }
.modal-footer { text-align: center; margin-bottom: 20px; }

.modal .btn { text-transform: uppercase; border-radius: 0; padding: 10px 20px 10px 20px; width: 31%; font-size: 20px; }
.modal .btn.btn-keyline { background-color: #222; border: 1px solid #fff; color: #fff; }
.modal .btn.btn-keyline:hover { background-color: #fff; border: 1px solid #fff; color: #222; font-weight: 500; }

.select-spotify-track { display: block; min-height: 167px; margin-bottom: 30px; text-align: center; cursor: pointer; text-decoration: none; }
.select-spotify-track:hover { text-decoration: none; opacity: 0.5; }
    .select-spotify-track h4 { max-height: 100px; overflow: hidden; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; height: 100%; text-decoration: none; }
    .select-spotify-track h5 { max-height: 100px; overflow: hidden; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; height: 100%; text-decoration: none; color: #1DB954; }


/* .modal .numbers-list { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.modal .numbers-list .number-container { height: auto; padding: 0px 10px 0px 10px; margin-top: 10px; }
.modal .numbers-list .number-container .number { text-align: center; border: 1px solid white; width: 100%; height: auto; } */

.modal .numbers-list  { margin-top: 10px; margin-bottom: 10px; height: 250px; overflow: auto; }
.modal .numbers-list .number-container { margin-top: 10px; margin-right: 10px; display: inline-block; vertical-align: middle; text-align: center; width: 70px; height: 70px;  position: relative; }
.modal .numbers-list .number-container:nth-child(10n) { margin-right: 0px; }
.modal .numbers-list .number { color: #fff; border: 2px solid #fff; font-size: 20px; font-weight: 500; width: 100%; height: 100%; line-height: 45px; font-size: 24px; cursor: pointer; }
.modal .numbers-list .number a { color: #fff; text-decoration: none; display: block; }
.modal .numbers-list .number:hover { background-color: #fff; }
.modal .numbers-list .number:hover a { color: #222; }

.modal + .modal {
    background: rgba(0, 0, 0, 0.6);
  }


@media screen and (max-width: 1750px) {

#controls .song .icon { width: 15%; }
    #controls .song .icon span { padding: 5px!important; }

#controls .song .text { width: 70%; margin-left: 5px; }

}

@media screen and (max-width: 1500px) {

#controls .buttons .btn { font-size: 13px; padding: 10px 0px 10px 0px; }

}

@media screen and (max-width: 1200px) {

    #controls .buttons .btn { font-size: 11px; }
    
}