@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap');

body {
    font-family: 'Kosugi Maru', sans-serif;
}

/*******************
Deprog Toolkit
******************/
.dataTable thead th, .dataTable tfoot th {
    z-index: 1;
    color: #fff;
    background-color: #007bff !important;
    border: 1px solid #dee2e6;
}

.dataTable thead th {
    border: 1px solid #dee2e6;
}

.dataTable tfoot td {
    padding: 10px;
}

.dataTable .datatables-top td {
    background-color: #e8fdeb !important;
}

    .dataTable .datatables-top td input, .dataTable .datatables-top td select {
        border: 1px solid;
        border-color: #cdc;
        padding: 5px;
    }

.dataTable .datatables-new td {
    background-color: #fff8ec !important;
}

    .dataTable .datatables-new td input, .dataTable .datatables-top td select {
        border: 1px solid;
        border-color: #fbb;
        padding: 5px;
    }

.dataTable tr td input[type="text"], .dataTable tr td input[type="email"], .dataTable tr td input[type="password"], .dataTable tr td input[type="date"], .dataTable tr td input[type="month"], .dataTable tr td input[type="week"], .dataTable tr td input[type="time"], .dataTable tr td input[type="datetime"], .dataTable tr td input[type="datetime-local"], .dataTable tr td input[type="number"] {
    width: 100%;
}

.dataTable tr.Row_Record:hover td {
    background-color: yellow;
}

/* placeholder */
::placeholder {
    color: #ccc !important;
}

::-ms-input-placeholder {
    color: #ccc !important;
}

:-ms-input-placeholder {
    color: #ccc !important;
}
/*******************
Headings
*******************/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Kosugi Maru', sans-serif;
}

/*============================================================== 
Dashboard1 chart
 ============================================================== */
.c3-chart-arcs-title, .c3-legend-item {
    font-family: 'Kosugi Maru', sans-serif;
}

/*******************/
/*Floating Label*/
/*******************/
.floating-labels .form-control {
    font-family: 'Kosugi Maru', sans-serif;
}

/*******************
Horizontal Timeline page
******************/
.myadmin-dd .dd-list .dd-item .dd-handle {
    font-family: 'Kosugi Maru', sans-serif;
}

.slimScrollBar {
    background: rgb(50, 50, 50) !important;
}

@media(max-width:768px) {
    .col-12, .col-6, col-4, col-3, col-2 {
        padding: 0px;
    }
}

.ui-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: gray;
    opacity: 0.3;
    z-index: 1;
}


.sidebar-nav ul li a.active {
    font-size: 18px;
    font-weight: 700;
}

select, textarea, input[type=text], input[type=password], input[type=number], input[type=email], input[type=date], input[type=datetime], input[type=month], input[type=time], input[type=tel] {
    background-color: #ffe;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    margin: 3px;
    padding: 3px;
}

    select.required, textarea.required, input.required {
        background-color: #fee;
    }

    select:focus, textarea:focus, input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=email]:focus, input[type=date]:focus, input[type=datetime]:focus, input[type=month]:focus, input[type=time]:focus, input[type=tel]:focus {
        font-weight: 700;
        background-color: #ffc;
    }

    select.required:focus, textarea.required:focus, input.required:focus {
        background-color: #fcc;
    }

.datatables-top select, .datatables-top textarea, .datatables-top input[type=text], .datatables-top input[type=password], .datatables-top input[type=number], .datatables-top input[type=email], .datatables-top input[type=date], .datatables-top input[type=datetime], .datatables-top input[type=month], .datatables-top input[type=time], .datatables-top input[type=tel] {
    background-color: #ffe;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    margin: 3px;
    padding: 3px;
}

    .datatables-top select:focus, .datatables-top textarea:focus, .datatables-top input[type=text]:focus, .datatables-top input[type=password]:focus, .datatables-top input[type=number]:focus, .datatables-top input[type=email]:focus, .datatables-top input[type=date]:focus, .datatables-top input[type=datetime]:focus, .datatables-top input[type=month]:focus, .datatables-top input[type=time]:focus, .datatables-top input[type=tel]:focus {
        font-weight: normal;
        background-color: #fff;
    }

td.r, select.r, textarea.r, input[type=text].r, input[type=password].r, input[type=number].r, input[type=email].r, input[type=date].r, input[type=datetime].r, input[type=month].r, input[type=time].r, input[type=tel].r {
    text-align: right;
}

td.l, select.l, textarea.l, input[type=text].l, input[type=password].l, input[type=number].l, input[type=email].l, input[type=date].l, input[type=datetime].l, input[type=month].l, input[type=time].l, input[type=tel].l {
    text-align: left;
}

td.c, select.c, textarea.c, input[type=text].c, input[type=password].c, input[type=number].c, input[type=email].c, input[type=date].c, input[type=datetime].c, input[type=month].c, input[type=time].c, input[type=tel].c {
    text-align: center;
}



.dropzone {
    min-height: 30px;
    padding: 5px;
    background-color: #ffc;
    position: relative;
    text-align:center;
}
    .dropzone .dz-info-message{
        margin:auto;
    }

    .dropzone .dz-message {
        padding: 0;
    }

    .dropzone .dz-preview .dz-details {
        position: relative;
        opacity: 0.7;
        padding: 0.5em;
    }

        .dropzone .dz-preview .dz-details img {
            height: 100px;
        }

    .dropzone .dz-preview .dz-remove {
        color: #f00;
    }

    .dropzone .dz-preview {
        /*width: 300px !important;*/
        min-height: 30px;
    }

#modal1 input, #modal1 select {
    width: 200px;
}

.dataTable tr td input {
    width: 95% !important;
}