index.css

/* App.js */

body {
  margin: 0;
  font-family: 'Source Sans Pro';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button{
  background-color: transparent;
  border: none;
  font-family: 'Source Sans Pro';
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}

a{
  text-decoration: none;
  color: #000;
}

.sideIcons{
  color: #75ff95;
}

.input-group-text{
  padding: 25px !important;
}

.formContainer{
  margin: 20px;
}

header{
  display: flex;
  height: 60px;
}

h1{
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  display: inline-flex;
  background-color: #007272;
  width: 20%;
  margin: 0;
  box-sizing: border-box;
  padding: 15px 0 15px 8px;
}

h2{
  font-size: 28px !important;
  color: #43425d;
  font-weight: normal;
  font-family: 'Source Sans Pro' !important;
  letter-spacing: .7px;
}

h3{
  margin: 30px 50px!important;
  font-family: 'Source Sans Pro' !important;
}

.mainTitle{
  background-color: #007272 !important;
}

.mainTitle span {
  color: #fff;
  letter-spacing: 8px;
  margin: auto;
}
/* Side Menu */

.sideMenu{
  background-color: #008080;
  color: #fff;
}

div.sideMenu ul li button{
  color: #fff !important;
}

.nav-link{
  font-size: 15px !important;
}

.sideMenu .nav-link.active,
.sideMenu .nav-item:hover,
.sideMenu .nav-link:hover{
  background-color: #007373 !important;
}

ul{
  padding: 0;
  list-style: none;
  margin: 0;
}

li{
  padding: 15px 15px;
}

.sub-menu{
display: none;
}

.main-item:focus ~ .sub-menu,
.main-item:active ~ .sub-menu,
.sub-menu:hover{
display: block;
}


.items{
  display: table;
  width: 100% ;
}


li button:hover{
  text-decoration: underline;
  font-weight: bold;
}

/* //////////////////////////////////////////////////////////////// */

#Search{
  font-size: 16px;
  margin: auto  15px;
  border: 0;
  height: 22px;
}

.main{
  display: flex;
}
.nav-link{
  color:#9a99aa;
}
.active{
  color:#008080;
  border-bottom: 2px solid #006666;
  font-weight: bold;
}

form{
  width: 40%;
}

form label{
  display: flex;
  width: 30%;
}

.formItem label{
  width: 30%;
  display: inline-flex;
}

input[type=number],
input[type=text],
input[type=date],
select{
  border: 1px solid black;
  background-color: #fff;
}

input:-internal-autofill-selected{
  background-color: #fff !important;
}

.formItem select{
  width: 25%;
  height: 28px;
}

.formItem input[type=number]{
  width: 30%;
}


.formItem input{
  width: 45%;
}

.formItem .bi-plus-square{
  font-size: 12px;
}

.empty{
  padding: 5px 30px!important;
}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
  text-align: center;
  padding: 5px 15px;
  border-radius: 5px;
  color: white;
  background-color: #008080;
  display: inline-block;
}

.inputfile + label {
	cursor: pointer;
}

label{
  color: #43425d;
  display: inline-block;
  margin: 10px 0;
}

input[type=checkbox]{
  margin-left:5px;
  width: 5%;
}

.succesCheckBox{
  box-shadow: 0 0 10px #00d832;
  border: 1px solid rgba(118, 118, 118, 0.3);
  background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
  color: #797f84;
}

.changedInput{
  box-shadow: 0 0 10px #ffae00;
}

select,
option{
  color: #797f84;
}

.sendForm{
  background-color: #008080;
  color: #fff;
  font-weight: normal;
  border-radius: 5px;
  margin: auto;
  padding: 10px 65px;
}

.headerIcons{
  display: flex;
  margin: auto 0 auto auto;;
}

.headerIcons span{
  margin: auto 15px;
}

ul li:hover ul{
  display: block;
}
li img{
  vertical-align: middle;
}

header ul li ul li{
  padding: 15px 0;
}
header ul li ul{
  display: none;
  position: relative;
  background-color: #fff;
}
.response{
  display: flex;
  margin-top: 40px;
}
.accept{
  background-color: #008080;
  color: #fff;
  font-weight: normal;
  margin: auto;
  padding: 10px 40px;
  border: 2px solid  #008080;
  border-radius: 5px;
}
.decline{
  border: 2px solid red;
  color: red;
  border-radius: 5px;
  padding: 10px 40px;
  font-weight: normal;
}

.declined{
  color: red;
}
.accepted{
  color: green;
}
.counteroffer{
  color: #ffae00;
}

.units{
  background-color: #fff;
  padding: 5px 15px;
  margin-left: 5%;
  color: #006666;
  border: 1px solid #d7dae2;
  border-radius: 5px;
}

#DemurrageUnits,
#FreightUnits{
  margin-left: 5%;
  color: #006666;
  width: 15%;
}

.formNav{
  border-bottom: 1px solid #ddd;
}

.participants{
  margin-left: 30px;
  padding-bottom: 8px;
  width: 40%;
  border-bottom: 1px solid #E9E9F0;
}

.participantsMembers{
  background-color: #006666;
  color: #fff;
  height: auto;
  margin-right: 10px;
  padding: 5px 10px;
  border-radius: 5px;
}

.currency{
  margin-left: auto;
  font-weight: bold;
}

.currency span{
  background-color: #C1F5AD;
  color: #607A56;
  font-size: 14px;
  padding: 5px 15px;
  border-radius: 25px;
  margin-left: 10px;
}

.bi-x-circle{
  margin-left: 5px;
  margin-top: -5px;
}

.bi-plus-square{
  color: #006666;
  background-color: #fff;
}

select:disabled,
input:disabled {
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgb(170, 170, 170)  !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

/* /////////////////////////////////////////////////////////////// */
/* @media (min-width: 992px){
  .offset-lg-2 {
      margin-left: 16.666667%;
  }
  .col-lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
}


@media (min-width: 768px){
  .offset-md-3 {
      margin-left: 25%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
}

@media (min-width: 576px){
  .col-sm-12 {
      flex: 0 0 100%;
      max-width: 100%;
  }
} */

.dropdown-toggle::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}

.activeAccount:hover .nonActiveAccount{
  display: block !important;
}

#timer{
  margin: 2% 12%;
}

.inputChanged{
  font-size: 13px;
}

.non-visible{
  display: none;
}

.bi-justify{
  margin-top: 7px;
}

.bi-arrow-bar-left{
  position: relative;
  top: -8px;
  color: #fff;
}

@media (min-width: 768px){
  .d-lg-none {
      display: none!important;
  }
}

@media (max-width: 768px){
  form {
      width: 100%;
  }
}