/* Create three unequal columns that floats next to each other */
:root {
  --container-text-color: #111;
}

.column_left {
  float: left;
  width: 15%;
  padding: 2px;
  display: table-cell; 
}

.column_middle {
  float: left;
  width: 69%;
  padding: 2px;
  display: table-cell; 
}

.column_right {
  float: left;
  width: 15%;
  padding: 2px;
  display: table-cell; 
}

.column_33 {
  float: left;
  width: 33%;
  padding: 3px;
  display: table-cell;
}

.column_49 {
  float: left;
  width: 50%;
  padding: 2px;
  display: table-cell; 
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  border-radius: 3px;
  background-color: #f2f2f2;
  padding: 2px;
  box-shadow:  2px 2px 2px 2px #aab7b8;
  display: table;
  width:100%;
  padding-bottom:50px;
  color: var(--container-text-color);
}

.container_row {
	display: table-row; 
	height:100%;
}

.container_cell {
   display: table-cell; 
   height:100%;
}

.form-container {
    height: 520px;
    border: 1px solid #ccc;
	background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.form-container1 {
    height: 720px;
    border: 1px solid #ccc;
	background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.container .container_row .column_33 {
    display: table-cell;
}

@media screen and (max-width: 600px) {
  .column, .column_left, .column_right, .column_middle, .column_33, .column_49, .container, .container_cell, .container_row {
	width: 99%;
	float: left;
	display: table-row; 
  }
}

@media screen and (max-width: 600px) {
    .form-container, .form-container1  {
        width: 99%;
        height: 100%;
        float: left;
    }
}