table td {
    font-size: 10pt; padding: 5px 10px !important; vertical-align: middle !important;
}

table tr.grey-shade td {
    background-color: rgba(0, 0, 0, 0.05); font-size: 12pt; border-bottom: 2px solid #aaa;
}

table th {
    font-size: 11pt; padding: 5px 10px !important; vertical-align: middle !important;
}

input::placeholder {
    color: #ccc !important;
}

label.error {color: red; float: left; width: 100%; margin: 10px 0;}

.thead-dark tr th {border: none !important;}
.add-button {filter: grayscale(100); opacity: 0.5; cursor: pointer;}
.add-button:hover {filter: grayscale(0); opacity: 0.5;}
.add-button.active {filter: grayscale(0); opacity: 1;}

.flag {opacity: 0.5;}
.flag {margin-right: 5px;}
.flag:hover, .flag.active {opacity: 1;}



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

    body {width: 100%; float: left;}
    input.sidedish-input {width: 80px !important;}
    .btn-primary {width: 100% !important; max-width: 100% !important; margin: 10px 0;}
    input[type='number'] {
        width: 40px !important;
    }
	

 }