/* --- Fontawesome --- */

@font-face {
   font-family: 'Roboto';
   src: url('../fonts/Roboto-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'Roboto';
   src: url('../fonts/Roboto-Italic.ttf') format('truetype');
   font-weight: normal;
   font-style: italic;
}

@font-face {
   font-family: 'Roboto';
   src: url('../fonts/Roboto-Bold.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
}

@font-face {
   font-family: 'Roboto';
   src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
   font-weight: bold;
   font-style: italic;
}

@font-face {
   font-family: 'Roboto';
   src: url('../fonts/Roboto-Thin.ttf') format('truetype');
   font-weight: 200;
   font-style: normal;
}

@font-face {
   font-family: 'Roboto';
   src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
   font-weight: 200;
   font-style: italic;
}

@font-face {
   font-family: 'Roboto';
   src: url('../fonts/Roboto-Light.ttf') format('truetype');
   font-weight: 100;
   font-style: normal;
}

@font-face {
   font-family: 'Roboto';
   src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
   font-weight: 100;
   font-style: italic;
}

@font-face {
   font-family: 'Roboto';
   src: url('../fonts/Roboto-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
}

@font-face {
   font-family: 'Roboto';
   src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
   font-weight: 500;
   font-style: italic;
}

/* --- main --- */

body {
   background-color: #eee;
   margin-bottom: 50px;
   color: #777;
}

h4 {
   font-family: 'Roboto';
   font-size: 20px;
   font-weight: 500;
   color: #ccc;
}

h6 {
   font-family: 'Roboto';
   font-size: 13px;
   color: #cdc090;
   text-transform: uppercase;
   letter-spacing: 0.1em;
}

p {
   margin: 0;
   text-align: justify;
}
.carousel-caption p {
   text-align: right;
}

.dropdown-item.active,
.dropdown-item:active {
   background-color: #ff9900;
   color: black;
}

.countCharacter {
   font-family: 'Roboto';
   font-size: 12px;
   opacity: 0.8;
}

@media (min-width: 576px) {
   .navbar {
      height: 77px;
   }
   .navbar .navbar-brand img {
      height: 65px;
   }
   .navbar .navbar-nav > .nav-item > .nav-link {
      text-align: center;
      padding-top: 10px;
      padding-bottom: 10px;
      font-size: 12px;
      min-width: 90px;
   }
   .navbar .navbar-nav > .nav-item > .nav-link > i {
      font-size: 36px;
      display: block;
      padding-bottom: 3px;
   }
   /* .navbar .navbar-nav .active > .nav-link {
        background-color: #ff9900;
        color: black;
    } */

   /* .navbar .navbar-nav .active {
      background-color: #ff9900;
      color: black;
   } */

   li .nav-link {
      color: #fff;
   }

   li.active .nav-link {
      color: #999;
   }

   li .nav-link:hover {
      color: #777;
   }
}

/* --- title --- */

.title-actions h1 {
   display: inline-block;
}

.title-actions h1 + .float-right {
   margin-top: 0.6rem;
   margin-bottom: 0.5rem;
}

/* --- filter --- */

.form-filter {
   background-color: #fff; /*e9ecef*/
   color: #495057;
   border-radius: 0;
   border: 1px solid #dee2e6;
   padding: 0 0.5rem;
   margin-bottom: 0.5rem;
}

.form-filter > .col,
.form-row > [class*='col-'] {
   padding: 0.5rem 0.25rem;
}

/* --- link --- */

a.link-primary {
   color: #ff9900 !important;
}

a.link-primary:focus,
a.link-primary:hover {
   color: #e68a00 !important;
}

.table .btn-link {
   padding: 0 5px 0 0;
}

.table .btn-link i {
   color: #adb5bd;
}

.table .btn-link-primary:hover i {
   color: #0561a5;
}

.table .btn-link-danger:hover i {
   color: #dc3545;
}

.table .btn-link-warning:hover i {
   color: #e68a00;
}

/* --- button --- */

.btn-primary {
   background-color: #ff9900;
   border-color: #e68a00;
   color: black;
   margin-right: 5px;
}

.btn-primary:hover {
   background-color: #e68a00;
   border-color: #e68a00;
   color: black;
}

.btn-primary:not(:disabled):not(.disabled):active {
   background-color: #e68a00;
   border-color: #e68a00;
   color: black;
}

.btn-outline-primary {
   color: #ff9900;
   border-color: #ff9900;
}

.btn-outline-primary:hover {
   color: black;
   background-color: #ff9900;
   border-color: #ff9900;
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
   color: black;
   background-color: #ff9900;
   border-color: #ff9900;
}

/* --- card --- */

/* .card {
   border: 1px solid #dee2e6;
   border-radius: 0;
}

.card .card-header {
   background-color: #fff;
   border-bottom-width: 2px;
} */

/* --- form --- */

.form-actions {
   margin: 10px 0;
}

.form-control:focus {
   border-color: #ff9900;
   box-shadow: 0 0 0 0.2rem rgba(230, 138, 0, 0.25);
}

.custom-control-input:checked ~ .custom-control-label::before {
   color: #fff;
   border-color: #ff9900;
   background-color: #ff9900;
}

/* --- table --- */

.table {
   background-color: #fff;
}

.table-hover tbody tr:hover {
   color: #212529;
   background-color: #fff9e6;
}

/* --- pagination --- */

.page-link {
   color: #ff9900;
   padding-left: 15px;
   padding-right: 15px;
}

.page-link:hover {
   color: #e68a00;
   background-color: #ffecb3;
   cursor: pointer;
}

.page-item.active .page-link {
   background-color: #ff9900;
   border-color: #ff9900;
   color: black;
   z-index: -99;
}

/* --- footer --- */

footer {
   position: fixed;
   left: 0;
   bottom: 0;
   right: 0;
   margin-bottom: 0px;
   text-align: center;
   height: 50px;
   width: 100%;
}

footer > .container {
   padding-right: 15px;
   padding-left: 15px;
}

/* --- Loading --- */

.loader-container {
   background-color: black;
   opacity: 0.5;
   color: rgba(0, 0, 0, 0.5);
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 100;
}

.spinner {
   width: 64px;
   height: 64px;
   border: 8px solid;
   border-color: #ff9900 transparent #ff9900 transparent;
   border-radius: 50%;
   animation: spin-anim 1.2s linear infinite;
}

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

/* --- Messages --- */

.login {
   margin-top: 20px;
}

.alert {
   color: #4b4b4b;
   background-color: #fff;
   border-radius: 0;
   border-right-width: 8px;
   padding: 0;
   box-shadow: 0 2px 2px 0 #000000;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
   margin: -7px 0px 15px 0px;
}

.alert .alert-icon,
.alert .alert-text {
   display: table-cell;
   vertical-align: top;
}

.alert .alert-text {
   padding: 16px;
}

.alert .alert-text ul {
   margin: 0;
   padding-left: 17px;
}

.alert .alert-icon i {
   color: #fff;
   font-size: 25px;
   padding: 13px 12px;
   width: 50px;
   height: 50px;
}

.alert-success {
   border-color: #1f7e38;
}

.alert-success .alert-icon {
   background-color: #1f7e38;
}

.alert-primary {
   border-color: #0b7bbc;
}

.alert-primary .alert-icon {
   background-color: #0b7bbc;
}

.alert-warning {
   border-color: #f5a722;
}

.alert-warning .alert-icon {
   background-color: #f5a722;
}

.alert-danger {
   border-color: #d53833;
}

.alert-danger .alert-icon {
   background-color: #d53833;
}

.validation-summary-valid {
   display: none;
}

/*#endregion*/

/*#region Modal */

.modal-backdrop.show {
   opacity: 0.45;
}

.modal-content {
   border-left: 0;
   border-right: 0;
   border-top: 5px solid #1b2627;
   border-bottom: 5px solid #1b2627;
   box-shadow: 0 1px 3px #000000, 0 1px 3px #000000;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.modal-header {
   border-bottom: none;
   padding: 30px 20px 20px 20px;
}

.modal-header .close {
   color: #4b4b4b;
   font-size: 30px;
   padding: 0.5rem 0.7rem;
   margin-top: -2rem;
}

.modal-title {
   color: #1b2627;
   font-size: 28px;
   font-weight: bold;
   line-height: 1;
   margin-top: 0;
}

.modal-title::before {
   padding-right: 10px;
   font-size: 30px;
   font-family: 'Font Awesome 5 Free';
}

.modal-body {
   color: #4b4b4b;
   font-size: 14px;
   padding: 0 20px;
   word-wrap: break-word;
}

.modal-body p {
   margin-bottom: 0;
}

.modal-footer {
   border-top: none;
   justify-content: flex-start;
   padding: 30px 20px;
}

.modal-warning .modal-content {
   border-color: #eda01f;
}

.modal-warning .modal-title::before {
   content: '\f071';
   color: #eda01f;
}

.modal-danger .modal-content {
   border-color: #d43833;
}

.modal-danger .modal-title::before {
   content: '\f057';
   color: #d43833;
}

.modal-success .modal-content {
   border-color: #1f7e38;
}

.modal-success .modal-title::before {
   content: '\f058';
   color: #1f7e38;
}

.modal-info .modal-content {
   border-color: #0b7bbc;
}

.modal-info .modal-title::before {
   content: '\f05a';
   color: #0b7bbc;
}

/*#endregion */