/* General styles */
body {
    min-height: 100vh;
    background: linear-gradient(to top right, #013064, #0065d1); 
    color: #ffffff; 
    margin: 0;
    padding: 0;
}

/* Login page specific */
body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: black;
}

.alert {
    position: absolute!important;
    top: 20px!important;
}

/* DASHBOARD START */
.container { 
    margin: 0 auto;
    padding-top: 20px;
}

#filterForm {
    padding: 20px;
    background-color: #dcdcdc;
    border-radius: 8px;
    margin-bottom: 20px;
}

#filterForm .dateField {
    display: inline-block;
    width: 49%;
}

label.dateRange {
    display: block;
}

#filterButton {
    margin: 5px;
}

#clearButton {
    margin: 5px;
}

.bg-white {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Manage users */
.modal-content {
    color: black;
}

/* Cards and tables */
.card {
    margin-bottom: 20px;
    color: black;
}

.table {
    background-color: white;
    color: black;
}
.navbar.bg-dark {
    background-color: #013064!important; 
}
.navbar-brand {
    color: white!important;
}
.navbar-nav .nav-link {
    color: white!important;
}
.navbar-nav .nav-link:hover {
    color: #bbc5cf!important;
}

/* Add User Form Styling */
#addUserForm .row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    /*max-width: 600px;*/
}

#addUserForm .col-md-3,
#addUserForm .col-md-2,
#addUserForm .col-md-1 {
    flex: 1 1 calc(50% - 15px);
    max-width: calc(50% - 15px);
}

#shortenModal .alert-success {
    top: 450px !important;
    right: 0;
}
#reviewStep .alert-info {
    position: relative !important;
    top: 0px !important;
}
#bulkUploadResults .alert-success {
    position: relative !important;
}

/* Phone input styling */
.iti {
    width: 100%;
    margin-bottom: 15px;
}

.iti__flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/img/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/img/flags@2x.png");
    }
}

#addUserForm .phone-group {
    display: block;
    flex: 1 1 100%;
}

/* Role and submit button */
#addUserForm select[name="role"],
#addUserForm button[type="submit"] {
    width: 100%;
}

#addUserForm select[name="role"] {
    margin-bottom: 10px;
}

#addUserForm button[type="submit"] {
    padding: 10px;
}