@font-face {
  font-family: 'Gotham Pro';
  src: url("./fonts/GothamPro.ttf");
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'GothamPro-Bold';
  src: url("./fonts/GothamPro-Bold.ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat-Bold';
  src: url("./fonts/Montserrat-Bold.otf");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Geometos';
  src: url("./fonts/Geometos.ttf");
  font-weight: normal;
  font-style: normal;
}
h3{
  font-family: 'Montserrat-Bold';
  color: #362b68;
  font-size: 26px;
  text-align: center;
  letter-spacing: 1px;
}
.modal-title{
  font-family: 'Montserrat-Bold';
  color: #5c2e6d;
  font-size: 25px;
  text-align: center;
  letter-spacing: 1.5px;
}
p{
  color: #424242;
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.7px;
}
body{
  font-family: 'Gotham Pro' !important;
  background:url("./img/bg2.png")no-repeat;
  background-size: cover;

}

.nav-tabs .nav-link {
  border: 1px solid #3d3d3d;
  border-radius: 0;
  color: #3d3d3d;
  text-align: center;
  font-size: 15px;
  padding: .5rem 0rem;
  font-family: 'GothamPro-Bold' !important;
}
.nav-tabs .nav-item:first-child,.nav-tabs .nav-item:nth-child(2){
  width: 30%;
}
.nav-tabs .nav-item:last-child{
  width: 40%;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #ffff;
  background-color: #5c2e6d;
   border-color: #3d3d3d;
}
.nav-tabs .nav-item:last-child .nav-link{
  border-right: none !important;
}
#mainrow {
  width: 35%;
  padding-left: 20px;
}
#main-container,#alert-danger{
  display: none;
}
#login{
  padding-top: 20px;
  border: 1px solid #3d3d3d;
  background: #fefefe;
  text-align: center;
  width: 35%;
  margin:10% auto auto auto;
}
.main-wrap{
  min-height:89.5vh;
  padding-bottom: 10px;
}
footer .main-wrap{
  min-height: auto !important;
  padding-bottom: 0px !important;
}
footer input{
  width: 33.33%;
  background: transparent;
  border: 1px solid #3c2f74;
  color: #fff;
  margin-right: 5px;
  padding-left: 12px;
  height: 40px;
  margin-top:6px;
  font-family: 'Geometos';
}
#teamDiv{
  padding: 10px 20px;
  text-align: center;
}
#teamDiv span{
  color: #7c7c7c;
  font-size: 15px;
}
#Grid  .e-table, .e-grid .e-gridsummary{
  table-layout: auto;
}
#secondDiv{
  padding: 0px 5px 15px 5px;
}
#frame-wrap{
  width:65%;
  position: relative;
height: 70vh;
}
.over{
  position: absolute;
  bottom: -32px;
  left: 0;
  border-top:2px solid #3c2f74 ;
  right: 0;
  background: white;
  height: 26px;
}
#GridTeam_list{display: none}
#homeInput:focus::placeholder {
  color: transparent !important;
}
.main-wrap{
  width: 85%;
  margin: 0 auto;
}
.nullPadding {
  padding: 0;
  margin: 0;
}
#timer{
  display: none;
  width:20%;
  color:#5c2e6e ;
  font-size: 18px;
  font-family: 'GothamPro-Bold';
  padding-top:15px;
}
label{
  margin-bottom: 0;
}
#timer span{
  font-size: 22px;
  background:#f0f0f0;
  border-radius:20px;
  padding:5px 15px;
}
#stopWatch{
  display: none;
  width: 75%;
  color:#5c2e6e ;
  font-size: 18px;
  font-family: 'GothamPro-Bold';
  padding-top:15px;
}
#stopWatch ul{
  display: inline-block;
  padding:0;
  margin:0;
  border:1px solid #cecece;
  list-style: none;
  border-radius: 5px;
  margin-right: 5px;
}

#stopWatch li{
  display: inline-block;
}
#stopWatch li a{
  color:#5c2e6d ;
  cursor: pointer;
  font-size: 15px;
border-right: 1px solid #cecece;
  padding:6px 10px;

}
#stopWatch li a:hover,#stopWatch li a.active{
  background:#5c2e6d;
  color:#ffffff ;
}
#secondDiv ul{
  display: inline-block;
  padding:0;
  margin:0;
  border:1px solid #cecece;
  list-style: none;
  border-radius: 5px;
}

