/* MyTest v1.0 by Ron Craig*/
/* Written 25 Aug 2022  :Revised  2022 */

.my-container {
  margin: auto;
  width: 500px;
  overflow: auto;
  padding: 3rem 2rem;
}

#my-form {
  padding: 2rem;
  background: #f4f4f4;
  border-radius:5px;
}

#my-form label {
  display: block;
  text-align:left;
}

#my-form input[type='text'] {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
#users li {
  width:100%;
  margin:5px 0;
  padding:5px;
  border-radius:5px;
  background: #f4f4f4;
}

.my-btn {
  display: block;
  width: 100%;
  padding: 10px 15px;
  border: 0;
  background: #333;
  color: #fff;
  border-radius: 5px;
  margin: 5px 0;
}

.my-btn:hover {
  background: #444;
}

.mbg-dark {
  background: #333;
  color: #fff;
}
.my-error {
  background: orangered;
  color: #fff;
  padding: 5px;
  margin: 5px;
}

.myForm2 .form-group {
  margin:5px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.myForm2 .form-group input[type='text'] {
  width:100%;
  /* margin:5px 0; */
  margin-left:15px;
  padding:8px;
  /* border:1px solid #fff; */
  border-radius:5px;
}
.myForm2 .form-group .txt {
  /* display:flex; */
  /* justify-content:space-between; */
  /* width:auto; */
  /* height:25px; */
  /* margin-right:15px; */
}
.myForm2 .form-group input[type='text']:focus {
  outline:2px solid #28a745;
  /* requires all 3 values just like border to make it work, does not change width/height of element */
  /* outline:none;
     border:1px solid #28a745; */
}
.myForm2 input[type='submit'] {
  width:70%;
  margin:5px 0;
  padding:8px;
  color:#fff;
  background:#28a745;
  border-radius:5px;
  font-weight:bold;
  cursor:pointer;
}

.Form3 .formControl {
  margin:10px 0;
  display:flex;
  /* justify-content:space-between; */
  align-items:flex-end;
}
.Form3 .formControl label {
}
.Form3 .formControl input[type='text'] {
  width:100%;
  /* margin:5px 0; */
  margin-left:15px;
  padding:8px;
  border-radius:5px;
  /* border:1px solid #fff; */
}
.Form3 .formControl input[type='text']:focus {
  outline:2px solid #28a745;
}
.Form3 input[type='submit'] {
  width:70%;
  margin:5px 0;
  padding:8px;
  color:#fff;
  background:#28a745;
  border-radius:5px;
  font-weight:bold;
  cursor:pointer;
  text-transform:uppercase;
}
.Form3 input[type='submit']:hover { background:#080; }

.form4 {

}
.form4 .form-control2 {
  display:flex;
  justify-content:space-between;
  align-content:center;
  margin-bottom:10px;
}
.form4 .form-control2 label {
  display:block;
  text-align:left;
  margin-right:15px;
  align-self:center;
}
.form4 .form-control2 input[type='text'] {
  width:100%;
  flex:1;
  /* margin:5px 0; */
  padding:8px;
  border-radius:5px;
}
.form4 .form-control2 input[type='text']:focus {
  outline:2px solid #28a745;
}
.form4 .form-control2 input[type='text']:first-child { margin-top:0; }
input[type='submit'] {
  width:70%;
  /* margin:5px auto; */
  padding:8px;
  color:#fff;
  background:#28a745;
  border-radius:5px;
  font-weight:bold;
  cursor:pointer;
  text-transform:uppercase;
}
input[type='submit']:hover { background:#080; }

.code, .js {
  width:100%;
  height:200px;
  margin-bottom:10px;
  padding:10px;
  border-radius:5px;
}

#code-output { margin:20px auto; }

.box-1 { background:#e51400; }
.box-2 { background:#fa6800; }
.box-3 { background:#f0a30a; }
.box-4 { background:#e3c800; }
.box-5 { background:#a4c400; }
.box-6 { background:#60a917; }
.box-7 { background:#00aba9; }
.box-8 { background:#1ba1e2; }
.box-9 { background:#aa00ff; }

.orng { color:#f90; }

 /* EOF */