deltaVet-styleSheet.css

<style>
html {
       max-width:100% ;
           min-width:100%
      }
#pageBody {direction:rtl;
           font-size:17px;
           line-height:1.2;
          
  }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
  }
.rtl {direction:rtl}
.rTXT {text-align: right;}
.ltr {direction:rtl}
.lTXT {text-align: left;}
.width100{width:100%}
.rtl {direction:rtl}
.rTXT {text-align: right;}
.rightF {float:right}
h1 {font-size:280%;line-height:1.4}
h2 {font-size:200%;line-height:1.3}
h3 {font-size:150%;line-height:1.28}
.topnav li {
    font-size:190%;
    line-height:1.1
    }



input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 100%;
}

@media only screen and (max-width: 992px){
    * {direction:rtl;
     }
    #topnav li {
    font-size:220%;
    line-height:1.25
    }
    input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="checkbox"],
select,
button,
textarea {
  font-size: 160%;
}
    
    #pageBody {direction:rtl;
           font-size:150%;
           line-height:1.1;
    }
    /*TOPNAV*/
    /* Change the color of links on hover */
   .topnav li:hover {
    background-color: #ddd;
    color: black;
    cursor: pointer;
    }
   /* Add a color to the active/current link */
   .activeItem {
    background-color: #4CAF50;
    color: white;
   }
   #helloUser {float:left}
   /*AUTH DIALOG*/
   #eye {
   width:25px;
   height:20px;
   position:absolute;
   left:0 ;
   top: 5px;
   }
   #paswdwrapper{
   position:relative
   }
   /*SPINNER*/
   #spinner, #spinnerText {
   display: none;
   /*
   position: fixed;
   bottom: 40%;
   left: 50%;
   right: 40%;
   */
   z-index: 4;
   }
   #spinnerText {
  top: 55%;
  text-align: center;
  width: 20vh;
  height: 10vh;
   }
  #spinner {
    /*top: 40%;
    */
    transform: translate(-40%, -50%);
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 8vh;
    height: 8vh;
    animation: spin 1s  infinite;
    }

   .w3-table td, .w3-table th, .w3-table-all td, .w3-table-all th {text-align:right !important} 
   .w3-table th:first-child, .w3-table td:first-child, .w3-table-all th:first-child, .w3-table-all td:first-child {
    padding-left: 0px;
    padding-right: 16px;
   }
   
   button {
        cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 10px;
    }
   .w3-mobile {
             width:100% !important;
             position : relative !important;
             text-align: center !important}
    .fixed-info, .responsive-table tr:first-child {
           margin-right:0px !important;
           margin-top  :16px !important 
           } 
    .w3-select {
              margin-right:0px !important;
              margin-top  :16px !important;
              }
    .responsive-table,.responsive-table thead,.responsive-table tbody, .responsive-table tr {
              display: block !important}
              
    .responsive-table td, .responsive-table th{
            display: block !important;
			border-bottom: none; 
			position: relative !important;
            text-align: center !important ;
            }
    .responsive-table td *, .responsive-table tr  * {
                          width:100%;
                          text-align: center !important ;
                           }
    .responsive-table tr   {
             border-bottom:1px solid #eee;
             border-top:1px solid #eee;
             }
    .hide-head thead th , .hide-head thead td {
             display:none !important
    }
        
    #spinner {
            transform: translate(-40%, -50%);
            border: 5px solid #f3f3f3;
            border-radius: 94%;
            border-top: 5px solid #3498db;
            width: 8vh;
    height: 8vh;
            animation: spin 1s infinite
     }
    /* Force table to not be like tables anymore */
    #requestsSalesTable tbody{
          border-top: 10px solid #ccc !important;
          margin-top:30px !important 
    }
    #chooseTheClientSel, #clientName {
        margin-right:0px !important;
        margin-top  :16px !important
    }
    #clientstbody-1 td input, #clientstbody-2 td input, #clientstbody-3 td input {
        width:80% 
    }
    #address input, #address select {
         padding:2px                                 
    }
    #transactionPage select, #transactionPage input {
           margin-right:0px !important;
           margin-top  :16px !important 
    } 
}


@media only screen and (min-width: 992px){
    * {direction:rtl;
      
     }
    .hideLarge {
        display:none
        }
    #pageBody {direction:rtl;
           font-size:110%px;
           line-height:1.15;
     }
    /*TOPNAV*/
    /* Change the color of links on hover */
    .topnav li {
    font-size:110%;
    line-height:1.25
    }
    .topnav li:hover {
    background-color: #ddd;
    color: black;
    cursor: pointer;
    }
    /* Add a color to the active/current link */
    .activeItem {
    background-color: #4CAF50;
    color: white;
    }
   #helloUser {float:left}
   /*AUTH DIALOG*/
   #eye {
   width:25px;
   height:20px;
   position:absolute;
   left:0 ;
   top: 5px;
   }
   #paswdwrapper{
   position:relative
   }
   /*SPINNER*/
   #spinner, #spinnerText {
   display: none;
   /*
   position: fixed;
   bottom: 40%;
   left: 50%;
   right: 40%;
   */
   z-index: 4;
   }
   #spinnerText {
    top: 55%;
    text-align: center;
    width: 20vh;
    height: 10vh;
   }
   #spinner {
    /*top: 40%;*/
    transform: translate(-40%, -50%);
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 8vh;
    height: 8vh;
    animation: spin 1s  infinite;
   }


  .w3-table td, .w3-table th, .w3-table-all td, .w3-table-all th {
      text-align:right !important
   } 
  .w3-table th:first-child, .w3-table td:first-child, .w3-table-all th:first-child, .w3-table-all td:first-child {
    padding-left: 0px;
    padding-right: 16px;
   }
   button {
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 10px;
    font-size:150%
    }
       
}

</style>