.signup {
    width: 70%;
    height: auto;
    background: white;
    margin: 5% auto;
    padding: 20px;
    box-shadow: 0 0 10px #0000003D;
}

.signup h2 {
    text-align: left;
    font: normal normal bold 40px/46px Ubuntu;
    letter-spacing: 0px;
    color: #304855;
    font-size: 30px;
    margin-bottom: 0;
}

.signup a {
    text-align: right;
    font: normal normal 600 18px/27px Nunito;
    letter-spacing: 0px;
    color: #28374C;
    transition: .5s all;

}

.w-100{
    width:100% !important; 
}

.signup a:hover {
    text-decoration: none;
    color: #BBC6C8;
    transition: .5s all;
}

.skip {
    margin-top: 33px;
}

.sub-content {
    text-align: left;
    font: normal normal 500 17px/27px Nunito;
    letter-spacing: 0px;
    color: #BBC6C8;
    margin: 0;
}

.pt-20 {
    padding-top: 20px;
}

.form-check-inline {
    margin-right: 2.75rem;
}

#regForm {

    font-family: Raleway;
}

h1 {
    text-align: center;
}

input {
    padding: 10px !important;
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #fff;
        text-transform: inherit;
}

.pt-0{
    padding-top: 0 !important;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
    background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
    display: none;
    padding-top: 20px;
}

button {
    background-color: #28374C;
    border: none;
    padding: 8px 35px;
    cursor: pointer;
    text-align: right;
    font: normal normal 600 16px/22.5px Nunito;
    letter-spacing: 0px;
    color: #FFFFFF;
    transition: .5s all;
    margin-top: 20px;
    margin-bottom: 20px;
}

button:hover {
    opacity: 0.8;
    transition: .5s all;

}

#prevBtn {
    background-color: #28374cab;
    margin-right: 20px;
}

/* Make circles that indicate the steps of the form: */
.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

.step.active {
    opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
    background-color: #4CAF50;
}

label {
    text-align: left;
    font: normal normal normal 16px/22px Nunito;
    letter-spacing: 0px;
    color: #333333;
    text-transform: capitalize;
}

.form-control {
    background-color: #E6E9EA;
    border: 0;
    padding: .7rem .75rem;
    border-radius: 0;
    height: auto;
    color:#28374c;
}

::-webkit-input-placeholder {
    /* Edge */
    text-align: left;
    font: normal normal normal 16px/22px Nunito;
    letter-spacing: 0px;
    color: #BBC6C8;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    text-align: left;
    font: normal normal normal 16px/22px Nunito;
    letter-spacing: 0px;
    color: #BBC6C8;
}

::placeholder {
    text-align: left;
    font: normal normal normal 16px/22px Nunito;
    letter-spacing: 0px;
    color: #BBC6C8;
}

select {
    width: 100%;
    padding: 1rem .2rem;
    border: 0;
    background: #E6E9EA;
    text-align: left;
    font: normal normal normal 15px/22px Nunito;
    letter-spacing: 0px;
    color: #333333;
    margin-top: 0px;
    margin-bottom: 1rem;
}

.select-mr{
    margin-top: 27px;
    padding-top: 12px;
    padding-bottom: 7px;
}

.d-none{
    display: none !important;
}

.white {
    color: #fff !important;
}

.input-mt {
    margin-top: 2.7rem;
}

.hide {
    display: none;
}

.store-type {
    text-align: left;
    font: normal normal normal 16px/22px Nunito;
    letter-spacing: 0px;
    color: #333333;
    padding-top: 20px;
}

.form-check-label {
    text-align: left;
    font: normal normal normal 16px/22px Nunito;
    letter-spacing: 0px;
    color: #333333;
    text-transform: capitalize;
}

.formg-mb {
    margin-bottom: .9rem !important;
}

.custom-control-label::before {
    position: absolute;
    top: 0.2rem;
    left: 0;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 2px solid #BBC6C8;
    border-radius: 2px !important;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #304855;
    border: 0;
}

.button-pr {
    padding-right: 2.9rem !important;
}

.number-code {
    text-align: left;
    font: normal normal normal 16px/22px Nunito;
    letter-spacing: 0px;
    color: #333333;
}

.pl-4 {
    padding-left: 1.5rem!important;
}

.w-100{
    width: 100% !important;
}

.add-button{
   padding-top: 25px;
    width: 35%;
}

td, th {
     border: 1px solid transparent; 
    text-align: left;
    padding: 8px;
    width: 100px;
    font-size: 14px;
    font-weight: 100;
    font: normal normal normal 16px/22px Nunito;
letter-spacing: 0px;
color: #333333;
padding-top: 0;
    padding-left: 0;
        width: 45.5%;
}

.type-store{
    font: normal normal normal 16px/22px Nunito;
letter-spacing: 0px;
color: #333333;
padding-top: 10px;
}

/* Hide the browser's default checkbox */
.container-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container-checkbox {
    padding-left: 35px;
    padding-top: 7px;
    font: normal normal normal 16px/31px Nunito;
    letter-spacing: 0px;
    color: #333333;
    margin-bottom: 0px;
}

/* Create a custom checkbox */
/*.checkmark {
  position: absolute;
  top: 0;
  left: 15px;
  height: 25px;
  width: 25px;
  border: 2px solid #BBC6C8;
}*/
.checkmark {
 position: absolute;
 left: 15px;
 height: 25px;
 width: 25px;
 border: 2px solid #BBC6C8;
 margin-top: -26px;
 -webkit-margin-before: 0px;
}

/* On mouse-over, add a grey background color */
.container-checkbox:hover input ~ .checkmark {
  background-color: #BBC6C8;
}

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.container-checkbox{
    padding-left: 35px;
    padding-top: 3px;
    font: normal normal normal 16px/22px Nunito;
letter-spacing: 0px;
color: #333333;
    margin-bottom: 20px;
}

.ports-supplied{
        text-align: left;
    font: normal normal 800 16px/27px Nunito;
    letter-spacing: 0px;
    color: #28374c;
    margin-bottom: 5px;
}


/* Responsive */
@media only screen and (min-width: 300px) and (max-width: 767px) {
    .signup {
        height: auto;
    }

    .sub-content {
        font: normal normal 500 15px/27px Nunito;
    }

    .form-check-label {
        font: normal normal normal 15px/22px Nunito;
    }

    select {
        margin-top: 0;
    }

    .rad-label {
        margin-right: 15px;
    }

    .form-check-inline {
        margin-right: 1.75rem;
    }

    .tab {
        display: none;
        padding-top: 0;
    }

    .store-type {
        padding-top: 0;
    }

    .mob-d-inbloc {
        display: inline-block !important;
    }

    .input-mt {
        margin-top: 10px;
    }
}