:root {
    --main-color: #1A1A19;
    --text-color: #F6FCDF;
    --color: #859F3D;

    --main-color: #243642;
    --text-color: #E2F1E7;
    --color: #629584;

    --main-color: #1E201E;
    --text-color: #ECDFCC;
    --color: #697565;

    --main-color: #222831;
    --text-color: #EEEEEE;
    --color: #76ABAE;

    --main-color: #0F0F0F;
    --text-color: #EEEEEE;
    --color: #76ABAE;
    --active-border: #00f1ff;

    --color: #464c52; /* muted border */
    --text-color: #babec8; /* light text */
    --main-color: #0d1015;
    --active-border: #067e96; /* info-like active color */
}

body {
    display: flex;

    width: 100vw;
    height: 100vh;

    background: var(--main-color);
    color: var(--text-color);

    margin: 0;
    padding: 0;

    font-size: 10px;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;

    width: 100%;

    margin: 0;
    padding: 8px 5px;
}

.main_content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
}


















.block {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}

.flowers {
    display: none;
}

.btn {
    font-size: 0.7rem;
    margin: 4px 0;
}

.main_logo {
    width: 17rem;
    fill:#629584;
}

.menu_button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 30px;
    height: 27px;
    
    transition: transform 0.3s ease-in-out;
}

.menu_button:active {
    transform: rotate(-90deg);
}

.main_button {
    background-color: #212529; /* bg-dark */
    border: 1px solid #6c757d; /* border-secondary */
    border-radius: 0.75rem; /* rounded-3 */
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.075); /* shadow-sm */
    height: 50px;
    width: 33%;
    color: rgb(240, 240, 240);
}

.line {
    display: flex;

    height: 15%;
    width: 100%;

    border-radius: 10px;

    background-color: var(--color);
}

.form-inline {
    display: flex;
    height: 40px;
    margin: 10px 0;
}

.form-inline input {
    height: auto;
    background-color: transparent;
    color: var();
    border: var(--text-color) 1px solid;
}

.order {
    display: flex;
    flex-direction: column;
    justify-content: start;

    margin: 0;
    padding: 10px 10px;
    gap: 4px;

    border: #3c3d41 1px solid;
    border-radius: .5rem;

    transition: 0.3s ease-in-out;
    font-size: 0.73rem;

}

.order:active {
    color: var(--text-color);
    transform: scale(1.02);
}

.order.hidden {
    opacity: 0;
    transform: scale(0.75);
}

.order_1str {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.order_2str {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.form-control {
    border: var(--color) 1px solid;
    background-color: var(--main-color);
    color: var(--text-color);
}

.form-control:focus {
    background-color: var(--main-color);
    color: var(--text-color);
}

.features {
    color: var(--text-color);
}

.order_long div {
    display: flex;
    gap: 4px;
}









.tg-list-item {
    display: flex;
	margin: 10px 0;
    gap: 10px;
}

.tgl {
	display: none;
  
	&,
  &:after,
  &:before,
	& *,
  & *:after,
  & *:before,
	& + .tgl-btn {
		box-sizing: border-box;
		&::selection {
			background: none;
		}
	}
  
	+ .tgl-btn {
		outline: 0;
		display: block;
		width: 44px;
		height: 22px;
		position: relative;
		cursor: pointer;
    user-select: none;
		&:after,
    &:before {
			position: relative;
			display: block;
			content: "";
			width: 50%;
			height: 100%;
		}
    
		&:after {
			left: 0;
		}
    
		&:before {
			display: none;
		}
	}
  
	&:checked + .tgl-btn:after {
		left: 50%;
	}
}

.tgl-ios {
	+ .tgl-btn {
		background: #fbfbfb;
		border-radius: 2em;
		padding: 2px;
		transition: all .4s ease;
		border: 1px solid var(--color);
		&:after {
			border-radius: 2em;
			background: var(--color);
			transition:
        left .3s cubic-bezier(
          0.175, 0.885, 0.320, 1.275
        ),
        padding .3s ease, margin .3s ease;
			box-shadow:
        0 0 0 1px rgba(0,0,0,.1),
        0 4px 0 rgba(0,0,0,.08);
		}
    
    &:hover:after {
      will-change: padding;
    }
    
		&:active {
			box-shadow: inset 0 0 0 2em #e8eae9;
			&:after {
				padding-right: .8em;
			}
		}
	}
  
	&:checked + .tgl-btn {
    background: rgb(50, 167, 50);
    &:active {
      box-shadow: none;
      &:after {
        margin-left: -.8em;
      }
    }
    &:after {
        background: var(--text-color);
      }
	}
}