* {
  box-sizing: border-box;
}
html {
  border: 0;
  margin: 0;
  padding: 0;
	}
body {
  margin: 0;
  padding: 0;
  border: 0px;
  font-weight: 400;
  font-size:5vw;
  background-color: #EEEFF4;
}
body,
html,
.App,
.vertical-center {
  font-size:4vw;
  width: 100%;
  height: 100%;
}
.navbar {
  background: #1833FF !important;
  width: 100%; // vw; 
}

.btn-outline-primary {
  border-color: #1833FF;
  color: #1833FF;
}
.btn-outline-primary:hover {
  background-color: #1833FF;
  color: #ffffff;
}
.logout-btn {
 -webkit-appearance:none;
 -webkit-border-radius:0px;
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 3vw;
}
.vertical-center {
  display: flex;
  text-align: left;
  justify-content: center;
  flex-direction: column;
}
.vertical-center .form-control:focus {
  border-color: #2554FF;
  box-shadow: none;
}
.vertical-center h3 {
  text-align: center;
  margin: 0;
  line-height: 1;
  padding-bottom: 20px;
}
        
label {
  font-weight: 500;
  font-size:5vw;
}

@media (orientation: landscape) {

body {
  margin: 0;
  padding: 0;
  border: 0px;
  font-weight: 400;
  font-size:3vh;
  background-color: #EEEFF4;
}

label {
  font-size:3vh;
}

.btn-outline-primary {
  border-color: #1833FF;
  color: #1833FF;
  font-size: 3vh;
}

.inner-block {
  width: 60vw;
  font-size:2vh;
  margin: auto;
  background: #ffffff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 40px 55px 45px 55px;
  transition: all .5s;
  border-radius: 20px;
}

.onlyinportrait {
	display:none;
	}        

table {
  font-family: Arial, Helvetica, sans-serif;
  height:auto;
  font-size:5vh;
  border-collapse: collapse;
  width: 100%;
}

img {
        height: 5vw;
        /*** width: 5vw; ***/
    }    

input[type=button], input[type=submit], input[type=reset] {
 -webkit-appearance:none;
 -webkit-border-radius:0px;
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 1vh;
/***  padding: 16px 32px; ***/
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 3vh;
}    

input[type=text], input[type=url], input[type=email] {
  font-size: 4vh;
  width: 100%;
  -webkit-appearance:none;
}

textarea {
  font-size: 4vh;
  width: 100%;
  -webkit-appearance:none;
}

input[type=disabled] {
 -webkit-appearance:none;
 -webkit-border-radius:0px;
  background-color: grey;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 3vh;
}

input[type="datetime-local"] {
  font-size: 4vh;
  width: 100%;
  -webkit-appearance:none;
}

select {
 font-size: 4vh;
 width: 95%;
 -webkit-appearance:none;
}

input[type="checkbox"] {
 width: 5vh; 
 height: 5vh;
}

}

@media (orientation: portrait) {

.inner-block {
  width: 70vw;
  font-size:4vh;
  margin: auto;
  background: #ffffff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 40px 55px 45px 55px;
  transition: all .5s;
  border-radius: 20px;
}

table {
  font-family: Arial, Helvetica, sans-serif;
  font-size:5vw;
  border-collapse: collapse;
  width: 100%;
}

img {
        height: 13vw;
        /*** width: 13vw; ***/
    }

input[type=button], input[type=submit], input[type=reset] {
 -webkit-appearance:none;
 -webkit-border-radius:0px;
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 1vw;  
/***  padding: 16px 32px; ***/
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 3vw;
}

input[type=text], input[type=url], input[type=email] {
  font-size: 4vw;
  width: 100%;
  -webkit-appearance:none;
}

textarea {
  font-size: 4vw;
  width: 100%;
  -webkit-appearance:none;
}

input[type=disabled] {
 -webkit-appearance:none;
 -webkit-border-radius:0px;
  background-color: grey;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 3vw;
}

input[type="datetime-local"] {
  font-size: 4vw;
  width: 100%;
  -webkit-appearance:none;
}

select {
 font-size: 4vw;
 width: 95%;
 -webkit-appearance:none;
}
    
input[type="checkbox"] {
 width: 10vw; 
 height: 10vw;
}
    
}

table td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

table tr:nth-child(even){background-color: #f2f2f2;}

table tr:hover {background-color: #ddd;}

table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #1833FF;
  color: white;
}

form { 
	margin-bottom: 0; 
}


/* The switch - the box around the slider */
/* Source : https://www.w3schools.com/howto/howto_css_switch.asp */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
} 


/* Vibration effects */
/* Source : https://unused-css.com/blog/css-shake-animation/ */
span {
  display: inline-block;
}

span.strong-hover-shake:hover {
  animation: tilt-shaking 0.15s infinite;
}

span.gentle-hover-shake:hover {
  animation: tilt-shaking 0.25s infinite;
}

span.gentle-tilt-move-shake:hover {
  animation: tilt-n-move-shaking 0.25s infinite;
}

span.strong-tilt-move-shake:hover {
  animation: tilt-n-move-shaking 0.15s infinite;
}

span.constant-tilt-shake {
  animation: tilt-shaking 0.3s infinite;
}

span.vertical-shake {
  animation: vertical-shaking 0.35s infinite;
}

span.horizontal-shake {
  animation: horizontal-shaking 0.35s infinite;
}

span.rise-shake {
  animation: jump-shaking 0.83s infinite;
}

span.skew-shake-x {
  animation: skew-x-shake 1.3s infinite;
}

span.skew-shake-y {
  animation: skew-y-shake 1.3s infinite;
}

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes vertical-shaking {
  0% { transform: translateY(0) }
  25% { transform: translateY(5px) }
  50% { transform: translateY(-5px) }
  75% { transform: translateY(5px) }
  100% { transform: translateY(0) }
}

@keyframes horizontal-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateX(5px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
  100% { transform: translateX(0) }
}

@keyframes jump-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateY(-9px) }
  35% { transform: translateY(-9px) rotate(17deg) }
  55% { transform: translateY(-9px) rotate(-17deg) }
  65% { transform: translateY(-9px) rotate(17deg) }
  75% { transform: translateY(-9px) rotate(-17deg) }
  100% { transform: translateY(0) rotate(0) }
}

@keyframes skew-x-shake {
  0% { transform: skewX(-15deg); }
  5% { transform: skewX(15deg); }
  10% { transform: skewX(-15deg); }
  15% { transform: skewX(15deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}

@keyframes skew-y-shake {
  0% { transform: skewY(-15deg); }
  5% { transform: skewY(15deg); }
  10% { transform: skewY(-15deg); }
  15% { transform: skewY(15deg); }
  20% { transform: skewY(0deg); }
  100% { transform: skewY(0deg); }  
}