:root {
  --primary: #1a175a;
  --secondary: #d98429;
  --white: #FFF;
  --darkblue: #0e0b41;
  --disabled: #999;
}



.color-primary { color: var(--primary) !important; }
.color-secondary { color: var(--secondary) !important; }
.color-disabled { color: var(--disabled) !important; }

.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-white { background-color: var(--white) !important; }

.border-primary { border: 1px solid var(--primary) !important; }
.border-secondary { border: 1px solid var(--secondary) !important; }



body {
  background-color: var(--darkblue) !important;
  overflow-x: hidden;
}
.mb-10 {
  margin-bottom: 10px;
}

.row.login-page {
  background-color: var(--darkblue) !important;
}
.layout-navbar-fixed .wrapper .main-header {
  background-color: var(--darkblue) !important;
  border: none !important;
}
.wrapper {
  background-color: var(--darkblue);
}
.content-wrapper {
  background-color:  var(--darkblue);
  padding: 0px !important;
}
.content-wrapper-inner {
  background-color: #FFF;
  margin-right: 10px;
  border-radius: 12px;
  min-height: 800px;
  padding: 1rem;
  padding-top: 2% !important;
}
.main-sidebar {
  background-color: var(--darkblue) !important;
}
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
  background-color: var(--secondary) !important;
  color: var(--darkblue);
  font-weight: 700;
}
.main-footer {
  background-color: var(--darkblue);
  border: none !important;
  color: #EFEFEF;
}
.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]){
  background-color: var(--darkblue) !important;
  border: none !important;
}
.content-wrapper {
  background-color: var(--darkblue) !important;
}

.btn-ex-primary {
  background-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  color: var(--white) !important;
}
.btn-ex-primary:hover {
  background-color: var(--darkblue) !important;
}
.btn-primary {
  background-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  color: var(--white) !important;
}
.btn-primary:hover {
  background-color: var(--darkblue) !important;
}
.brand-link .brand-text {
  font-size: 22px !important;
}
.btn-disabled {
  background-color: var(--disabled) !important;
  border: 1px solid var(--disabled) !important;
  color: var(--white) !important;
  cursor: not-allowed;
}



.table td, .table th {
  vertical-align: middle !important;
}
.form-control {
  border-radius:  6px !important;
  border: 1px #DEDEDE !important;
  background-color: #DEDEDE !important;
  color: #555;
  font-weight: 600;
}
.form-control.disabled {
  background-color: #CDCDCD !important;
  cursor: not-allowed !important;
}
.form-control.is-invalid {
  border: 1px solid #dc3545 !important;
}
.select2-selection.select2-selection--single {
  background-color: #DEDEDE !important;
  border: 1px solid #DEDEDE !important;
  border-radius: 6px !important;
}