#secondDiv li{
  display: inline-block;
}
#secondDiv li a{
  color:#5c2e6d ;
  cursor: pointer;
  border-right: 1px solid #cecece;
  padding: 2px 7px;

}
#secondDiv li a:hover,#secondDiv li a.active{
  background:#5c2e6d;
  color:#ffffff ;
}
#stopWatch img{
  width: 25px;
  cursor: pointer;
}
#stopWatch li:last-child a{
  border-right: none;
}
#stopWatch span{
  font-size: 22px;
  background:#5c2e6d;
  border-radius:8px;
  padding:5px 20px;
  color: #ffffff;
  margin-left: 5px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#numberScore{
  width: 25%;
  text-align: center;
  padding:5px 0;
  background:#f0f0f0;
  color: #595959;
  border: none;
  margin-left: 20%;
  margin-bottom: 10px;
  border-radius: 10px;
  font-size: 15px;

}
.homeInput {
  width: 70%;
  text-align: center;
  padding:10px 0;
  background:#ffff;
  margin: 0px auto 20px auto;
  border:none;
  border-radius: 10px;
  box-shadow: -2px 7px 21px 0px #e4e4e6;
  font-size: 18px;

}

.homeInput::placeholder{
  color: #b4b4b4 !important;
}

.homeButon button {
background:#5c2e6e;
  border-radius: 10px;
  padding:8px 30px;
  font-family: 'GothamPro-Bold';
  font-size: 15px;
  color: #fff;
  box-shadow: 1px 10px 10px #cec1d3;
  border:none;

}
.btn-primary{
  background-color:#5c2e6e !important;
  border-radius: 10px;
  padding:10px 25px;
  font-family: 'GothamPro-Bold';
  font-size: 18px;
  margin-bottom: 80px;
  color: #fff;
  box-shadow: 1px 10px 10px #cec1d3;
  border:none !important;
}
#frame-wrap .btn-primary{
  margin-bottom: 0px !important;
  border-radius: 0px !important;
  padding: 5px 25px !important;
  font-size: 15px !important;
  float: right;
}
#tabs{
  display: none;
  border: 1px solid #3d3d3d;
  background:#fefefe;
}
.header{
  padding: 20px 0 10px 0;
}
#firstDiv {
  padding-top: 20px;
  border: 1px solid #3d3d3d;
  background:#fefefe;
  text-align: center;
}


footer {
  background-color: #3c2f74;
  color: #fff;
  padding:10px;

}
footer a{
  background:#ffffff;
  border-radius: 100%;
  width: 35px;
  height: 35px;
  line-height: 35px;
margin-right: 10px;
  display: block;
  text-align: center;

}
footer i{
  color: #3c2f74;
}

footer img{
  width: 10%;
  float: left;
 margin-right: 20px;
}
#close{
  text-align: right;
  color: #5d2f6e;
margin:5px 10px 0 0;
  opacity: 1;
  font-size: 18px;
  font-weight: normal;
  line-height: inherit;
}
button:focus{
  outline: none;
  border:none;

}

#TeamScoring thead{
  display: none;
}

.e-grid tr.e-hover {
  background-color: transparent !important;
  color: #4d4d4d !important;
}
.e-grid{
  border-style:none none none none !important;
  font-family: "Gotham Pro" !important;
  font-size: 13px !important;
  color: #4d4d4d !important;
}
.e-grid .e-rowcell, .e-grid .e-indentcell{
  border:none !important;
  color: #4d4d4d;
}
#Grid .e-gridheader{
  border-bottom-color: #7f5a8c !important;
}
.e-grid .e-alt_row {
  background: #ffffff !important;
}
.e-table.e-hover .e-rowcell{
  color: #ffffff !important;
}
#TeamScoring  .e-gridheader{
  border: none !important;
}
#TeamScoring .e-rowcell:last-child{
  padding-left: 0;
  padding-right: 0;
}
#TeamScoring tr:first-child .e-rowcell:first-child div{
  background: #403f9c;
  color: #fff;
}
#TeamScoring tr:nth-child(2) .e-rowcell:first-child div{
  background: #70255c;
  color: #fff;
}
#TeamScoring tr:nth-child(3) .e-rowcell:first-child div{
  background: #a74250;
  color: #fff;
}
#TeamScoring tr:last-child .e-rowcell:first-child div{
  background:#d96436;
  color: #fff;
}

