/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */ -->


/* color variables defined here, use this to change theme color globaly */
:root {
    --clr-primary:  #1e90ff;
    --clr-primary-dark: #006ec6;
    --clr-white: #fff;
    --clr-primary-bx-shadow: 0 0 10px 1px rgb(0 0 0 / 21%);
    --clr-primary-light-bg: rgb(9 137 237 / 10%);
  }

body{
    color: #000;
}
/* changing main-menu bg color */
.semi-dark-layout .main-menu-content .navigation-main {
    background: linear-gradient(135deg, var(--clr-white) 0, var(--clr-white) 60%);
}
.semi-dark-layout .main-menu {
    background:linear-gradient(135deg, var(--clr-white) 0, var(--clr-white) 60%);
}

.vertical-layout.vertical-menu-modern .main-menu .navigation > li > a svg, .vertical-layout.vertical-menu-modern .main-menu .navigation > li > a i {
    color: var(--clr-primary);
}
.vertical-layout.vertical-menu-modern .main-menu .navigation > li.active > a svg, .vertical-layout.vertical-menu-modern .main-menu .navigation > li.active > a i {
    color: var(--clr-white);
}

/* customizing select2  */
.select2-container--classic .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
    color: #fff;
    padding: 2px 5px;
}

/* Importsustome */
/* fileupload */
.dropzone .dz-message:before {
    content: '';
    font-size: 40px !important;
	top:110px;
    width: 30px;
    height: 30px;
    display: inline-block;
    color:var(--clr-primary-dark)!important;
    text-indent: 0px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}
.dropzone {
    min-height: 200px;
	border: 2px	dashed var(--clr-primary-dark)!important;
    border-color: var(--clr-primary-dark)!important;
}
.dropzone .dz-message {
    font-size: 16px !important;
    color:var(--clr-primary-dark)!important;
}


/* Importsustome */
/* customizing main0menu active state bg */
.main-menu.menu-dark .navigation > li.active > a {
	background: var(--clr-primary-dark);
    box-shadow: var(--clr-primary-bx-shadow);
}

.main-menu.menu-dark .navigation > li ul .active {
	background: var(--clr-primary-dark);
    box-shadow: var(--clr-primary-bx-shadow);
    border-radius: 4px;
    z-index: 1;
}
.semi-dark-layout .main-menu .shadow-bottom {
    background: var(--clr-white);
}

.nav-pills .nav-link.active {
    border-color: var(--clr-primary) !important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--clr-primary) !important;
}

/* customizing button colors */
.btn-primary:hover:not(.disabled):not(:disabled) {
    box-shadow: 0 8px 25px -8px var(--clr-primary);
}
.btn-primary:focus, .btn-primary:active, .btn-primary.active {
    color: #fff;
    background-color: var(--clr-primary) !important;
    border: 0;
}
.btn-primary {
    border-color: var(--clr-primary) !important;
    background-color: var(--clr-primary) !important;
    color: #fff !important;
}

.btn-outline-primary {
    border: 1px solid var(--clr-primary) !important;
    background-color: transparent;
    color: var(--clr-primary) !important;
}

.page-item.active .page-link {
    z-index: 3;
    border-radius: 5rem;
    background-color: var(--clr-primary) !important;
    color: #fff !important;
    font-weight: 600;
}

/* customizing switch color */
.form-switch .form-check-input:not(:disabled):checked, .form-switch .form-check-input:not(:disabled):focus {
    box-shadow: none !important;
}
.form-check-primary .form-check-input:checked {
	border-color: var(--clr-primary);
    background-color: var(--clr-primary);
}


/* customizing badge color */
.badge.badge-light-primary {
    background-color: rgb(8 135 236 / 10%);
    color: var(--clr-primary) !important;
}
.bg-primary {
    background-color: var(--clr-primary) !important;
}

.bg-light-primary {
    background-color: rgb(8 135 236 / 10%);
    color:var(--clr-primary) !important;
}

/* customizing primary text color */
.text-primary {
    color:var(--clr-primary)!important;
}

