@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
body {
    font-family: 'Inter', sans-serif;
}

.main-block {
    margin-top: 160px;
}


.derby {
    background-color: #5BB465;
    text-align: center;
    color: #fff;
    font-size: 34px;
    font-weight: bold;
    padding: 15px;
    margin-bottom: 80px;
}

.draw-table tr td {
    background-color: #000;
    color: #fff;
    padding: 15px 50px;
    font-size: 22px;
}

.draw-table tr.draw-no td {
    background-color: #E73323
}

.draw-table tr.draw-date td {
    background-color: #A09F3D;
}
.draw-table tr td {
    text-align: center;
    border-left: 1px solid #FFFFFF;
}
.btn-derby span{
      display: block;
}
.btn-derby{
      font-size: 20px;
      text-align: left;
      padding: 20px;
      padding-left: 40px;
      font-weight: bold;
      line-height: 24.2px;
      color: #fff !important;
      width: 100%;
      margin-bottom: 10px;
}

@media screen and (max-width: 991px) {
      .btn-derby{
            font-size: 15px;  
            padding: 7px 15px;         
      }

      .draw-table tr td {            
            padding: 7px 15px;
            font-size: 18px;
        }

        .derby {          
            font-size: 24px;            
            padding: 10px 15px;
            margin-bottom: 50px;
        }
}

.gold{
      color: #E79C37 !important;
      border: 2px solid #E79C37;
      background-color: #fff;
}
.gold.active{
      background-color: #E79C37;
      color: #fff !important;
}
.silver{
      color: #9C9C9C !important;
      border: 2px solid #9C9C9C;
      background-color: #fff;
}
.silver.active{
      background-color: #9C9C9C;
      color: #fff !important;
}
.platinum{
      color: #50A7F1 !important;
      border: 2px solid #50A7F1;
      background-color: #fff;
     
}
.platinum.active{
      background-color: #50A7F1;
      color: #fff !important;
}

.mercury{
      color: #E88A57 !important;
      border: 2px solid #E88A57;
      background-color: #fff;
}
.mercury.active{
      background-color: #E88A57;
      color: #fff !important;
}
.sodium{
      color: #F0C864 !important;
      border: 2px solid #F0C864;
      background-color: #fff;
      
}
.sodium.active{
      background-color: #F0C864;
      color: #fff !important;
}
.copper{
      color: #9BBD76 !important;
      border: 2px solid #9BBD76;
      background-color: #fff;
    
}
.copper.active{
      background-color: #9BBD76;
      color: #fff !important;
}
.king{
      color: #63A88D !important;
      border: 2px solid #63A88D;
      background-color: #fff;
}
.king.active{
      background-color: #63A88D;
      color: #fff !important;
}
.queen{
      color: #447B9D !important;
      border: 2px solid #447B9D;
      background-color: #fff;
}
.queen.active{
      background-color: #447B9D;
      color: #fff !important;
}
.master{
      color: #EC7D3B !important;
      border: 2px solid #EC7D3B;
      background-color: #fff;
}
.master.active{
      background-color: #EC7D3B;
      color: #fff !important;
}
     

#clockdiv{
	/* font-family: sans-serif; */
	/* color: #fff; */
	display: inline-block;
	font-weight: bold;
	text-align: center;
	font-size: 74px;
      line-height: 100%;
}
#clockdiv-right{
      font-family: sans-serif;
	/* color: #fff; */
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
}

#clockdiv  > div{
color: #0b7cca;
	display: inline-block;
}

#clockdiv div > span{
	padding: 15px;
	border-radius: 3px;	
	display: inline-block;
      color: #092c86;
}

.smalltext{
	padding-top: 5px;
	font-size: 16px;
      line-height: normal;
}


.dcalendarpicker .dudp__wrapper{
      bottom: unset !important;
      top: 50% !important;  
      transform: translate(-50%, -50%) !important;
}


.btn-timer > div{
      display: inline-block;
}

.btn-timer .smalltext{
      font-size: 12px;
}

.btn-timer span{
      margin-top: 10px;
      /* background-color: #5BB465;
      color: #FFF;
      padding: 10px; */
      color: inherit;
}