/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {

}


/* Smartphones (portrait and landscape) ----------- 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.table-responsive {
    font-size:18px !important;
    background-color: yellow;  
    } 
}*/
  
 
/* Smartphones (landscape) -----------  working 100% on iphone 14 proMax landscape */
@media only screen and (min-width : 321px) {

.table-responsive {
    font-size:12px !important;
    background-color: red;  
	margin-left: auto;
    margin-right: auto;
    }
 
 
    
.form-select{
  width:90px !important;  
}

.btn-save{
  width: 70px !important;
}

#container {
 /* 
font-family: Questrial;
font-size: 20px;
padding: 100px; */
height: 150px;
width: 90%;
border: 1px solid #000;
background-color: lightblue;
margin:0 auto;
display:block;
}

#A { float:right; display:block; margin:10px; padding:0; width:300px  !important; }
#B { float:right; display:block; margin:10px 0; padding:0; width:300px !important; }
#C { float:right; display:block; margin:10px; padding:0; width:300px  !important; }
#D { float:right; display:block; margin:10px 0; padding:0; width:300px !important; }
#btn-save { float:right; display:block; margin:10px; padding:0; width:300px  !important; }
 

}
 
 
 
 
 
/* Smartphones (portrait) ----------- working 100% on iphone 14 proMax portrait */
@media only screen and (max-width : 499px) {

.table-responsive {
    font-size:10px !important;
    background-color: white;  
	margin-left: auto;
  margin-right: auto;
    }
 
 
    
#container {
 /* 
font-family: Questrial;
font-size: 20px;
padding: 100px; */
height: 75px;
width: 90%;
border: 1px solid #000;
background-color: lightblue;
margin:0 auto;
display:block;
}

#A { float:right; display:block; margin:10px; padding:0; width:200px; }
#B { float:right; display:block; margin:10px 0; padding:0; width:200px;}
#btn-save { float:right; display:block; margin:10px; padding:0; width:200px;}
 
}
 
 
 
 
 
 
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

.table-responsive {
    font-size:18px !important;
    background-color: green  !important;  
	margin-left: auto;
  margin-right: auto;
    }
}
 
/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

.table-responsive {
    font-size:18px !important;
    background-color: pink !important;  
margin-left: auto;
  margin-right: auto;	
    }
}
 
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

.table-responsive {
    font-size:18px !important;
    background-color: purple !important ;  
margin-left: auto;
  margin-right: auto;	
    }
}
 
/* Desktops and laptops -----------  working 100% on laptop 14" landscape*/
@media only screen 
and (min-width : 1224px) {

.table-responsive {
    font-size:22px !important;
    background-color: grey !important;
	margin-left: auto;
  margin-right: auto;
    }
    
select {
    width: 10rem;
    background-color: #c3f0c6;
    border: #b2eeac 2px solid;
}

select>option {
    background-color: #EEEEEE;
}

option {
    font-size: 16px;
    background-color: #ffffff;
}

option:before {
    content: ">";
    font-size: 16px;
    display: none;
    padding-right: 10px;
    padding-left: 5px;
 }

option:hover:before {
    display: inline;
}

#container {
 /* 
font-family: Questrial;
font-size: 20px;
padding: 100px; */
height: 75px;
width: 90%;
border: 1px solid #000;
background-color: lightblue;
margin:0 auto;
display:block;
}

#A {   float:right; display:block; margin:10px; padding:0; width:200px; }
#B {  float:right; display:block; margin:10px 0; padding:0; width:200px;}
#btn-save { float:right; display:block; margin:10px; padding:0; width:200px;}

  

}
 
 
 
 
 
 
/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {

.table-responsive {
    font-size:22px !important;
    background-color: blue !important; 
	margin-left: auto;
  margin-right: auto;
    }
}