@media only screen and (orientation: landscape) {
  body{ background-color: black;}
}

@media only screen and (orientation: portrait) {
  body{ background-color: #1258DC;}
}

/* For desktop: */
@media only screen and (min-width: 768px) {
  .biggerFont{ 
    font-size: 0.75rem; 
  }

  .pageWrapper{ 
    display: flex; 
    flex-direction: row; 
    text-align: center;
  }

  .scrWrp{
    width: 45%;
  }

  .scr_lbl{ 
    color:  #ffffff;
    font-weight: bold;
  }

  .sb{ 
    color:  #ffffff;
    font-weight: bold;
    text-align: center;
    font-size: 1.2rem;
    border: 3px solid red;
  }

  .numpadWrp{ 
    height: 60%; 
    width: 100%; 
    z-index: 99; 
  }

    .numpadWrp span{ 
      color: #ffffff;
      width: 100%;
      text-align: center;
    }

    .numpadWrp tr{
      width: 100%;
    }
      
    .numpadWrp td{
      text-align: center;
    }

      .np{
        width: 25%;
      } 
        
      .numpad_button{ 
        height: 100%; 
        width: 100%; 
      }

      .sb{
        font-size: 1.3rem;
      }

    .dbWrp{ 
      width: 55%; 
    }
 
      #mySVGdartBoard{ 
        width: 500px; 
        height: 500;
        margin-right: 0;
      }

    .finBtnWrp{ 
      display: none; 
    }

    #msgCenter{
      display: flex; 
      color: aliceblue;
      flex-direction: column;
    }

    #finTable{
      width: 50%;
      color: yellow !important;
/*      display: none;  */
    }
}


/* specific styling for devices */


/* > 768 X 1024 L  large monitors */

@media only screen 
and (min-device-width : 1025px) 
and (orientation : landscape) {

  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

}

/* > 768 X 1024 P  large monitors */

@media only screen 
and (min-device-width : 1025px) 
and (orientation : portrait) {

  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}


}


/* 768 X 1024 L  iPad */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

  #mySVGdartBoard{ width: 100%;  }

}

/* 768 X 1024 P iPad */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 

  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

  #mySVGdartBoard{ width: 100%;  }

}


/* 375 X 812 L  iPhoneX */

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { 

  #mySVGdartBoard{ width: 100%;  }

}

/* 375 X 812 P  iPhoneX */

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) { 

  #mySVGdartBoard{ width: 100%;  }

}



/* 375 X 667 L ( Iphone 6-7-8 ) */

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 

  #mySVGdartBoard{ width: 100%;  }

}

/* 375 X 667 P ( Iphone 6-7-8 ) */

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { 

  #mySVGdartBoard{ width: 100%;  }

}


/* 320 X 568 L  ( Iphone 5-5S ) */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 

  #mySVGdartBoard{ width: 100%;  }

}


/* 320 X 568 P ( Iphone 5-5S ) */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 

  #mySVGdartBoard{ width: 100%;  }

}


/* 480 X 320 L ( Iphone 2G, 3G, 4, 4S ) */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { 

  .biggerFont{ 
    font-size: 0.75rem; 
  }

  .pageWrapper{ 
    display: flex; 
    flex-direction: row; 
    text-align: center;
  }

  .scrWrp{
    width: 45%;
  }

  .scr_lbl{ 
    color:  #ffffff;
    font-weight: bold;
  }

  .sb{ 
    color:  #ffffff;
    font-weight: bold;
    text-align: center;
    font-size: 1.2rem;
    border: 3px solid red;
  }

  .numpadWrp{ 
    height: 60%; 
    width: 100%; 
    z-index: 99; 
  }

    .numpadWrp span{ 
      color: #ffffff;
      width: 100%;
      text-align: center;
    }

    .numpadWrp tr{
      width: 100%;
    }
      
    .numpadWrp td{
      text-align: center;
    }

      .np{
        width: 25%;
      } 
        
      .numpad_button{ 
        height: 100%; 
        width: 100%; 
      }

      .sb{
        font-size: 1.3rem;
      }

    .dbWrp{ 
      width: 55%; 
    }
 
      #mySVGdartBoard{ 
        width: 280px; 
        height: 280px;
        margin-right: 0;
      }

    .finBtnWrp{ 
      display: none; 
    }

    #msgCenter{
      display: none; 
    }

    #finTable{
      width: 50%;
      color: yellow !important;
/*      display: none;  */
    }

}

 
/* 320 X 480 Portrait  ( Iphone 2G, 3G, 4, 4S ) */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { 

  .biggerFont{ 
    font-size: 0.75rem; 
  }

  .pageWrapper{ 
    display: flex; 
    flex-direction: column; 
    text-align: center;
  }

  .scr_lbl{ 
    color:  #ffffff;
    font-weight: bold;
  }

  .sb{ 
    color:  #ffffff;
    font-weight: bold;
    text-align: center;
    font-size: 1.2rem;
    border: 3px solid red;
  }

  .numpadWrp{ 
    height: 60%; 
    width: 100%; 
    z-index: 99; 
  }

    .numpadWrp span{ 
      color: #ffffff;
      width: 100%;
      text-align: center;
    }

    .numpadWrp tr{
      width: 100%;
    }
      
    .numpadWrp td{
      text-align: center;
    }

      .np{
        width: 25%;
      } 
        
      .numpad_button{ 
        height: 100%; 
        width: 100%; 
      }

      .sb{
        font-size: 1.3rem;
      }

    .dbWrp{ 
      width: 100%; 
    }
 
      #mySVGdartBoard{ 
        width: 310px; 
        height: 310px;
      }

    .finBtnWrp{ 
      display: none; 
    }

    #msgCenter{
      display: none; 
    }

    #finTable{
      display: flex; 
    }

}

/*
The order in the HTML
  class="pageWrapper"

  class="scrWrp"
    class="inpWrp"
      class="lblSB"
      class="sb biggerFont col-s-2"

    class="numpadWrp"
      class="numpad_top"
      class="numpad_mddl"
      class="numpad_bttm"
      class="numpad_bttm"

  class="dbWrp"
    id="mySVGdartBoard"
  
  class="finBtnWrp"
    id="btnFinLstAll"
    id="btnFinLstFav"
  
    id="msgCenter"
    id="finTable"
*/