/* password icon */
.password-input .togglePassword {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 20px;
}

/* bar graph dropdowndown */
.dynamic-select-remove .btn.dropdown-toggle.btn-round.btn-default {
    display: none;
}

.dynamic-select-remove .bootstrap-select {
    margin-left: 10px;
}

/*form alignment (create user and change password pages)*/
.updatepassword-outer {
    display: flex;
    justify-content: center;

}

.updatepassword-outer .card {
    width: 100%;
    max-width: 600px;
}

/* datatable processing loader */
.lineservice-table .dataTables_wrapper .dataTables_processing {
    margin-top: 5px;
    font-size: 16px;
    font-weight: 600;
    color: #0c0c0c
}

.lineservice-table table {
    height: 50px;
}

.toggle {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 19px;

}

/* Hide the checkbox input */
.toggle input {
    display: none;
}

/* Describe slider's look and position. */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: gray;
    transition: .4s;
    border-radius: 34px;
}

/* Describe the white ball's location 
      and appearance in the slider. */
.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 13px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 100%;
}

/* Modify the slider's background color to 
      green once the checkbox has been selected. */
input:checked+.slider {
    background-color: green;
}

/* When the checkbox is checked, shift the 
      white ball towards the right within the slider. */
input:checked+.slider:before {
    transform: translateX(13px);
}

.textAlignment {
    padding-left: 10px;
}

/* Trending amount billed (Line Chart) */
#lineBillingChart {
    width: 100%;
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

.dashboard-setting-form {
    display: flex;
    justify-content: space-between;
}

.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

/* Style the input fields */
.form-inline input {
    margin: 5px 0px 5px 16px;
    border: 1px solid #ddd;
}

.form-inline b {
    margin: 0px 0px 0px 16px;
}

#api_carrier {

    height: 31px !important;
}

#status {
    height: 31px !important;
}

/* responsive devices */

@media (max-width: 768px) {
    #lines_datatable_bulk {
        text-align: unset;
        margin-right: 0;
    }
}

@media (max-width: 576px) {

    #status {
        width: 81%;
    }

    #api_carrier {
        width: 82.8%;
    }

    #action {
        width: 84%;
    }

    #statusLabel,
    #selectIdLabel {
        margin-right: 10px;
        margin-left: 0px;
    }

    div.dataTables_wrapper div.dataTables_processing {
        width: auto;
        padding: 10px;
        background-color: #fff;
        box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.15);
        z-index: 99;
        min-height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

label.block {
    text-align: left;
}

.errorAdd {
    display: none;
}

#emailError {
    color: red;
}

#commentError {
    color: red;
}

#nameError {
    color: red;
}

/*10/07/2024*/
.dashboard-chart-toggle {
    flex-wrap: wrap;
}

.card-graph {
    height: 100%;
}

.traverse-feedback-inner {
    top: 0px;
}

.feedback-page-inner {
    overflow: auto;
    padding: 10px;
    height: 100vh;
}

.feedback-email {
    position: relative;
}

.feedback-email input {
    margin-bottom: 8px;
}

.feedback-email textarea {
    margin-bottom: 8px;
}

.feederror-mess {
    position: absolute;
    left: 0px;
}

.feedval-mess {
    position: absolute;
    left: 0px;
}

button:disabled,
button[disabled] {
    border: 1px solid #999999;
    background-color: #cacbff;
}

button[disabled]:hover {
    border: 1px solid #999999;
    background-color: #aeaffd;
    cursor: not-allowed;
}

.required:after {
    content: " *";
    color: red;
}

#informationMsg {
    color: #111827
}

#backButton {
    position: absolute;
    color: white;
    background: #3322b6;
    top: 3.5%;
    left: 5%;
    border-radius: 4px;
}


@media((max-width: 576px)) {
    #backButton {
        top: 2.9%;
    }
}

@media((min-width: 375px) and (max-width:424px)) {
    #backButton {
        top: 3.2%;
        height: 23px;
        width: 12px;
        left: 9px;
    }

    #backButton i {
        position: absolute;
        top: 10%;
        left: 24%;
    }
}

@media(max-width: 360px) {
    #backButton {
        top: 3.9%;
        left: 1%;
        * height: 20px;
        width: 20px;
    }

    #backButton i {
        position: absolute;
        top: 10%;
        left: 24%;
    }
}

.highcharts-data-table {
    width: 100%;
    overflow: auto;
    margin-top: 20px;
}

.highcharts-credits {
    display: none !important;
}