select.is-invalid ~ .select2-container--bootstrap4 .select2-selection, form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection {
  border-color: #dc3545 !important;
}
.custom-file-label {
  background-color: #DEDEDE !important;
  border: 1px solid #DEDEDE !important;
  border-radius: 6px !important;
}
.card, .card-header, .card-footer {
  border-radius: 12px;
}
.card .card-header {
  background-color: var(--primary) !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
.card .card-footer {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}
.btn {
  border-radius: 6px !important;
  min-width: 100px;
}

.nav-link.active{
  border-radius: 6px !important;
}
[class*=sidebar-dark-] .sidebar a {
  border-radius: 6px !important;
}
.info-box, .info-box .info-box-icon {
  border-radius: 6px !important;
}
@media only screen and (max-width: 900px) {
  .content-wrapper {
    background-color: #FFF !important;
  }
}



.btn-text {
  cursor: default !important;
}
[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item:hover>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:focus {
    background-color: #ccc !important;
}
.thtd-wordbreak {
  word-wrap: break-word !important;
  max-width: 180px;
  white-space: normal !important;
  word-break: break-all !important;
  font-size: 14px !important;
  min-width: 140px !important;
}
.break-words {
  word-break: break-all;
  word-wrap: break-word;
  white-space: break-spaces;
}
.hide {
  display: none !important;
}
.table thead th {
  text-align: center !important;
  vertical-align: middle !important; 
}
.card-body.p-0 .table thead>tr>th:first-of-type {
  padding-left: .6rem !important;
  padding-right: .6rem !important;
}
.table td {
  padding: .5rem .4rem!important;
}
.border-left-danger {
  border-left: .25rem solid #dc3545!important;
}
.border-left-primary {
  border-left: .25rem solid #4e73df!important;
}
.border-left-success {
  border-left: .25rem solid #1cc88a!important;
}
.border-left-info {
  border-left: .25rem solid #36b9cc!important;
}
.border-left-warning {
  border-left: .25rem solid #f6c23e!important;
}
.text-gray-300 {
  color: #dddfeb!important;
}
.text-gray-800 {
  color: #5a5c69!important;
}
.bg-grey {
  background-color: rgba(0,0,0,.03);
}
.m-20 {
  margin: 20px;
}
.m-10 {
  margin: 10px;
}
.table-extra th {
  text-align: center;
  padding: 12px 6px;
  font-size: 15px;
}
.fa-add-new {
  font-size: 60px;
  position: fixed;
  bottom: 80px;
  right: 70px;
  color: var(--primary);
}


.navbar-light .navbar-nav .nav-link {
  color: #FFF !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  display: flex;
  align-items: center;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: #d7a940 !important;
}
.footer.powered-by {
  float: right;
}



.invalid-feedback.offset-md-2 {
  padding-left: 10px;
}
.pagination {
  margin-bottom: 0rem;
}
.pagination .page-link {
  padding: .25rem .5rem !important;
}
.table-extra td {
  padding: .5rem .4rem!important;
  vertical-align: middle !important;
  font-size: 15px;
}
.span-extra.text-danger {
  display: block !important;
  font-size: 75%;
}
.btn-tooltip {
  width: 37px;
  height: 37px;
}
.card-body.p-0 .table tbody>tr>td:first-of-type, .card-body.p-0 .table tbody>tr>th:first-of-type, .card-body.p-0 .table thead>tr>td:first-of-type, .card-body.p-0 .table thead>tr>th:first-of-type {
  padding-left: 1rem;
  padding-right: 1rem;
}
.btn-link.extra {
  border: 1px solid #f2f3fc;
  background-color: #f2f3fc;
}
.btn-link.extra:hover {
  border: 1px solid #e9ecef;
  background-color: #e9ecef;
}
.white{
  color:white !important;
}
.invalid-feedback.offset-md-3 {
  padding-left: 10px;
}


.card-share-main {
  padding: 1rem;
}
.card-share-main .share-heading {
  font-weight: 700;
  color: #333;
}
.card-share-main .share-text {
  font-weight: 500;
  color: #999;
}
.card-share-main .share-btn {
  padding: 0.5rem 2rem;
  min-width: 15rem;
} 


@media only screen and (max-width: 1600px) {
  
  .row.m-20, .row.m-10 {
    margin: 0.3rem;
  }
  
  .content-header {
    padding: 10px 5px;
  }
  .content-wrapper-inner {
    padding: 0.3rem;
    min-height: 700px;
  }
  .content-header h1 {
    font-size: 1.2rem;
  }
  body, input, button, a, strong, .btn, th, td, .table-extra th, .table-extra td, .main-footer.man-font, .table-icon {
    font-size: 98% !important;
  }
  .info-box {
    padding: 0.3rem;
    margin-bottom: 0.6rem;
    min-height: 65px;
  }
  .info-box .info-box-content {
    padding: 0 0.4rem;
  }
  .info-box .info-box-icon {
    font-size: 1.6rem;
    width: 60px;
    height: 60px;
  }
  hr {
    margin-top: 0rem;
    margin-bottom: 0.6rem;
  }
  .col-info-extra {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
  .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: 5px;
    padding-left:  5px;
  }
  .form-control {
    padding: 0.2rem 0.6rem !important;
    font-size: 92% !important;
  }
  .select2-container--bootstrap4 .select2-selection--single, .form-control {
    height: 35px !important;
  }
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 2.1rem;
  }
  .card-body.p-0 .table thead>tr>th:first-of-type, .table thead th, .table thead td {
    padding: 0.6rem 0.3rem !important;
  }
  .card-header, .card-body, .card-footer {
    padding: 0.7rem;
  }
  .card-title {
    font-size: 0.9rem;
  }
}

@media only screen and (max-width: 1200px) {
  body {
    background-color: #1f4b90;
  }
  .wrapper {
    background-color: #FFF;
  }
  .content-wrapper {
    background-color: #FFF;
    padding: 0px !important;
  }
  .content-wrapper-inner {
    padding: 0.2rem;
    min-height: 600px;
    margin-right: 0px;
  }
  body, input, button, a, strong, .btn, th, td, .table-extra th, .table-extra td, .main-footer.man-font, .table-icon {
    font-size: 96% !important;
  }

  .info-box .info-box-icon {
    font-size: 1.6rem;
    width: 60px;
    height: 60px;
  }
  .info-box {
    min-height: 65px;
    padding: 0.3rem;
  }
  .row.m-20, .row.m-10 {
    margin: 0.2rem;
  }
  .content-header {
    padding: 5px;
  }
  .content-header h1 {
    font-size: 1rem;
  }
  .card-header, .card-body, .card-footer {
    padding: 0.7rem;
  }
  .card-title{
    font-size: 95%;
  }
  .form-control {
    padding: 0.1rem 0.6rem !important;
    font-size: 90% !important;
  }
  .select2-container--bootstrap4 .select2-selection--single, .form-control {
    height: 32px !important;
  }
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 1.8rem;
  }
  .card-body.p-0 .table thead>tr>th:first-of-type, .table thead th, .table thead td {
    padding: 0.6rem 0.3rem !important;
  }
}

