.list-style-none {
    list-style-type: none;
}
.ml-mr-auto {
    margin-left: auto;
    margin-right: auto;
}

 select {
    border-radius: 4px;
    border: 1px solid #558ED5;
    margin-left: 0.3em;
}

a {
    color:#558ED5;
}
.card {
    border: 1px solid rgba(0,0,0,.125);
}
.card-title{
    float: left;
    padding: 15px;
    /* margin-top: -70px; */
    /* margin-right: 15px; */
    border-radius: 3px 3px 0 0;
    color: #ffffff;
    background: #6498D2;
    margin-bottom: 0;
}
.card-title i, .card-title em {
    color: #558ED5;
}
.list-style-none {
    list-style-type: none;
}
.ml-mr-auto{
    margin-left: auto;
    margin-right: auto;
}
/* whiteLabel colors */
.yellow {
    color: #ffcb08;
}
.red {
    color: #ff0000;
}
.blue {
    color: #558ED5;
}
.darkgray {
    color: #575e62;
}
/* for buttons */
.lightgray {
    color: #ADB1B3;
}
/* for info titles */
.infogray {
    color: #f5f5f5;
}
/* .sidebar-nav ul li a {
    border: 0;
    background-color: #ADB1B3;
    -webkit-box-shadow: 0 2px 2px 0 rgba(40, 135, 190, 0.14), 0 3px 1px -2px rgba(40, 135, 190, 0.2), 0 1px 5px 0 rgba(40, 135, 190, 0.12);
    box-shadow: 0 2px 2px 0 rgba(40, 135, 190, 0.14), 0 3px 1px -2px rgba(40, 135, 190, 0.2), 0 1px 5px 0 rgba(40, 135, 190, 0.12);} */
.bg-yellow {
    background-color: #ffcb08!important;
}
.bg-darkblue {
    background-color:#607d8b!important;
}

.bg-danger {
    background-color: #e4312a!important;
}
/* .sidebar-nav>ul>li.active>a {
    background-color: #ADB1B3;
} */
.alert-success {
    background-color: #ffffff;
    /* border: 1px solid rgba(0,0,0,.125); */
    color: #558ED5;
}
.swal2-styled.swal2-confirm {
    background-color: #558ED5!important;
    border: 0!important;
}
.swal2-styled.swal2-confirm:focus {
    box-shadow:none;
}
.w-auto {
    width: auto;
}
ul li a:hover {
    border:0;
}
ul li a:hover {
    background: #558ED5;
    color: white!important;
}
ul li a:hover i {
    color: white!important;
}
.sidebar-footer a:hover {
    color: #ffffff;
    background-color: #558ED5;
    border: 0;
}
.card-no-border .sidebar-footer {
    background: #f1f1f1;
}
.page-wrapper {
    background: #f1f1f1;
    display: flex;
}
.page-wrapper #site_content {
    height: inherit;
    flex: 1;
    /* display: grid; */
}
.imprintCockieContainer {
    margin-bottom: 20px;
}
.mainHeader {
    margin-bottom: 20px;
    text-align:center;
}
.subContainer {
    margin-top: 20px;
}
strong {
    font-weight: bold;
}
.page-wrapper #site_content .content {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.page-wrapper #site_content .content .card {
    flex: 1;
}

@media (min-width: 768px) {
    .mini-sidebar .sidebar-nav #sidebarnav>li:hover>a {
        opacity: 1;
        background: #558ED5;
    }
    .text-align-custom {
        text-align: right;
    }
    .extraGrid {
        display: grid;
        grid-template-rows: max-content;
        height: 98%;
    }
    .cards {
        display: flex;
        flex-direction: row;
    }
    .navbar-toggleable-sm .navbar-nav .nav-link {
        padding-left: 4px;
        padding-right: 4px;
    }
    .mini-sidebar .sidebar-nav #sidebarnav>li>a {
        padding: 9px 11px;
    }
}
@media (max-width: 768px) {
    .text-align-custom {
        text-align: left;
    }
    /* .extraGrid {
        display: grid;
        grid-template-rows: 220px auto;
    } */
    .cards {
        margin-bottom: 16px!important;
    }
    .topbar ul.dropdown-user {
        padding: 0px 20px;
        width: auto;
    }
}
.domainName {
    margin: auto;
    color: #558ED5;
    padding-left: .50rem;
    padding-right: .50rem;
    font-size: 19px;
    border-radius: 4px;
}
.dataTables_wrapper i {
    color: #558ED5;
}
.dt-buttons .dt-button, .btn-success, .btn-success.disabled {
    -webkit-box-shadow: 0 2px 2px 0 rgba(40, 135, 190, 0.14), 0 3px 1px -2px rgba(40, 135, 190, 0.2), 0 1px 5px 0 rgba(40, 135, 190, 0.12);
    box-shadow: 0 2px 2px 0 rgba(40, 135, 190, 0.14), 0 3px 1px -2px rgba(40, 135, 190, 0.2), 0 1px 5px 0 rgba(40, 135, 190, 0.12);}
