/*
Search Keyword for the following parts of CSS
1. Loader / Spinner
2. Sidebar / Offcanvas
3. Main / Container / Content
4. Table Content
5. Nav Bar / Menu
6. File Input

*/

/* 1. Loader Spinner */
.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1056;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #0008FB;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    background-color: rgba(255,255,255,0.7);
  }

  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

/* 2. Sidebar */
.offcanvas-header {
    /* border-radius: 25px; */
    /* background-color: #000080; */
    color: #121312;
}

.offcanvas-title{
    color: #121312;
    font-family: 'Droid serif';
    /* font-size: 10px; */
    font-weight: normal;
    /* line-height: 48px; */
    /* margin: 0 0 50px; */
    text-align: center;
    text-shadow: 1px 1px 2px #082b34;
}

/* .offcanvas-start{
    background-color: #e8ecf1;

} */

.offcanvas-body .nav-bar li a:hover{
    background-color: yellow;
}

.side-bar-link{
    color:#121312;

}

.side-bar-link:hover{
    color:#010b18;
    background-color:#9597a7;

}

#sidebar .nav-link.active {
    background-color: #565851;
}

.side-icon{
    margin-right:50px;
}

.paginate_button {
    margin-right: 5px;
}

.dataTables_filter input{
    /* transform: translate(0px,-5px); */
    margin-right: 30px;
}

.dataTables_length label{
    margin : 20px;
}
.dataTables_wrapper {
    background-color: #fff;
    border-radius: 20px;
    margin-top: 60px;
}

.btn-blue {
    /* float: right; */
    width: 100%;
}
.btn-primary {
    background-color: #0008FB !important;
}

.completeMessage {
    z-index: 1056;
}

.btn-outline-primary{

    border-color: #0008FB !important;
    color: #0008FB !important;
}
.btn-outline-primary:hover {
    background-color: #0008FB !important;
    color: #fff !important;
}

/*  Circle Progress Bar */
.progress{
    /* top:50%;
    transform: translate(0%,80%); */
    /* margin-top: 120px; */
    border-radius: 10px !important;
}
.progress .bg-success{

    background-color: #00FF00 !important;
}
  .chart-box {
    display: block;
    text-align: center;

  }
  .chart-box .chart{
    position: relative;
    /* width: 100%;
    height: 100%; */
    text-align: center;
    font-size: 40px;
    line-height: 160px;
    height: 170px;
    width: auto;

  }

  .chart-box canvas{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 30%;
  }

/* 3. Main Container //Left Content */
.card-body{
    text-align: center;
}

.main-container{
    /* padding-top: 20px; */
    /* border-radius: 25px; */
     background-color: lightgray;
    /* margin: 10px 10px 10px 10px; */
}

.dashboard-pic{
    vertical-align: middle;
    margin: 40px 30px 0px 30px;
    /* margin-top: 40px;
    margin-left: 50px;
    margin-bottom: 30px; */
    border-radius: 50%;
}
.dashboard-card{
    margin-right:30px;
}

.main-title{
    border-radius: 10px;
    /* background-color: #2d3034; */
    color:#04053d;
}

/* 4. Table Contents */
#table{
    border-radius: 15px !important;
    background-color: white;
}

.dataTable {
    color:#010b18;
}

.thead-dark{
    color:#CEF0D4;
    background-color: #010b18;
}

/* 5. Nav Bar */
.nav-main{
    color: #CEF0D4;
    background-color: #010b18;
}
.nav-main .dropdown-menu{
    background-color: #CEF0D4;
}

/* 6. File input */
.files{
    color:#010b18;
}
.files input {
    outline: 2px dashed #92b0b3;
    outline-offset: -10px;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
    padding: 120px 0px 85px 35%;
    text-align: center !important;
    margin: 0;
    width: 100% !important;
    background-color: lightgray;
}
.files input:focus{     outline: 2px dashed #010b18;  outline-offset: -10px;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #CEF0D4;
 }
.files{ position:relative}
.files:after {  pointer-events: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 50px;
    right: 0;
    height: 56px;
    content: "";
    /* background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png); */
    display: block;
    margin: 0 auto;
    background-size: 100%;
    background-repeat: no-repeat;
}
.color input{ background-color:#565851;}
.files:before {
    position: absolute;
    bottom: 10px;
    left: 0;  pointer-events: none;
    width: 100%;
    right: 0;
    height: 57px;
    content: " or drag it here. ";
    display: block;
    margin: 0 auto;
    color: #181a19;
    font-weight: 600;
    text-transform: capitalize;
    text-align: center;
}