#TeamScoring tr .e-rowcell:first-child div{

  border:1px solid #f0f0f0 !important;
  border-radius: 6px;
  line-height: 30px;
}
#TeamScoring tr .e-rowcell:first-child div:last-child{
  background: #f0f0f0;
  color: #151515;
  border-radius: 0;
  margin-top: 2px;
}
#tableLead{
 width: 40%;
  text-align: center;
}
#tableLead h1{
  color: #3d3d3d;
  font-family: 'GothamPro-Bold' !important;
  font-size: 13px;
  padding: 0.6em;
  height: 42px;
  background: #fcfcfc;
  line-height: 25px;
  border-bottom:2px solid #ded5e2;
}
#tableLead ul{
  list-style: none;
  padding:0;
}
#tableLead ul li:first-child{
  /*padding-top:20px!important;*/
}
#tableLead ul li{
  padding: 0.8em 0.4em !important;
  font-family: 'GothamPro-Bold' !important;
 font-size: 13px !important;
  height: 31px;
}
.e-grid .e-rowcell{
  padding:0.2em !important;
}
.e-grid .e-rowcell button{
  border: none !important;
  background: transparent !important;
  color: #5c2e6d !important;
  border-radius: 10px;
  box-shadow:0px 0px 4px 0px #d5d2d2;
  width: 100%;
  font-family: 'GothamPro-Bold' !important;
  padding:0;
  margin-bottom: 5px;
  font-size: 18px!important;
  height: 30px;
}
.e-grid .e-rowcell button:focus,.e-grid .e-rowcell button:hover{
  background: #5c2e6d !important;
  color: #ffffff !important;
}
.e-grid td.e-active, .e-grid .e-form-titlebar {
  background-color: transparent;
  color: #4d4d4d;
}
.e-grid .e-headercell, .e-grid .e-grouptopleftcell {
  border:none !important;
  border-style: none none none none !important;

}

.e-grid .e-gridheader {
  border-top:none !important;
  border-bottom-width: 2px;
  border-bottom-color: #ded5e2;

}

#Grid .e-headercelldiv{
  font-size: 13px;
  color: #3d3d3d;
  font-family: 'GothamPro-Bold' !important;
  text-align: left !important;
}
#Grid .e-rowcell button{
  height: 22px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px #d5d2d2;
}
#Grid tr .e-rowcell {
  border-radius: 8px !important;
  padding: 0em !important;
  border: 5px solid #fff !important;
  border-top:none !important;
}
#Grid .e-rowcell:nth-child(3){

  border: 0!important;
}
.e-numeric .e-select:hover{
  background:transparent !important;
}
.e-input{
  text-align: center;
}
.e-numeric .e-active{
  background: rgba(97, 51, 116, 0.68) !important;
}
 #Grid tr .e-rowcell:nth-child(2) .e-field,#Grid tr .e-rowcell:nth-child(4) .e-field{
   background:#f0f0f0;
   box-shadow: none;
border:none;
 }
 #Grid .e-ul .e-hover{
  background: transparent !important;
   border-color: #3c2f73;
 }
.e-grid .e-rowcell.e-updatedtd.e-active {
  color: #4d4d4d;
}
.e-grid .e-updatedtd:before{
  display: none;
}
#leadee .e-icon{
  display: none;
}

.e-grid .e-headercellsort {
   padding-right: 0.5em;
}
.e-ddl .e-in-wrap,.e-select{
  border:none !important;
background:transparent  !important;
}
.e-tooltxt .e-icon.e-save:before{
   color: #5c2e6e !important;
}
#leadee .e-toolbar.e-toolbarspan{display: none !important}
.e-ddl.e-focus .e-in-wrap{
  box-shadow: none !important;
}
.e-ddl .e-select:hover, .e-ddl.e-rtl .e-select:hover {
  background:transparent !important;
}
#Grid tr .e-rowcell:nth-child(2){
  background:#f0f0f0;
}#Grid tr .e-rowcell:nth-child(4){
  background:#f0f0f0;
  color: #3c2f73;
   font-family: 'GothamPro-Bold' !important;
   font-size: 16px;
}

.modal-footer .redo{
  margin-top:30px;
}
#leadee .e-headercelldiv{
  color: #3d3d3d;
  font-family: 'GothamPro-Bold' !important;
  font-size: 13px;
}
#leadee .e-rowcell, #leadee .e-indentcell {
  border-bottom: 1px solid #f8f8f8 !important;
}
#leadee .e-rowcell {
  padding: 0.5em !important;
  text-align: center;
}
#leadee{
  padding: 0px 10px 0px 10px;
}
#leadee thead{
  margin-bottom: 20px;
}
#leadee tbody tr:first-child .e-rowcell{
  padding-top:20px !important;
}
#leadee tbody tr .e-rowcell:last-child{
  color: #3c2f73;
  font-family: 'GothamPro-Bold' !important;
  font-size: 17px;
}