/* customizting form-controll input focus color */
.form-control:focus {
    border-color: var(--clr-primary)
}
.input-group:not(.bootstrap-touchspin):focus-within .form-control, .input-group:not(.bootstrap-touchspin):focus-within .input-group-text {
    border-color: var(--clr-primary)
}

/* customizing main-menu item expanded view bg */
.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content {
    background-color: var(--clr-white);
}
.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content li:not(.active) a {
    background-color: var(--clr-white);
}
.semi-dark-layout .main-menu-content .navigation-main .nav-item.open:not(.sidebar-group-active) > a {
    background-color: var(--clr-white);
}

.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub > a:after {
    /* background-image: url(../images/ico-has-sub-after.svg); */
    width: 10px;
    height: 10px;
    top:17px
}


/* logo text color cutomization */
.main-menu .navbar-header .navbar-brand .brand-text {
    color: #ffffff;
    font-family: cursive;
    font-style: italic;
    font-size: 28px;
}

.main-menu .navbar-header .navbar-brand {
    display: flex;
    align-items: center;
    margin-top: 9px;
    font-size: inherit;
}

/* customizing main-menu text color */
.semi-dark-layout .main-menu-content .navigation-main .nav-item a:after, .semi-dark-layout .main-menu-content .navigation-main .nav-item a {
    color: #000 !important;
}

/* customizing number count bagge bg */
.semi-dark-layout .main-menu-content .navigation-main .nav-item .msg-count{
	background-color:var(--clr-primary);
    color: var(--clr-white);
    font-size: 10px;
}

.avatar.bg-light-primary {
    color: var(--clr-primary) !important;
}

/* customizing radio checkbox colors */
.form-check-input:checked {
    background-color:var(--clr-primary);
    border-color: var(--clr-primary);
}


/* customizing the nav color */
a {
    color: var(--clr-primary);
    text-decoration: none;
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--clr-primary);
}

.dropdown-item:hover, .dropdown-item:focus {
    color: var(--clr-primary);
    background-color: var(--clr-primary-light-bg);
}

.main-menu.menu-dark .navigation > li.open:not(.menu-item-closing) > a, .main-menu.menu-dark .navigation > li.sidebar-group-active > a {
    color: #c3c3c3;
    background: transparent;
    border-radius: 6px;
}
.semi-dark-layout .main-menu:not(.expanded) .navigation .sidebar-group-active > a {
    background-color: transparent !important;
}

/* theme font color overrides */
.table {
    color: #000000;
}
html .content .content-wrapper .content-header-title {
    font-weight: 500;
    color: #4c4c4c;
}
.form-select {
    color: #000000;
}
.form-label {
    color: #000000;
}
.form-check-label {
    cursor: pointer;
    color: #000;
}


/* table element customization */
div.dataTables_wrapper div.dataTables_filter select, div.dataTables_wrapper div.dataTables_length select {
    background-position: calc(100% - 3px) 5px, calc(100% - 20px) 13px, 100% 0;
    width: 5rem;
    margin: 0 0.5rem;
}

/* font tage color override */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #000;
}
html body p {
    line-height: 1.5rem;
    color: #000;
}

/* time line color customization */
.timeline .timeline-item .timeline-point {
    border: 1px solid  var(--clr-primary);
}
.timeline .timeline-item .timeline-point i, .timeline .timeline-item .timeline-point svg {
    color:  var(--clr-primary);
}

/* dropzone customizaion */
.dropzone.custom .dz-message {
    font-size: 16px;
    color: var(--clr-primary);
}
.dropzone.custom .dz-message:before {
    font-size: 58px;
    position: absolute;
    top: 112px;
    width: 32px;
    height: 32px;
    display: inline-block;
    line-height: 1;
    z-index: 2;
    color: var(--clr-primary);
    text-indent: 0px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    background-image: url('../images/ico-drop-file.png');
    
}
.dropzone.custom {
    min-height: 200px;
    border: 2px dashed var(--clr-primary);
    background: #f8f8f8;
    position: relative;
}

