@import "config.css";

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="email"]:focus,
input[type="email"]:focus-within,
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px !important;
}

/* input, select { font-size: 100%; } */

/* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7  */
@media screen and (device-aspect-ratio: 375/667) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"], 
    input[type="tel"], input[type="url"]{ font-size: 16px; }
}

@media screen and (device-aspect-ratio: 9/16) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="tel"], input[type="url"]{ font-size: 16px; }
}

/* Edit Here extra css */
.select2.select2-container {
    width: calc(100% - 44px) !important;
}

.acc-card:hover {
    border: 2px solid var(--primary);
}

.acc-card label:hover {
    cursor: pointer;
}

.wizard-content .wizard>.steps>ul>li.current .step {
    border-color: var(--primary);
    background-color: #fff;
    color: var(--primary);
}

.wizard-content .wizard>.steps>ul>li.done .step {
    background-color: var(--primary);
    /* background-color: #2962FF; */
    border-color: var(--primary);
    color: #fff;
}

.wizard-content .wizard.wizard-circle>.steps>ul>li:after, .wizard-content .wizard.wizard-circle>.steps>ul>li:before {
    background-color: var(--primary);
}

#main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin5] .sidebar-nav ul .sidebar-item.selected>.sidebar-link, #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin5] .sidebar-nav ul .sidebar-item.selected>.sidebar-link {
    background-color: var(--primary);  
}

#main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin5] .sidebar-nav ul, #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin5] .sidebar-nav ul {
    background: #000000;
}

#main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin5], #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin5] {
    background: #000000;
}

#main-wrapper[data-layout=horizontal] .topbar .top-navbar .navbar-header[data-logobg=skin5], #main-wrapper[data-layout=vertical] .topbar .top-navbar .navbar-header[data-logobg=skin5] {
    background: #000000;
}

#main-wrapper[data-layout=horizontal] .topbar .navbar-collapse[data-navbarbg=skin5], #main-wrapper[data-layout=vertical] .topbar .navbar-collapse[data-navbarbg=skin5] {
    background: #000000;
}


.wizard-content .wizard>.actions>ul>li>a {
    background: var(--primary);
}

.wizard-content .wizard>.actions a, .wizard-content .wizard>.actions a:hover, .wizard>.actions a:hover {
    background: var(--primary);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--primary);
    border-color: #ffffff #ffffff var(--primary);
}
.nav-tabs .nav-link {
    color: gray;
}
.form-check:hover {
    color: var(--primary);
    cursor: pointer;
}
.scroll-sidebar {
    height: 100%;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--primary);
}
.form-control {
    font-weight: 500;
    color: #4b383c;
}
.form-control::placeholder { 
    color: #cac8c8;
    font-weight: 200;
    opacity: 1; 
}

#main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav>ul>.sidebar-item>.sidebar-link.active,
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav>ul>.sidebar-item>.sidebar-link.active {
    background-color: var(--primary);
    color: #fff !important;
    opacity: 1;
    font-weight: 400
}

#main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav>ul>.sidebar-item>.sidebar-link.active i,
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav>ul>.sidebar-item>.sidebar-link.active i {
    color: #fff !important
}

#main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav>ul>.sidebar-item>.sidebar-link.active:after,
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav>ul>.sidebar-item>.sidebar-link.active:after {
    border-color: #fff
}

#main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav ul .sidebar-item.selected>.sidebar-link, #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav ul .sidebar-item.selected>.sidebar-link {
    background-color: var(--primary);
}

#main-wrapper[data-layout=horizontal] .topbar .navbar-collapse[data-navbarbg=skin6], #main-wrapper[data-layout=horizontal] .topbar[data-navbarbg=skin6], #main-wrapper[data-layout=vertical] .topbar .navbar-collapse[data-navbarbg=skin6], #main-wrapper[data-layout=vertical] .topbar[data-navbarbg=skin6] {
    background: #ffffff;
}


.form-check-input.primary:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.form-check-input .check-outline .outline-primary {
    border: 1px solid var(--primary);
    background-color: transparent
}

.table-striped>tbody>tr:nth-of-type(odd) {
    --bs-table-accent-bg: #eeeeee!important;
}

.left-sidebar {
    z-index: 11;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
}

div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child {
    text-align: right;
}

/* dark theme set */
#main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin5] .sidebar-nav>ul>.sidebar-item>.sidebar-link.active,
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin5] .sidebar-nav>ul>.sidebar-item>.sidebar-link.active {
    background-color: #3d3d3d;
    color: #ffffff !important;
    opacity: 1;
    font-weight: 400
}

#main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin5] .sidebar-nav>ul>.sidebar-item>.sidebar-link.active i,
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin5] .sidebar-nav>ul>.sidebar-item>.sidebar-link.active i{
    color: var(--primary) !important;
}

.payment-card {
    width: 200px;
    height: 200px;
}

.navbar-dark .navbar-nav .nav-link.sidebartoggler {
    color: var(--primary);
}

.navbar-dark .navbar-nav .nav-link.sidebartoggler:hover {
    color: var(--primary);
}

/* Responsive */
@media (max-width:1440px) {
    
}
@media (max-width:768px) {
    .wizard-content .wizard > .actions > ul > li {
        margin: 0 auto;
    }
    .wizard-content .wizard > .actions {
        padding: 20px 10px;
    }
}

@media (max-width:525px) {
    #main-wrapper[data-sidebartype=mini-sidebar] .left-sidebar, #main-wrapper[data-sidebartype=mini-sidebar] .left-sidebar .sidebar-footer {
        left: -100%;
    }
    #main-wrapper.show-sidebar .left-sidebar, #main-wrapper.show-sidebar .left-sidebar .sidebar-footer {
        left: 0;
    }
    .left-sidebar {
        top: 10px;
        width: 100%;
    }
}

@media (max-width:425px) {
    .topbar .top-navbar .navbar-header .navbar-brand {
        padding: 0 25px;
    }
    #main-wrapper[data-sidebartype=mini-sidebar] .left-sidebar, #main-wrapper[data-sidebartype=mini-sidebar] .left-sidebar .sidebar-footer {
        left: -100%;
    }
    #main-wrapper.show-sidebar .left-sidebar, #main-wrapper.show-sidebar .left-sidebar .sidebar-footer {
        left: 0;
    }
    .left-sidebar {
        top: 10px;
        width: 100%;
    }
}