body{
    font-family: "Roboto", sans-serif;
}

.bg-dark-blue {
    color: #fff;
    background-color: #08588B;
}

.bg-package {
    width:100px;
    background-color:#08588B;
}

.bg-modul {
    width:100px;
    background-color:#6EC1E4;
}

.bg-complete {
    width:100px;
    background-color:#959595;
}

.bg-waiting {
    width:100px;
    background-color:#FF5D5D;
}

.bg-detail {
    width:100px;
    background-color:#212121;
}

.bg-grey-appkey {
    color: #707070 !important;
    background-color: #f6f6f6;
}

.text-dark-blue {
    color: #08588B;
}

.btn-file {
    position: relative;
    overflow: hidden;
  }

  .btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
  }

.btn-dark-blue {
    color: #fff;
    background-color: #08588B;
    border-color: #08588B;
}

.btn-dark-blue:hover {
    background-color: #05466e;
    border-color: #05466e;
    color: #fff !important;
}

.btn-dark-blue:disabled {
    color: #fff;
    background-color: #08588B;
    border-color: #08588B;
}

.btn-dark-blue:active {
    color: #fff !important;
    background-color: #05466e !important;
    border-color: #05466e !important;
}

.left-jumbotron{
    /* min-height: 500px; */
    height: 500px;
}

.left-jumbotron > h1{
    font-size: 4rem;
    letter-spacing: 3px;
}

.support-card-count{
    font-size: 3.125rem;
}

.form-container{
    background-color: #fff;
    padding-top:10px
}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .support-card-count{
        font-size: 6.125rem;
    }

    .form-container{
        background-color: #fff;
        padding-top:39px
    }

    .dataTables_filter input {
        width: 25rem !important;
    }

    .filter-order {
       position: absolute;
       top: 20px;
       z-index: 1;
       width: 10rem;
    }
}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}

/* // Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {
    .left-jumbotron > h1{
        font-size: 1.5rem;
    }

    .dataTables_filter input {
        width: 8rem !important;
    }
}

/* // Medium devices (tablets, 768px and up) */
@media (max-width: 767.98px) {
    .left-jumbotron > h1{
        font-size: 2rem;
    }
    .dataTables_filter input {
        width: 12rem !important;
    }
}

/* // Large devices (desktops, 992px and up) */
@media (max-width: 991.98px) {
    .left-jumbotron > h1{
        font-size: 2.5rem;
    }

    .left-jumbotron{
        height: 30vh;
    }

    .dataTables_filter input {
        width: 8rem !important;
    }

    .filter-order {
        position: absolute;
        z-index: 1;
        width: 4rem;
     }
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1199.98px) {

}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (max-width: 1399.98px) {

}