@media only screen and (max-width: 1000px) {
  .fa-add-new {
    font-size: 50px;
    position: fixed;
    bottom: 60px;
    right: 50px;
  }
}
@media only screen and (max-width: 900px) {
  .content-header h1 {
    font-size: 1.2rem;
  }
  .content-wrapper-inner {
    padding: 0.2rem;
    min-height: 600px;
    margin-right: 0px;
    padding-top: 3% !important;
  }
  
  .card-title{
    font-size: 95%;
  }
  body, input, button, a, strong, .btn, th, td, .table-extra th, .table-extra td, .main-footer.man-font, .table-icon {
    font-size: 94% !important;
  }
  .footer-comp-name {
    font-size: 14px !important;
  }
  .nav-sidebar .nav-link p {
    font-weight: 500;
  }
  .dash-text-extra {
    display: none;
  }
  .m-20 {
    margin: 12px;
  }
  .info-box .info-box-icon {
    font-size: 1.6rem;
    width: 60px;
    height: 60px;
  }
  .info-box {
    min-height: 65px;
    padding: 0.3rem;
  }
  .btn-download {
    display: none !important;
  }
}
@media only screen and (max-width: 600px) {
  body {
    margin-top: -16px;
  }
  body, input, button, a, .btn, th, td, .table-extra th, .table-extra td {
    font-size: 88% !important;
  }
  .fa-add-new {
    font-size: 40px;
    position: fixed;
    bottom: 40px;
    right: 25px;
    color: var(--primary);
    z-index: 9999;
  }
  .content-wrapper-inner {
    padding: 0.2rem;
    min-height: 400px;
  }
  .content-header {
    padding: 8px 4px;
  }
  .m-20 {
    margin: 2px;
  }
  .row.m-10 {
    margin: 2px;
  }
  .card-header, .card-body, .card-footer {
    padding: 1rem;
  }
  .card, .card-header, .card-footer {
    border-radius: 6px;
  }
  .card .card-header {
    background-color: var(--primary) !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
  }
  .card .card-footer {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
  }
  .main-footer {
    padding: 0.6rem 0.4rem;
  }
  .float-right.jackalope {
    float: left !important;
  }

  .form-control {
    padding: 0.1 0.6rem !important;
    font-size: 90% !important;
  }
  .select2-container--bootstrap4 .select2-selection--single, .form-control {
    height: 32px !important;
  }
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 1.8rem;
  }
  .btn {
    padding: 0.4rem 0.8rem;
  }
  .btn .fa {
    font-size: 88% !important;
  }
  .form-control option {
    font-size: 88% !important;
  }

  .card-body.p-0 .table thead>tr>th:first-of-type, .table thead th, .table thead td {
    padding: 0.3rem !important;
    line-height: 18px;
  }
  .card-header {
    padding: 0.6rem;
  }
  .content-wrapper-inner {
    margin: 0px;
    padding: 3px;
  }
  .info-box {
    margin-bottom: 0.4rem;
  }
  .navbar {
    padding: 0.3rem;
  }
  .main-header .nav-link {
    height: 2rem;
  }
  .content-header {
    padding: 4px 2px;
  }
  hr {
    margin-top: 0.3rem;
    margin-bottom: 0.6rem;
  }
  .col-info-extra {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }
  .info-box {
    min-height: 45px;
    padding: 0.2rem;
  }
  .info-box .info-box-icon {
    font-size: 1rem;
    width: 40px;
    height: 40px;
  }
  .info-box .info-box-number {
    margin: 0px;
    font-size: 1rem;
  }
  .info-box .info-box-content {
    padding: 0px 4px;
  }
  .main-footer {
    padding-top: 0.4rem;
    padding-bottom: 1.4rem;
  }
  .float-right.jackalope {
    display: block;
    position: absolute;
    font-size: 85% !important;
  }

  .card-share-main {
    padding: 0.6rem;
    border-radius: 6px;
  }
  .card-share-main .share-heading {
    font-size: 18px;
  }
  .card-share-main .share-text {
    font-size: 14px;
  }
  .card-share-main .share-btn {
    padding: 0.3rem 1rem;
    min-width: 10rem;
  } 
}

