/*----------------------------------------------------------------------------
                        Bootstrap
------------------------------------------------------------------------------*/
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

/*----------------------------------------------------------------------------
                        intl-tel-input
------------------------------------------------------------------------------*/

@import "../node_modules/intl-tel-input/build/css/intlTelInput.min.css";

/*----------------------------------------------------------------------------
                        Font Awesome Pro
------------------------------------------------------------------------------*/

@import "../node_modules/@fortawesome/fontawesome-pro/css/fontawesome.min.css";
@import "../node_modules/@fortawesome/fontawesome-pro/css/solid.min.css";
@import "../node_modules/@fortawesome/fontawesome-pro/css/light.min.css";

/* -------------------------------------------------------------------------- */
/*                                 Base styles                                */
/* -------------------------------------------------------------------------- */

:root {
    --primary-color: #1C87CB;
    --skin-red: #C81C1C;
    --white-color: #FFFFFF;
    --bg-striped-table: 248, 248, 248;
    --text-size: 14px;
}

body {
    font-size: var(--text-size);
    background-color: #ecf0f5;
}


.skin-blue {
    background-color: var(--primary-color);
}

.skin-red {
    background-color: var(--skin-red);
}


.border-top-color {
    border-top: 4px solid var(--primary-color);
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
}

/* The container generated by intl-tel-input */
.iti {
    display: block !important;
    width: 100% !important;
}

.hidden {
    display: none !important;
}

.container-login {
    background-color: var(--primary-color);
    min-height: 25vh;
    padding: 1rem 0;
}

body[class*="Simone"]>div.logoDiv {
    background: url(../../images/general/Simon-e-by-tenco-v2.png) no-repeat;
    background-size: contain;
    width: 322px;
    height: 100px;
}

body[class*="Simone"][class*="Test"]>div.logoDiv {
    background: url(../../images/general/Simon-e-by-tenco-v2.png) no-repeat;
    background-size: contain;
    width: 322px;
    height: 100px;
}

.card {
    --bs-card-spacer-y: 1.25rem !important;
    --bs-card-spacer-x: 1.25rem !important;
}

.login-card {
    width: 100%;
    max-width: 400px;
    margin: 0 1rem;
    max-height: 85vh;
    overflow-y: auto;
}

/* -------------------------------------------------------------------------- */
/*                        Form Validation Messages                           */
/* -------------------------------------------------------------------------- */

.text-danger {
    font-size: 0.75rem;
    margin-top: 0.125rem;
    display: block;
    line-height: 1.2;
}

.form-group {
    margin-bottom: 0.75rem;
}

.validation-summary-errors {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 1.25rem;
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/*                     Bootstrap 3 to 5 Compatibility                        */
/* -------------------------------------------------------------------------- */

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

/* -------------------------------------------------------------------------- */
/*                          Login Form Styles                                */
/* -------------------------------------------------------------------------- */

.checkbox-remember-pro label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    gap: 2px;
    font-size: var(--text-size);
}

.checkbox-remember-pro input[type="checkbox"] {
    margin-right: 6px;
    cursor: pointer;
}

/* iCheck generated elements spacing */
.checkbox-remember-pro .icheckbox_square-blue,
.checkbox-remember-pro .icheckbox_square {
    margin-right: 2px !important;
}

.forgot-your-password {
    text-align: right;
    position: relative;
    top: 0px;
    font-size: var(--text-size);
}

.forgot-your-password a{
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

.forgot-your-password:hover {
    color: var(--primary-color) !important;
    text-decoration: underline !important;
}

@media (max-width: 769px) {
    body[class*="Simone"].bg-body-blue {
        background-image: none;
        background-color: var(--primary-color);
    }

    body[class*="Simone"][class*="Test"].bg-body-blue {
        background-image: none;
        background-color: #c81c1c;
    }

    body[class*="Simone"]>div.logoDiv,
    body[class*="Simone"][class*="Test"]>div.logoDiv {
        background: url(../../images/general/simon-by-tenco-white.png) no-repeat;
        background-size: contain;
    }
}

.bg-body-blue {
    background-color: var(--white-color);
}

.btn-default {
    background-color: #f4f4f4;
    color: #444;
    border-color: #ddd;
}

.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

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

/* ---------------------------------------------
    Table styles
-------------------------------------------------*/
.table-striped {
    --bs-table-striped-bg: #F8F8F8 !important;
}

.btn-close-modal {
    font-size: var(--text-size);
    margin-right: 0.25rem;
}

.btn-primary {
    background-color: #337ab7 !important;
    --bs-btn-border-color: var(--primary-color) !important;
}

.btn-primary:hover {
    background-color: #286090 !important;
    --bs-btn-border-color: var(--primary-color) !important;
}

input.form-control {
    font-size: var(--text-size);
}

table {
    font-size: var(--text-size);
}

/* DataTables layout fix */
.dt-layout-full {
    padding: 0 !important;
}

.dataTables_wrapper .dataTables_paginate {
    margin-top: 10px;
}

.dataTables_wrapper .pagination .page-link {
    background-color: #f5f5f5;
    color: #333;
    border: none !important;
    font-size: var(--text-size);
    padding: 6px 12px;
    transition: all 0.2s ease;
}

.dataTables_wrapper .pagination .page-link:hover {
    background-color: #e6f0fa;
    color: var(--primary-color) !important;
}

.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

.dataTables_wrapper .pagination .page-item.disabled .page-link {
    background-color: #eee !important;
    color: #999 !important;
}

table.dataTable.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--bg-striped-table) !important;
}

.pagination {
    --bs-pagination-color: var(--primary-color) !important;
    --bs-pagination-active-bg: var(--primary-color) !important;
    --bs-pagination-focus-box-shadow: none !important;
    --bs-pagination-hover-color: var(--primary-color) !important;
    --bs-pagination-active-border-color: var(--primary-color) !important;
    --bs-pagination-focus-color: var(--primary-color) !important;
}

table.dataTable,
table.dataTable th,
table.dataTable td {
    border-bottom: none !important;
    border-top: none !important;
    border-collapse: collapse !important;
}

table.dataTable thead th {
    border-bottom: none !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td {
    border-bottom: none !important;
}

table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
    box-shadow: inset 0 0 0 9999px rgb(248, 248, 248, 1) !important;
}

table.table.dataTable.table-hover>tbody>tr:hover>* {
    box-shadow: inset 0 0 0 9999px rgba(240, 240, 240, 1) !important;
}

.dt-layout-end.col-md-auto {
    padding-right: 0 !important;
}

.dt-layout-start.col-md-auto {
    padding-left: 0 !important;
}

.form-control:focus {
    box-shadow: none !important;
}

.progress {
    --bs-progress-bar-bg: var(--primary-color) !important;
}