body {
    font-family: Roboto, sans-serif;
    color: #0f3c4b;
    background-color:#4e3d3d;
    /*#e5edf1;*/
    padding: 5rem 1.25rem; /* 80 20 */
}
/*.container {*/
        /*width: 80%;*/
        /*padding-top: 50px;*/
        /*text-align: center;*/
/*}*/

.form-control {
    width: 50%;
    margin-left: 16%;
    position: inherit;
    float: left;
}

#search {
    color: #c31c1c;
    float: left;
    margin-left: 20px;
    height: 44px;
    width: 101px;
    background-color: white;
    border-color: thistle;
}

#m_canvas{
    width: 500px;
    height: 168.06px;
    position: absolute;
}
#m_text{
    width: 500px;
    height: 168.06px;
    position: absolute;
}


#logo {
    width: 500px;
}

#result_text {
    margin: 0px 0px 0px 97.5938px;
    width: 407px;
    height: 115px;
    resize: none;
    margin-bottom: 10%;
}


#url_form{
    height: 720px;

}

.dropzone {
    min-height: 136px;
    border: 2px solid rgb(229, 237, 241);
    background: white;
    padding: 20px 20px;
    opacity: 0.48;
}

.box__dragndrop,
.box__uploading,
.box__success,
.box__error {
  display: none;
}


html
{
}


.container {
    width: 100%;
    max-width: 1200px; /* 800 */
    text-align: center;
    margin: 0 auto;
}

.container h1 {
    font-size: 42px;
    font-weight: 300;
    color: #0f3c4b;
    margin-bottom: 40px;
}

.container h1 a:hover,
.container h1 a:focus {
    color: #39bfd3;
}

.container nav
{
    margin-bottom: 40px;
}
.container nav a {
    border-bottom: 2px solid #c8dadf;
    display: inline-block;
    padding: 4px 8px;
    margin: 0 5px;
}

.container nav a.is-selected {
    font-weight: 700;
    color: #39bfd3;
    border-bottom-color: currentColor;
}
.container nav a:not( .is-selected ):hover,
.container nav a:not( .is-selected ):focus {
    border-bottom-color: #0f3c4b;
}

.container footer {
    color: #92b0b3;
    margin-top: 40px;
}
.container footer p + p {
    margin-top: 1em;
}
.container footer a:hover,
.container footer a:focus {
color: #39bfd3;
}

.box {
    font-size: 1.25rem; /* 20 */
    background-color: #ffffff ;
    /*#c8dadf;*/
    position: relative;
    padding: 53px 20px ;
    /*100px 20px;*/
}
.box.has-advanced-upload {
    outline: 2px dashed #92b0b3;
    outline-offset: -10px;

    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
}

.box.is-dragover {
    outline-offset: -20px;
    outline-color: #c8dadf;
    background-color: #fff;
}

.box__dragndrop,
.box__icon {
    display: none;
}
.box.has-advanced-upload .box__dragndrop {
    display: inline;
}
.box.has-advanced-upload .box__icon {
    width: 100%;
    height: 80px;
    fill: #92b0b3;
    display: block;
    margin-bottom: 40px;
}

.box.is-uploading .box__input,
.box.is-success .box__input,
.box.is-error .box__input {
    visibility: hidden;
}

.box__uploading,
.box__success,
.box__error {
    display: none;
}
.box.is-uploading .box__uploading,
.box.is-success .box__success,
.box.is-error .box__error {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;

    -webkit-transform: translateY( -50% );
    transform: translateY( -50% );
}

.box__uploading {
    font-style: italic;
}

.box__success {
    -webkit-animation: appear-from-inside .25s ease-in-out;
    animation: appear-from-inside .25s ease-in-out;
}

@-webkit-keyframes appear-from-inside
{
from	{ -webkit-transform: translateY( -50% ) scale( 0 ); }
75%		{ -webkit-transform: translateY( -50% ) scale( 1.1 ); }
to		{ -webkit-transform: translateY( -50% ) scale( 1 ); }
}
@keyframes appear-from-inside
{
from	{ transform: translateY( -50% ) scale( 0 ); }
75%		{ transform: translateY( -50% ) scale( 1.1 ); }
to		{ transform: translateY( -50% ) scale( 1 ); }
}

.box__restart
{
font-weight: 700;
}
.box__restart:focus,
.box__restart:hover
{
color: #39bfd3;
}

.js .box__file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.js .box__file + label {
    max-width: 80%;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
}
.js .box__file + label:hover strong,
.box__file:focus + label strong,
.box__file.has-focus + label strong {
    color: #39bfd3;
}
.js .box__file:focus + label,
.js .box__file.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}
.js .box__file + label *
{
/* pointer-events: none; */ /* in case of FastClick lib use */
}

.no-js .box__file + label {
    display: none;
}

.no-js .box__button {
    display: block;
}
.box__button {
    font-weight: 700;
    color: #e5edf1;
    background-color: #39bfd3;
    display: none;
    padding: 8px 16px;
    margin: 40px auto 0;
}
.box__button:hover,
.box__button:focus {
    background-color: #0f3c4b;
}