/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

a {
  text-decoration: none;

 /* :hover {
  	cursor: pointer;
	}*/
}

body {
	/*background-color: whitesmoke;*/
	/*background-color: gainsboro;*/
	/*background-color: #E6E6FA;*/
	/*background-color: #FFDBC9;*/
	background-color: #f5f5f5;
}


a.action {
        font-weight: normal;
        background-color: blue;
        color: white;
        text-decoration: none;
}

table.ingredient {
	border-collapse: collapse;
	border: solid 2px orange;
/*	table-layout: fixed;*/

	th {
		/*border: solid 1px black;*/
		border: dashed 1px orange;
		color: #FF9800;
  		background: #fff5e5;
		/*padding:10px 20px;*/
		padding: 3px 10px;
	}
	 td {
		border: dashed 1px orange;
  		background: white;
		/*padding: 10px 20px;*/
		padding: 3px 10px; 
	}
}


form.registration-form {
  font-size: 20px;
  /*width: fit-content;*/
  width: 500px;
  padding: 20px;
  background: lightyellow;
  border-radius: 15px;

	h2 {
	  grid-column: span 2;
	}

	label {
		float: left;
	}
/*
	input:not([type='checkbox']) {
	  width: 100%;
  	}

	textarea {
	  width: 100%;
	}
	*/
}


.btn-1 {
  background-color: #2f4f4f;
  color: #fff;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
}
.btn-1:hover {
  color: #fff;
  opacity: 0.8;
}

.btn-2 {
  background-color: navy;
  color: white;
  font-weight: normal;
  padding: 0px 10px;
  text-decoration: none;
  font-size: 14px;
}

.side-by-side {
  display: flex;
  justify-content: start;

  .direct-virtical { 
  	/*margin: 10px;*/ 
  	display: flex;
	flex: auto;
	flex-direction: column;
	} 
} 


.tbox-str {
  height: 30px;
  padding-left: 8px;
}

.tbox-text {
	padding:8px;
	vertical-align:top;
	/*width: 400px;
	height: 100px;
  field-sizing: content;
  min-width: 150px;
  max-width: 300px;
  min-height: min-content;
  */
}

.tbox-amount {
  text-align: right;
  height: 30px;
  font-size: 16px;
  font-weight: bold;
  width: 100px;
  margin-left:  2px;
  margin-right: 5px;
  background-color: #FFFFF0;
}

.tbox-select{
  height: 30px;
  width: 200px;
  padding-left: 8px;
}


#modal::backdrop { background: rgba(0,0,0,0.5); }