html {
        scroll-behavior: smooth;
    }

    .shadow_text {
        text-shadow: 1px 2px 3px gray;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .my-input {
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        cursor: text;
        padding: 8px 10px;
        transition: border .1s linear;
    }
 
    .btn {
        font-weight: bold;
    }

    .lds-ellipsis {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
    }

    .lds-ellipsis div {
        position: absolute;
        top: 33px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: blue;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

    .lds-ellipsis div:nth-child(1) {
        left: 8px;
        animation: lds-ellipsis1 0.6s infinite;
    }

    .lds-ellipsis div:nth-child(2) {
        left: 8px;
        animation: lds-ellipsis2 0.6s infinite;
    }

    .lds-ellipsis div:nth-child(3) {
        left: 32px;
        animation: lds-ellipsis2 0.6s infinite;
    }

    .lds-ellipsis div:nth-child(4) {
        left: 56px;
        animation: lds-ellipsis3 0.6s infinite;
    }

    @keyframes lds-ellipsis1 {
        0% {
            transform: scale(0);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes lds-ellipsis3 {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(0);
        }
    }

    @keyframes lds-ellipsis2 {
        0% {
            transform: translate(0, 0);
        }

        100% {
            transform: translate(24px, 0);
        }
    }

    .bg {
        /* The image used */
        background-image: linear-gradient(#ffffff, rgb(254, 255, 209));
        background-repeat: no-repeat;
        /* background-image: url(img/frame1.jpeg); */
        /* Full height */
        height: 100%;
        width: auto;
        /* Center and scale the image nicely 
        background-position: center;
        background-repeat: repeat-y;
        background-size: cover;
        */
    }

    .imgdiv {
        background-image: url(img/bus.jpeg);
        /* background: no-repeat url(img/bus.jpeg) */
        /* Full height */
        height: 30%;
        width: auto;
        /* border: darkred solid 10px; */
        /* Center and scale the image nicely */
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto;
    }

    .imgdiv img {
        vertical-align: top;
        width: auto;
        height: 30%;
        /* max width */
        opacity: 0;
        /* make it transparent */
    }

    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -100%);
    }

    .div_image {
        /* position: absolute; */
        /* width: 50%; */
        /* top: 50%; */
        left: 50%;
    }

    .img {
        width: 60%;
        height: auto;
    }

    .logo_small {
        height: auto;
        width: 100%;
        object-fit: fill;
    }

    body,
    html {
        height: 100%;
        margin: 0;
    }

    .card {
        border-color: white;
        margin-left: -50px;
        margin-right: -50px;
    }

    #footer {
        position: absolute;
        height: 40px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin-bottom: 0px;
    }

    body {
        margin-bottom: 50px;
    }

    .logo {
        -webkit-animation: spin 5s 5;
        animation: spin 5s 5;
        width: 10%;
        height: auto;
    }

    @-webkit-keyframes spin {
        from {
            -webkit-transform: rotateY(0deg);
        }

        to {
            -webkit-transform: rotateY(-360deg);
        }
    }

    @keyframes spin {
        from {
            -moz-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }

        to {
            -moz-transform: rotateY(-360deg);
            -ms-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
        }
    }

    .responsive {
        height: 50%;
        max-width: 10vw;
        max-height: 50%;
        width: auto;
    }

    @font-face {
        font-family: myFirstFont;
        src: url("../fonts/hacen.ttf");
        font-weight: bold;
    }


    .headtext {
        /* font-family: 'Almarai', sans-serif; */
        font-family: myFirstFont;
        font-size: larger;
        color: darkred
    }

    .title {
        font-family: myFirstFont;
        font-size: larger;
        color: black;
        font-weight: normal;

    }

    .watermark_div {
        visibility: hidden;
        height: 500px;
        width: 100%;
        position: absolute;
        /* top: 0; */
        right: 0;
        overflow: hidden;
        /* background-color: aqua  ; */
        /* z-index: 0; */
    }

    .details {
        text-align: start;
        color: black;
    }


    @keyframes floating {

        0%,
        7% {
            transform: rotateZ(0);
        }

        15% {
            transform: rotateZ(-15deg);
        }

        20% {
            transform: rotateZ(10deg);
        }

        25% {
            transform: rotateZ(-10deg);
        }

        30% {
            transform: rotateZ(6deg);
        }

        35% {
            transform: rotateZ(-4deg);
        }

        40%,
        100% {
            transform: rotateZ(0);
        }
    }

    /* footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
    } */
    .search_div {
        margin-left: 20%;
        margin-right: 20%;
    }

    .watermark_div p {
        /* position: absolute; */
        direction: rtl;
        color: rgb(167, 165, 165);
        font-size: xx-large;
        opacity: .65;
        top: 0;
        right: 0;
        line-height: 16vw;
        width: 100%;
        /* height: 100%;  */
        /* pointer-events: none; */
        -webkit-transform: rotate(-45deg);
        /* -moz-transform: rotate(-45deg); */
    }

    @media print {
        body * {
            visibility: hidden;
        }

        .section-to-print,
        .section-to-print * {
            visibility: visible;
        }

        .section-to-print {
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
        }


        #watermark_div {
            visibility: visible;
        }

        .responsive {
            height: 100px;
            align-content: center;
        }

        .imgdiv,
        .imgdiv img,
        #bus_image {
            visibility: hidden;
        }

        .noprint,
        .noprint * {
            visibility: hidden;
        }

        @page {
            size: A4;
            orientation: portait;
            margin: 0.5cm;
        }
    }

    @media screen and (max-width: 800px) {

        .search_div,
        #search_div {
            margin: 10%;
        }

        .headtext {
            font-size: small;
        }

        .logo {
            width: 10%;
            height: auto;
        }

        .fab {
            font-size: normal;
        }

        .img {
            width: 80%;
            height: auto;
        }

    }