@font-face {
    font-family: 'DroidSerif-Regular';
    src: url('fonts/droid-serif/DroidSerif-Regular.ttf');
}
@font-face {
    font-family: 'Oswald-Regular';
    src: url('fonts/oswald/Oswald-Regular.ttf');
}
.data-upload {
    padding: 0px 12px;
    border-bottom: 2px dotted rgba(0, 0, 0, 0.12);
    overflow: scroll;
}
.form-item {
    width: 600px;
    height: 20px;
    background-color: #fff;
    border-radius: 5px;
    color: rgba(0, 0, 0, 0.5);
    font-family: 'DroidSerif-Regular';
    font-size: 11px;
    margin-block-end: 16px;
    padding-left: 8px;
    border: 1px solid #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, .5), 0 2px 1px 0 rgba(0, 0, 0, .3);
}
::placeholder {
    color: rgba(0,0,0,0.5);
}
.button-container {
    margin: 7px 0px 0px 377px;

}
button {
    border-radius: 5px;
    font-family: 'DroidSerif-Regular';
    height: 20px;
    box-shadow: 0 0 1px rgba(0, 0, 0, .3), 0 2px 1px 0 rgba(0, 0, 0, .3);
    border-style: solid;
    cursor: pointer;
}
button:focus, .form-item:focus {
    outline: none;
}
.primary-action {
    background-color: #2d8464;
    margin-left: 85px;
    width: 139px;
    border-color: #2d8464;
    color: #fff;
}
.primary-action:hover {
    background-color: #3d8d70;
    border-color: #3d8d70;
}
.primary-action:active {
    background-color: #4c967b;
    border-color: #4c967b;
}
.secondary-action {
    border-color: #fff;
    color: #000;
    width: 76px;
}
.secondary-action:hover {
    background-color: #fbfbfb;
    border-color: #fbfbfb;
}
.secondary-action:active {
    background-color: #f5f5f5;
    border-color: #f5f5f5;
}
h3 {
    font-family: 'DroidSerif-Regular';
    font-size: 20px;
    margin-block-end: 14.5px;
    color: #000;
}
input[type='date'] {
    padding-left: 7px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button,
input::-webkit-calendar-picker-indicator {
    display: none;
}
.upload-form {
    height: 562px;
    padding: 12px 0px 0px 210px;
}

.toggle {
  font-family: 'DroidSerif-Regular';
  font-size: 15px;
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.8);
}
.form-radio
{
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #f1f1f1;
     color: #FFFFFF;
     top: 10px;
     height: 30px;
     width: 30px;
     border: 0;
     border-radius: 50px;
     cursor: pointer;
     margin-right: 7px;
     outline: none;
}
.form-radio:checked::before
{
     position: absolute;
     font: 13px/1 'Open Sans', sans-serif;
     left: 11px;
     top: 7px;
     content: '\02143';
     transform: rotate(40deg);
}
.form-radio:hover
{
     background-color: #f7f7f7;
}
.form-radio:checked
{
     background-color: #4c967b;
}
#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: rgba(51,51,51,0.8);
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 14px;
    position: fixed;
    z-index: 99;
    left: 50%;
    bottom: 30px;
    font-size: 15px;
    font-family: DroidSerif-Regular;
}
#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    -moz-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}
@-moz-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}
@-moz-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}
@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}