/* ------------11-11-2024--------------------- */

.newLineChart .highcharts-fixed {
    top: unset !important;
}

.dropdown-menu ul.dropdown-menu.inner {
    max-height: 170px !important;
}

.ls-toggle-menu .sidebar.dashboardSidebar {
    margin-left: 0px;
}

.ls-toggle-menu section.content.globalDashboardSidebar {
    margin-left: 250px;
}

/* term and condition page */

/* .title {
    color: #ffffff;
} */

.site-content {
    text-align: left;
    padding: 20px;
}

.flex-middle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-header .page-title {
    color: #fff;
    margin-bottom: 0;
    flex: 1;
    padding: 10px 20px 10px 0;
}

.page-header .breadcrumbs {
    margin-bottom: 0;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 800;
}

.none-style {
    list-style: none;
    padding-left: 0;
}

.page-header .breadcrumbs li {
    display: inline-block;
    color: #fff;
}

.page-header {
    width: 100%;
    min-height: 350px;
    color: #43baff;
    font-weight: 500;
    /* background: #262051 center center no-repeat; */
    background-size: cover;
}

.page-header .breadcrumbs li:before {
    content: "\f104";
    font-family: "flaticon";
    font-size: 7px;
    color: #43baff;
    margin: -2px 8px 0;
    display: inline-block;
    vertical-align: middle;
}

.page-header .breadcrumbs li:first-child::before {
    display: none;
}

.page-header .breadcrumbs li a {
    color: #aeaacb;
}

.custom-breadcrumb {
    left: 10px;
    bottom: 10px;
}

.page-header-overlay::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 40%);
    position: absolute;
    z-index: 0;
}


/* Custom CSS Styles for Warning Alert Box */

.page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: block;
}

.page-overlay.show {
    display: block;
}

.alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    display: block;
}

.storageAlert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 600px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    border: 1px solid #ddd;
    animation: fadeIn 0.5s;
}

.storageAlert strong {
    font-weight: bold;
    color: #f10000;
}

.storageClose {
    position: absolute;
    top: 15px;
    right: 10px;
    font-size: 15px;
    cursor: pointer;
    color: #aaa;
    border-radius: 5px;
    border-color: rgb(194, 194, 194);
}

.storageClose:hover {
    color: #666;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* hide number arrows */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


/* search box */
.topsearch .search-container {
    float: right;
}

.topsearch input[type=text] {
    padding: 9px;
    font-size: 14px;
    border: none;
    background-color: rgb(243, 243, 243);
}

h3.heading-line i {
    font-size: 24px;
}

.topsearch .search-container button {
    float: right;
    padding: 6px 10px;
    margin-right: 16px;
    background: #cecece;
    font-size: 17px;
    border: none;
    cursor: pointer;
}

body.theme-dark .dropdown-menu ul.menu .menu-info h4 {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
}

body.theme-dark .dropdown-menu ul.menu li a:hover h4 {
    color: #000 !important;
}

.topsearch .search-container button:hover {
    background: #a5a5a5;
}

.topsearch .search-container input[type="text"] {
    height: 38px;
}

@media screen and (max-width: 600px) {
    .topsearch .search-container {
        float: none;
    }

    .topsearch input[type=text],
    .topsearch .search-container button {
        display: block;
        text-align: left;
        width: 100%;
        padding: 8px 4px 9px 13px;
        border: 0;
        border-radius: 0px 6px 6px 0px;
        height: 38px;
        width: 100%;
        max-width: 50px;
    }
}

.topsearch input[type=text] {
    border: 1px solid #ccc;
    border-radius: 6px 0px 0px 6px;
    height: 45px;
    width: 100%;
    max-width: 200px;
}

.topsearch .search-container form {
    display: flex;
    align-items: center;
    justify-content: end;
}

.tc-link-login a {
    color: #fff;
}

/* CSS link color */
.tc-link-login a:hover {
    color: #FFF;
}

.tc-link-login {
    padding-top: 115px;
    font-size: 1rem;
}

.form-float.error input {
    border-color: red;
}

.error-message {
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

/* Login Form Css End */

/* Custom slider switch style */
.form-switch .form-check-input {
    width: 50px;
    height: 26px;
    background-color: #ccc;
    border: none;
    border-radius: 50px;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-switch .form-check-input::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    top: 2px;
    left: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

.form-switch .form-check-input:checked {
    background-color: #4CAF50;
}

.form-switch .form-check-input:checked::before {
    transform: translateX(24px);
}