.btn-success:hover, .btn-success.disabled:hover, .dt-buttons .dt-button:hover,
.btn-success:focus, .btn-success.disabled:focus, .dt-buttons .dt-button:focus {
    -webkit-box-shadow: 0 2px 2px 0 rgba(40, 135, 190, 0.14), 0 3px 1px -2px rgba(40, 135, 190, 0.2), 0 1px 5px 0 rgba(40, 135, 190, 0.12);
    box-shadow: 0 2px 2px 0 rgba(40, 135, 190, 0.14), 0 3px 1px -2px rgba(40, 135, 190, 0.2), 0 1px 5px 0 rgba(40, 135, 190, 0.12);}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: 12px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(40, 135, 190, 0.14), 0 3px 1px -2px rgba(40, 135, 190, 0.2), 0 1px 5px 0 rgba(40, 135, 190, 0.12);
    box-shadow: 0 2px 2px 0 rgba(40, 135, 190, 0.14), 0 3px 1px -2px rgba(40, 135, 190, 0.2), 0 1px 5px 0 rgba(40, 135, 190, 0.12);  }
  .card-header:first-child {
      border-radius: 4px;
  }
  #btn-login {
    border-radius: 4px;
  }

  #btn-login:hover {
    opacity: 0.7;
  }

  select.select.form-control, input.form-control, .form-control {
      border: 1px solid #558ED5;
      padding-right: 8px;
      padding-left: 8px;
  }
  select.select.form-control:focus, input.form-control:focus, .form-control:focus {
      border: 1px solid #558ED5;
  }
  #dataTable > tbody > tr[role="row"] > td:first-child:before, #dataTable > tbody > tr[role="row"] > th:first-child:before {
    border: 1px solid #558ED5;
    background: #e0e0e0;
    box-shadow: none;
    border-radius: 6px !important;
  }
  div.dataTables_length {
      vertical-align: sub;
  }

  .initials:hover {
    background-color: #558ED5;
    border-color: #558ED5;
}
.mail-contnet.d-inline-block.align-middle a:hover, .mail-contnet.d-inline-block.align-middle a:focus {
    color: #014c8c!important;
    background-color: white;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    /* opacity: 0.7; */
}
/* checkbox as button success */
[type="checkbox"].button-success+label {
    padding-left: 1px;
    height: 25px;
    line-height: 25px;
}
[type="checkbox"].button-success.filled-in:not(:checked)+label:after {
    display: none;
    width: 1px;
}
[type="checkbox"].button-success.filled-in:checked+label:after {
    border: 0;
    background-color:transparent;
}
[type="checkbox"].button-success.filled-in:checked+label:before {
    display: none;
}
/* end checkbox as button success */
.btn-success:active, .btn-success.active, .show>.btn-success.dropdown-toggle {
    color: #fff;
    background-color: #607d8b;
    border-color: #607d8b;
    -webkit-box-shadow: 0 2px 2px 0 rgba(40, 135, 190, 0.14), 0 3px 1px -2px rgba(40, 135, 190, 0.2), 0 1px 5px 0 rgba(40, 135, 190, 0.12);
    box-shadow: 0 2px 2px 0 rgba(40, 135, 190, 0.14), 0 3px 1px -2px rgba(40, 135, 190, 0.2), 0 1px 5px 0 rgba(40, 135, 190, 0.12);

}

.recordset .add img {
    float: right;
}
.recordset .remove img {
    float: left;
}
.table th, .table td {
    padding: 4px 8px;
}
.form-horizontal.form-material {
    width: 100%;
    padding: 3px;
    height: 100%;
}
.sidebar-nav a.has-arrow:hover::after {
    border-color: white;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.position-relative {
    position: relative;
}

.faded {
    opacity: 0.2;
}

.no-vertical-scrollbar {
    overflow-y: hidden;
}

.loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-bottom: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    margin-top: -25px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: -50px;
    /* margin: -25px 0 0 -50px; */
    position: absolute;
    animation: spin 1s linear infinite;
    z-index: 1000;
  }

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

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

/* after bootstrap/jquery js upgrade the drag and drop message inside dropify defaulted to the span file icon font size of 40 which looks shitty on mobile */
.dropify-message p {
    font-size: 14px;
}