#tableLead li:first-child{
  color: #e89e7f;
}#tableLead li:nth-child(2){
  color: #cb8372;
}#tableLead li:nth-child(3){
  color: #cd8186;
}#tableLead li:nth-child(4){
  color: #bb738a;
}#tableLead li:nth-child(5){
  color: #a6658f;
}#tableLead li:nth-child(6){
  color: #9d6292;
}#tableLead li:nth-child(7){
  color: #906197;
}#tableLead li:nth-child(8){
  color: #8a6098;
}#tableLead li:nth-child(9){
  color: #82609b;
}#tableLead li:nth-child(10){
  color: #7d5f9e;
}#tableLead li:nth-child(11){
  color: #725ea2;
}#tableLead li:nth-child(12){
  color: #695da6;
}#tableLead li:nth-child(13){
  color: #645aa6;
}#tableLead li:nth-child(14){
  color: #464699;
}#tableLead li:nth-child(15) {
  color: #26328e;
}#tableLead li:nth-child(16){
  color: #182980;
}
 .modal-content{
   border-radius: 1.3rem;
 }
 #Grid tr .e-rowcell:first-child{
   display: none;
 } #Grid  .e-headercell:first-child{
   display: none;
 }
.e-ddl-popup .e-active {
  background: #5c2e6d;
}
.e-ddl-popup .e-hover {
  background: #5c2e6d;
  color: #fff;
}
@media (max-width: 1200px) {
  .nav-tabs .nav-link{
    font-size: 13px;
  }
  p{
    font-size: 13px;
  }
}
  @media (max-width:992px) {

   .homeButon button{
     padding: 8px 18px;
     font-size: 12px;
   }
    .header{
      margin-bottom: 0;
    }
    #stopWatch li {
      padding: 3px 0;
    }
   .d-flex{
     display: inherit !important;
   }
   .btn-primary{
     width: 33%;
   }
   #leadee .d-flex{
     display: flex !important;
   }
   #frame-wrap,#mainrow{
     width: 100% !important;
     padding-left: 0;
   }
   #teamDiv{
     margin-top: 5%;
   }
    #stopWatch{
      font-size: 15px;
      width: 100%;
    }
   #timer{
     width: 100%;
     padding-top: 0;
     font-size: 15px;
   }
   #mainrow{
     margin-top: 33px;
   }
.footer img{
  display: inherit;
}
.footer input{
  width: 32%;
}
 }
@media (max-width:567px) {
  .homeButon button{
    font-size: 12px;
    padding: 8px 10px;
  }
  footer span{
    font-size: 12px;
  }
  footer img{
    margin-right: 0;
  }
  footer a{
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
  }
  h3{
    font-size: 16px;
  }
  .btn-primary{
    font-size: 12px;
    padding:10px 12px;
  }
  .homeInput{
    width: 100%;
  }
  .e-grid{
    font-size: 10px !important;
  }
  #Grid tr .e-rowcell:nth-child(4){
    font-size: 13px;
  }
  .e-grid .e-rowcell button{
    font-size: 15px !important;
  }
  .modal-footer button img{
    width: 15%;
  }
  #exampleModalLong .modal-body h3{
    width: 100%;
    left: 0;
    right: 0;
    top: -10px;
  }
  #leadee .e-headercelldiv{
    font-size: 14px;
  }
  #leadee h1{
    line-height: 23px;
    font-size: 14px;
  }
  #tableLead ul li {
    font-size: 12px !important;
  }
  #stopWatch ul{
    margin-right: 180px;
    margin-bottom: 10px;
  }
  #stopWatch {
    font-size: 13px;
  }
  #stopWatch span {
    font-size: 12px;
  }
  #timer{
    font-size: 13px;
  }
  #stopWatch li a {
    font-size: 13px;
  }
  #timer span {
    font-size: 12px;
  }
  #stopWatch img {
    width: 20px;
  }
}
@media (max-width: 420px) {
  #Grid .e-rowcell button{
    height: auto !important;
  }
}
@media (max-width:320px) {

  #stopWatch ul {
    margin-right: 80px;
  }
}
.popout {
  animation: popout 1s ease;
  -webkit-animation: popout 1s ease;
}
.popout2 {
  animation: popout 1s ease;
  -webkit-animation: popout 1s ease;
}
@keyframes popout {
  from{transform:scale(0)}
  80%{transform:scale(1.2)}
  to{transform:scale(1)}
}
@-webkit-keyframes popout {
  from{-webkit-transform:scale(0)}
  80%{-webkit-transform:scale(1.2)}
  to{-webkit-transform:scale(1)}
}