/* tab customization */
.nav.nav-tabs .nav-item .nav-link.active {
    border: none;
    position: relative;
    color: var(--clr-primary);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    background-color: transparent;
}
.nav.nav-tabs .nav-item .nav-link.active:after {
    content: attr(data-before);
    height: 2px;
    width: 100%;
    left: 0;
    position: absolute;
    bottom: 0;
    background: var(--clr-primary) !important;
    box-shadow: 0 0 8px 0 rgb(115 103 240 / 50%) !important;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.nav-tabs .nav-link {
    color: #000000;
    border: none;
    min-width: auto;
    font-weight: 450;
    padding: 0.61rem 1.2rem;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    font-size: 14px;
}
/* nav tab costomization */

.tabs-custom-boxed{
    background-color: #eaeaea;
    z-index: 9;
}
.tabs-custom-boxed .nav-item .nav-link.active {
    color: #000 !important;
    background-color: #fff !important;
    font-weight: 700 !important;
}
.tabs-custom-boxed .nav-item .nav-link.active:after {
    height: 0 !important;
}
.hiddenRow{
    padding: 0 !important;
}

.faq-custom .accordion-item {
    border: 1px solid #dcdcdc  !important;
    color: #000;
}

.faq-custom .accordion-item:not(:last-of-type) {
    border-bottom: 1px solid #dcdcdc ;
}
.faq-custom .accordion-button{
 color: #000;
}

.table thead th, .table tfoot th {
    vertical-align: top;
    text-transform: capitalize;
    font-size: 0.857rem;
    letter-spacing: 0.5px;
}

.auth-wrapper {
    display: flex;
    flex-basis: 100%;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 95) !important;
    width: 100%;
}

.card-title {
    margin-bottom: 10px;
}

.custom-datatable .dataTables_length{
    margin-left: 20px;
}
.custom-datatable .dataTables_filter{
    margin-right: 20px;
}

.custom-datatable .dataTables_info{
    margin-left: 20px;
}
.custom-datatable .dataTables_paginate{
    margin-right: 20px !important;
}

.custom-datatable .user-info span{
    font-size: 12px;
    color: #464646;
}

.rounded-pill {
    font-weight: 400;
}


.b-avatar{
    display: flex;
    align-items: center;
    justify-content: center;
}
.b-avatar.badge-light-white {
    color: #fff;
}
.b-avatar.badge-light-white {
    background-color: hsla(0, 0%, 100%, .12);
}
.b-avatar.badge-light-black {
    color: #000;
}
.b-avatar.badge-light-black {
    background-color: rgba(0, 0, 0, .12);
}
.b-avatar.badge-light-dark {
    color: #4b4b4b;
}
 .b-avatar.badge-light-dark {
    background-color: rgba(75, 75, 75, .12);
}
.b-avatar.badge-light-light {
    color: #f6f6f6;
}
.b-avatar.badge-light-light {
    background-color: hsla(0, 0%, 96.5%, .12);
}
.b-avatar.badge-light-primary {
    color: #7367f0;
}
.b-avatar.badge-light-primary {
    background-color: rgba(115, 103, 240, .12);
}
.b-avatar.badge-light-secondary {
    color: #82868b;
}
.b-avatar.badge-light-secondary {
    background-color: rgba(130, 134, 139, .12);
}
.b-avatar.badge-light-success {
    color: #28c76f;
}
 .b-avatar.badge-light-success {
    background-color: rgba(40, 199, 111, .12);
}
.b-avatar.badge-light-info {
    color: #00cfe8;
}
 .b-avatar.badge-light-info {
    background-color: #e0f9fc;
}
.b-avatar.badge-light-warning {
    color: #ff9f43;
}
.b-avatar.badge-light-warning {
    background-color: rgba(255, 159, 67, .12);
}
.b-avatar.badge-light-danger {
    color: #ea5455;
}
.b-avatar.badge-light-danger {
    background-color: rgb(247 221 221);
}

.badge {
    display: inline-block;
    font-weight: 400;
}


/* responsive fixes - 31-12-21*/

@media only screen and (max-width: 575px) {
    .auth-wrapper .img-logo{
        margin-top: 35px !important;
        margin-bottom: 40px;
    }
  }