body
{
background-image: url("https://wallpapercave.com/wp/wp2742495.jpg");
/* background-color: #303030;    */
font-size:14px;
    text-align: center;
    /* display: flex;
    justify-content: center;
    justify-items: center;
    flex-direction: column; */
            /* max-width: 384px; */
    /* background-color:#f8f9fa;
    background-color:#ccccff; */
}
* {
  font-family: "noto_sansregular"!important;
  font-family: 'Nunito' !important;
}
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: mediumseagreen; 
  border-radius: 10px;
}

/* Handle on hover */
/* ::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
} */

td:nth-child(1) {
  font-weight: 500;
  font-size: 1rem;
}
.nope{
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  /* color: white; */
  text-align: center;
    /* background: #1abc9c; */
    /* color: white; */
    /* font-size: 30px; */
  overflow: auto;
 background-color: #282A35;
 }
#Dev{
  position: sticky;
  margin-left: 2%;
  float: left;
  color:#f1f1f1;
  font-family: BlinkMac System Font,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}
#iop{
  position: sticky;
  margin-right: 13%;
  float: right; 
  color:#f1f1f1;;
  font-family: BlinkMac System Font,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}
#img{
  position: sticky;
  float: right;
  top: 20%;
  left: 89%; 
}
.foot {
  
  background-color:green;
  position:fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
}
/* .nope {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
} */
 table
    {
      padding-top: 10%;
      background-color: #505050;
      border-radius: 5px;
      box-shadow: 0 5px 25px #242424;
      /* color: #fff; */
      font-family: Itim;
      margin-top: 10px;
      overflow: hidden;
      text-align: center;
      width: 100%;
  
      /* border-style:ridge; */
      display: flex;
      justify-content: center;
      border-color:#fff!important;
      vertical-align: middle;
      margin-left: 8%;
      margin-right: 8%;
      margin-top: 4%;
      padding: 5%;
      width:min-content;
      /* overflow-x:auto;
      overflow-y:auto;        */
   
     
      /* scrollbar-width: auto; */
      /* max-height:400px; */
      table-layout: scroll-behavior;   
                /* display: inline-block;
                display: -moz-inline-box;
      
      table-layout: scroll-behavior;    */
     
      
    }
    
    .new
    {
      display: flex;
      justify-content: center;
    
      /* float: left; */
     }
 
    /* .new1
    {
      float: right;
     } */
     /* .tabover
     {
      display: flex;
    justify-content: center;
     } */
     /* .opop{
      margin-right:3%; */
      /* padding:10px 80px 10px 80px ; */
      /* Color:#007bff;
      border-style:inset; */
     /* left:25%; */
     /* display:inline-block;
     position:responsive; */
     /* left:25%; */
/*      
     font-size:30px;
     
     border-radius:20px;
     } */
     /* .opop1{ */
      /* margin-left:10px; */
      /* border-radius:20px;
      border-style:outset;
      Color:#007bff;
      padding:5% 8% 5% 8% ;
     
      display:inline-block;
      position:responsive;
      right:25%; 
      font-size:10%;
  } */
   figcaption {
    display:flex;
    position:vertical-align;
      font-weight: bold;
      font-size: 24px;
      color: #333;
    }
    tr:nth-child(even) {
      background-color: #B2EBF2;
    }
    
    tr:nth-child(odd) {
    background-color:#E7E9EB;

    }
    tr:nth-child(1) {
      background-color:khaki;
    }
    
    tr:hover {
      /* background-color:grey; */
      /* background-color: #505050; */
      border-radius: 5px;
      box-shadow: 0 5px 25px 25px lightblue;
      /* color: #fff; */
      font-family: Itim;
      margin-top: 10px;
      /* overflow: hidden; */
      text-align: center;
      /* width: 100%; */
      }
    table, th, td{
      
      /* border-bottom: 1px solid #ddd; */
      font-family: verdana,arial,sans-serif;
      /* margin: 4px;             */
   		padding: 10px;
  		border-spacing: 15px;
      align-items: center;
      border-collapse:collapse;
      width: fit-content;
      /* overflow-x:auto;
      overflow-y:auto;        */
   
      /* table-layout: scroll-behavior;    */
  }
        .topnav {
         /* color: #00ddd4; */
            position:responsive;
            display: inline-block;
            padding: 10px 10px 6px 10px;
            height: fit-content;
            /* width: 100%; */
            margin-top:4%; 
            white-space: nowrap;
            background-color: #26C6DA;
            overflow-x:auto;
            /* overflow-y:auto;        */
          
            /* scroll-behavior: auto; */
            }
          
          .topnav a {
            color:#007bff;
            /* white-space: nowrap;     */
                align-items: center;
                display: inline-block;
                display: -moz-inline-box;
                /* *display: inline;  */
                /* zoom: 1;  */
                width:fit-content;
                /* width: 10%; */
                text-align: center;
                color: #f2f2f2;
                padding: 15px 15px; 
                text-decoration: none;
                font-size: 17px; 
                /* overflow: hidden; */
                overflow-x:auto;
                /* overflow-y:auto;        */
              
              }
              .spinner-border {
                font-family: 'Ubuntu', sans-serif;
    font-family: 'Anuphan', sans-serif;
    font-family: 'Poppins', sans-serif;
                color:antiquewhite;
                display: inline-block;
                width: 2rem;
                height: 2rem;
                vertical-align: -.125em;
                border: .25em solid currentColor;
                border-right-color: transparent;
                border-radius: 50%;
                -webkit-animation: .75s linear infinite spinner-border;
                animation: .75s linear infinite spinner-border;
              }
              .only{
                font-family: 'Ubuntu', sans-serif;
                font-family: 'Anuphan', sans-serif;
                font-family: 'Poppins', sans-serif;
                /* margin: 20%; */
                font-size: large;
              }
              @keyframes spinner-border{
                100% {
                  transform: rotate(360deg);
              }
              }
              
              th {
                position: sticky;
                background-color: khaki;
                z-index: 2;
                top: 0;
              }
          .topnav a:hover {
            background-color: #ddd;
            cursor: pointer;
            color: black;
          }
          
          .topnav .icon {
            display: none;
            /* cursor: pointer; */
          }
          .tabover{
            /* float: left; */
            display: flex;
			justify-content: center;
			
            /* position: sticky; */
/* position: respon; */
          }
      
          @media screen and (max-width: 950px) {

body{
  zoom: 0.9;
  width: 385px;
}
.topnav{
  width: 365px;
  margin-right: 2%;
}

             #img{
              display: none;
               }
            #iop{
              display: none;
              /* visibility: hidden; */
            }
            .topnav{
              display:block;
            }
            table{
              float: left;
              /* display: ; */
             width: screen;
             overflow-x: scroll;
             margin-right: 1%;
             margin-left: 1%;
             border-collapse: collapse;
            /* overflow-anchor:auto;
            overscroll-behavior:inherit; */
            }
            
            th {
              position: sticky;
              border-collapse: collapse;
              background-color: khaki;
              z-index: 2;
              top: 0;
            }
            table th td {
              display: block;
              width: min-content;
              padding:2px;
              	border-spacing: 5px;
                overflow-x: scroll;
              border-collapse: collapse;
            }
            
/* td:nth-child(1) {
  font-weight: 500;
  font-size: 1rem;
} */
            .nope{
              width:screen
            }
            .table {
              float: left;
              position: sticky;
              top: 0;
              width: 100%;
          }
          .tabover{
            float: left;
            /* display: flex;
			justify-content: center; */
			
            /* position: sticky; */
/* position: respon; */
          }
          }