@media only screen and (max-width: 400px) {
  body {
    margin-top: -16px;
  }
  body, input, button, a, strong, .btn, th, td, .table-extra th, .table-extra td, .main-footer.man-font, .table-icon {
    font-size: 90% !important;
  }
  .info-box .info-box-text, .info-box .progress-description {
    font-size: 90% !important;
  }
  .m-20 {
    margin: 2px;
  }
  .row.m-10 {
    margin: 2px;
  }
  .col-12 {
    padding-left: 2px;
    padding-right: 2px;
  }
  
  .form-control {
    padding: 0 0.4rem !important;
    font-size: 88% !important;
  }
  .select2-container--bootstrap4 .select2-selection--single, .form-control {
    height: 30px !important;
  }
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 1.8rem;
  }
  .btn {
    padding: 0.3rem 0.7rem;
  }
  .btn .fa {
    font-size: 86% !important;
  }
  .form-control option {
    font-size: 88% !important;
  }
  label {
    margin-bottom: 0px;
  }
  .invalid-feedback {
    margin-top: 0px;
  }
  .form-group {
    margin-bottom: 0.4rem;
  }
  textarea.form-control {
    min-height: 80px;
  }


  .card-body.p-0 .table thead>tr>th:first-of-type, .table thead th, .table thead td {
    padding: 0.2rem !important;
    line-height: 16px;
  }
  .card-header, .card-body, .card-footer {
    padding: 0.8rem;
  }
  .content-wrapper-inner {
    margin: 0px;
    padding: 2px;
  }
  .info-box {
    margin-bottom: 0.4rem;
  }
  .navbar {
    padding: 0.3rem;
  }
  .main-header .nav-link {
    height: 2rem;
  }
  .content-header {
    padding: 4px 2px;
  }
  hr {
    margin-top: 0.3rem;
    margin-bottom: 0.6rem;
  }
  .col-info-extra {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }
  .info-box {
    min-height: 45px;
    padding: 0.2rem;
  }
  .info-box .info-box-icon {
    font-size: 1rem;
    width: 40px;
    height: 40px;
  }
  .info-box .info-box-number {
    margin: 0px;
    font-size: 1rem;
  }
  .info-box .info-box-content {
    padding: 0px 4px;
  }
  .main-footer {
    padding-top: 0.4rem;
    padding-bottom: 1.4rem;
  }
  .float-right.jackalope {
    display: block;
    position: absolute;
    font-size: 85% !important;
  }
  .jackalope a {
    font-size: 100% !important;
  }
  .table-extra td {
    padding: .1rem !important;
  }
  .form-control.status-change {
    height: 26px !important;
  }

  .card-share-main {
    padding: 0.8rem 0.4rem;
  }
  .card-share-main .share-heading {
    font-size: 16px;
  }
  .card-share-main .share-text {
    font-size: 12px;
  }
  .card-share-main .share-btn {
    padding: 0.2rem 0.6rem;
    min-width: 7rem;
    font-size: 11px;
  } 
}