#cookies {
    display: none;
    width: 100%;
    height: auto;
    padding-top: 30px;
    position: absolute;
    background: #fcf8e3;
    border-bottom: 2px solid #fbeed5;
    color: #c09853;
    text-align: center;
    top: 0;
    left: 0;
    z-index: 9999;
    position: fixed;
}

#cookies>p {
    margin: 0 0 10px 0;
    color: #f0f0f0;
    font-weight: bold;
}

#cookies>p a {
    color: #f0f0f0;
    text-decoration: none;
}

#cookies.display {
    display: block;

    /* Cross browser animation */
    -webkit-animation: cookies 1s 1;
    /* Chrome, Safari 5+ */
    -moz-animation: cookies 1s 1;
    /* Firefox 5-15 */
    -ms-animation: cookies 1s 1;
    /* IE9 */
    -o-animation: cookies 1s 1;
    /* Opera 12.00 */
    animation: cookies 1s 1;
    /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
}

@keyframes cookies {
    0% {
        -webkit-transform: translate3d(0, -100px, 0);
        /* Safari & Chrome */
        -moz-transform: translate3d(0, -100px, 0);
        /* Firefox */
        -ms-transform: translate3d(0, -100px, 0);
        /* IE9 */
        -o-transform: translate3d(0, -100px, 0);
        /* Opera */
        transform: translate3d(0, -100px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        /* Safari & Chrome */
        -moz-transform: translate3d(0, 0, 0);
        /* Firefox */
        -ms-transform: translate3d(0, 0, 0);
        /* IE9 */
        -o-transform: translate3d(0, 0, 0);
        /* Opera */
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes cookies {
    0% {
        -webkit-transform: translate3d(0, -100px, 0);
        /* Safari & Chrome */
        -moz-transform: translate3d(0, -100px, 0);
        /* Firefox */
        -ms-transform: translate3d(0, -100px, 0);
        /* IE9 */
        -o-transform: translate3d(0, -100px, 0);
        /* Opera */
        transform: translate3d(0, -100px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        /* Safari & Chrome */
        -moz-transform: translate3d(0, 0, 0);
        /* Firefox */
        -ms-transform: translate3d(0, 0, 0);
        /* IE9 */
        -o-transform: translate3d(0, 0, 0);
        /* Opera */
        transform: translate3d(0, 0, 0);
    }
}

@-moz-keyframes cookies {
    0% {
        -webkit-transform: translate3d(0, -100px, 0);
        /* Safari & Chrome */
        -moz-transform: translate3d(0, -100px, 0);
        /* Firefox */
        -ms-transform: translate3d(0, -100px, 0);
        /* IE9 */
        -o-transform: translate3d(0, -100px, 0);
        /* Opera */
        transform: translate3d(0, -100px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        /* Safari & Chrome */
        -moz-transform: translate3d(0, 0, 0);
        /* Firefox */
        -ms-transform: translate3d(0, 0, 0);
        /* IE9 */
        -o-transform: translate3d(0, 0, 0);
        /* Opera */
        transform: translate3d(0, 0, 0);
    }
}

@-o-keyframes cookies {
    0% {
        -webkit-transform: translate3d(0, -100px, 0);
        /* Safari & Chrome */
        -moz-transform: translate3d(0, -100px, 0);
        /* Firefox */
        -ms-transform: translate3d(0, -100px, 0);
        /* IE9 */
        -o-transform: translate3d(0, -100px, 0);
        /* Opera */
        transform: translate3d(0, -100px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        /* Safari & Chrome */
        -moz-transform: translate3d(0, 0, 0);
        /* Firefox */
        -ms-transform: translate3d(0, 0, 0);
        /* IE9 */
        -o-transform: translate3d(0, 0, 0);
        /* Opera */
        transform: translate3d(0, 0, 0);
    }
}

.close-cookies {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

    -webkit-transform: translate3d(0, -100px, 0);
    /* Safari & Chrome */
    -moz-transform: translate3d(0, -100px, 0);
    /* Firefox */
    -ms-transform: translate3d(0, -100px, 0);
    /* IE9 */
    -o-transform: translate3d(0, -100px, 0);
    /* Opera */
    transform: translate3d(0, -100px, 0);
}

@media (max-width:768px) {

    .modalclass {
        top: 10%;
    }

}

.btn-outline-success a {
    color: inherit;
}

@media (max-width: 768px) {
    .table-responsive {
        overflow-x: hidden;
    }

    .table-responsive table {
        display: block;
    }



    .table-responsive table thead {
        display: none;
    }

    .table-responsive table tbody {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .table-responsive table tbody tr {
        margin-bottom: 4%;
        border: 1px solid #dee2e6;
        border-radius: 1%;
        padding: 2%;
        position: relative;
    }

    .table-responsive table tbody tr td {
        display: block;
        padding-right: 10px;
    }

    .table-responsive table tbody tr td::before {
        content: attr(data-th);
        font-weight: bold;

    }


    .table-responsive table tbody tr .btn {
        width: 100%;
        text-align: center;
    }

    .table-responsive table thead tr .funame {
        margin-right: 5%;
    }

    .table-responsive table thead .mark {
        display: none;
    }


    .table-responsive table thead tr[data-th="Delete"] {
        display: none;
    }

    .table-responsive table tbody tr [data-th="sn"] {
        display: none;
    }

    .table-responsive table tbody tr[data-td="Name"] {
        display: flex;
        justify-content: end;

    }


}

  @media (max-width: 768px) {
    #btnNow {
      max-width: 100%;
    }
  }