.loader {

            height: 4px;

            width: 100%;

            position: relative;

            overflow: hidden;

            background-color: #ddd;

        }

        .loader:before {

            display: block;

            position: absolute;

            content: "";

            left: -200px;

            width: 200px;

            height: 4px;

            background-color: #09c0e4;

            animation: loading 2s linear infinite;

        }



        @keyframes loading {

            from {
                left: -200px;
                width: 30%;
            }

            50% {
                width: 30%;
            }

            70% {
                width: 70%;
            }

            80% {
                left: 50%;
            }

            95% {
                left: 120%;
            }

            to {
                left: 100%;
            }

        }



        /* --------- */

        #document-content {

            height: auto;

            overflow-y: auto;

            padding: 10px;

            overflow-x: hidden;


            font-size: 18px;

        }



        #document-content span {

            font-size: 18px;

            height: fit-content;



            color: black;

            display: inline;

            padding: 0.45rem;

            line-height: 2em;

            white-space: pre-wrap;



            /* Needs prefixing */

            box-decoration-break: clone;

            -webkit-box-decoration-break: clone;



        }

        .inexact-match {

            border-bottom: 3px solid rgba(232, 123, 0, .42);



        }

        .match {

            cursor: pointer;

            padding: 2px 0;

            transition: border-width .1s ease-in-out, background .2s ease;

            border-radius: 2px 2px 0 0;

        }

        .exact-match {

            /*border-bottom: 3px solid rgba(232,152,148,.75);*/

            background-color: rgba(232, 152, 148, 0.5);

        }

        .exact-match:hover,
        .exact-match.focus {

            /*background-color: rgba(232,152,148,.1);*/

            background-color: rgba(232, 152, 148);

        }



        .inexact-match:hover,
        .inexact-match.focus {

            background-color: rgba(232, 123, 0, .1);

        }

        #info-box a {

            cursor: pointer;

        }

        i.matchtile {

            color: #e91e63;

            display: contents;

        }



        .zoom-buttons {

            background-color: transparent;

            position: absolute;

            right: 50px;

        }

        .btn-zoom {

            width: 40px !important;

            height: 40px !important;

            text-align: center !important;

            border-radius: 50% !important;

            border-style: solid;

            border-color: #999;

            background: #AAA;

            opacity: 0.6;

            padding: 8px;

            color: white;

            cursor: point;

            -webkit-transition: all 0.3s ease-in-out;

            -moz-transition: all 0.3s ease-in-out;

            -o-transition: all 0.3s ease-in-out;

            -ms-transition: all 0.3s ease-in-out;

            transition: all 0.3s ease-in-out;

        }

        .btn-zoom:hover {

            opacity: 0.9;

        }

        .btn-zoom:focus {

            outline: 0 !important;

        }

        #typography {

            border: solid lightgray 3px;

            border-radius: 5px;

        }



        #match-reference .card {

            width: 100%;

        }



        #match-reference-url .text-info {

            display: block;

        }

        .accordion .fa {

            margin-right: 0.5rem;

        }

#processform p,#processform span{font-size:22px;word-spacing:2px;letter-spacing:2px;font-weight:normal;font-family: sans-serif;}
#processform span{color:blue;}
#processform h1{font-size:70px;color:blue;}
#processform label[for="myfile"]{height: 250px;width: 200px;background: url(https://i.ibb.co/whcsgXq/upload.png) no-repeat; background-repeat: no-repeat;background-position: top 40px center;position: absolute;background-size: 18%;margin: auto;cursor:pointer;}
#processform label[for="myfile"]: hover{background-color: #3e8e41;box-shadow:0 10px 13px 0 rgba(0,0,0,0.24),0 20px 90px 0 rgba(0,0,0,0.19);transition: all 1s;}
#processform textarea{outline: none;max-width: 700px;height: 200px;border: none;padding: 5px;background-position: bottom right;background-repeat: no-repeat;border:2px dashed gray;font-size:17px;width:100%;}
#processform input[type=file]{cursor:pointer;color:blue;outline: none;width: 150px;height: 175px;adding: 5px;border:3px dashed #ebe9e4;border-radius:3px;position:absolute;text-align: center;align-content: center;display: inline-block;}
.btn_dis{font-family: sans-serif;font-size: 17px;padding: 18px;background: #4484E9;color:white;border: none;position:relative;margin-top:30px;width:auto;border-radius:6px;}

#processform .upload-btn-wrapper {    word-break: break-all;position: relative;overflow: hidden;display: inline-block;height:250px;}
#processform .btn {border: 2px dashed gray;color: gray;background-color: white;font-size: 18px;font-weight: bold;height:250px;width: 200px;padding-top:70px;}
#processform .upload-btn-wrapper input[type=file] {font-size: 100px;position: absolute;left: 0;top: 0;opacity: 0;background-position: top 12px center;}
#processform textarea::placeholder{padding-top:30px;padding-left:15px;}

.btn-primary.focus, .btn-primary:focus {
    box-shadow: none;
    border: 0;
}