﻿.was-validated select.form-control:valid, select.form-control.is-valid { 
    background-position: right calc(1.0em + 0.325rem) center; 
}
.was-validated select.form-control:invalid, select.form-control.is-invalid { 
    background-position: right calc(1.0em + 0.325rem) center; 
}
.badge-notification {
    position: absolute;
    font-size: .8rem;
    margin-top: -.1rem;
    margin-left: -.5rem;
    padding: .2em .45em;
}


/*UI Changes - Start*/
body {
    background: #ebedf3 !important;
    color: #181c32 !important;
}

.header-tabs .nav-item .nav-link .nav-desc {
    color: #1b75bc !important;
}

.header-tabs .nav-item .nav-link .nav-title {
    color: #fff !important;
}

.header-tabs .nav-item .nav-link .nav-desc {
    color: #ffffffc7 !important;
}

.header-tabs .nav-item .nav-link:focus .nav-desc,
.header-tabs .nav-item .nav-link:hover .nav-desc,
.header-tabs .nav-item .nav-link:focus .nav-title,
.header-tabs .nav-item .nav-link:hover .nav-title {
    color: #ffffffc7 !important;
}

.header-tabs .nav-item .nav-link.active .nav-title {
    color: #7E8299 !important;
}

.header-tabs .nav-item .nav-link.active .nav-desc {
    color: #B5B5C3 !important;
}
 
@media (min-width: 992px) {
    .header-tabs .nav-item .nav-link.active {
        background-color: #ffffff !important;
        color: #181C32 !important;
    }
    .header-tabs .nav-item .nav-link {
        background-color: #1b75bc !important;
        border-right: 1px solid #ebedf34f !important;
    }
}
@media (max-width: 991.98px) {

    .header-tabs .nav-item .nav-link {
        background-color: #ffffff !important;
        color: #181C32 !important;
    }

    .header-tabs .nav-item .nav-link.active {
        background-color: #1b75bc !important;
        border-right: 1px solid #ebedf34f !important;
    }

    .header-tabs .nav-item .nav-link.active .nav-title {
        color: #fff !important;
    }

   .header-tabs .nav-item .nav-link .nav-title {
        color: #7E8299 !important;
    }
}

.text-muted {
    color: #3F4254 !important;
}
/*UI Changes - End*/

/*Logo Animated*/
/* #img_logo {
    animation: animated_logo 5s 1;
    -moz-animation: animated_logo 5s 1;
    -webkit-animation: animated_logo 5s 1;
    -o-animation: animated_logo 5s 1;
}

@keyframes animated_logo
{
    0% {transform: rotate(0deg);left:0px;}
    25% {transform: rotate(20deg);left:0px;}
    50% {transform: rotate(0deg);left:500px;}
    55% {transform: rotate(0deg);left:500px;}
    70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100% {transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animated_logo
{
    0% {-webkit-transform: rotate(0deg);left:0px;}
    25% {-webkit-transform: rotate(20deg);left:0px;}
    50% {-webkit-transform: rotate(0deg);left:500px;}
    55% {-webkit-transform: rotate(0deg);left:500px;}
    70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100% {-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animated_logo
{
    0%  {-moz-transform: rotate(0deg);left:0px;}
    25% {-moz-transform: rotate(20deg);left:0px;}
    50%  {-moz-transform: rotate(0deg);left:500px;}
    55%  {-moz-transform: rotate(0deg);left:500px;}
    70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animated_logo
{
    0% {transform: rotate(0deg);left:0px;}
    25% {transform: rotate(20deg);left:0px;}
    50%  {transform: rotate(0deg);left:500px;}
    55%  {transform: rotate(0deg);left:500px;}
    70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
    100% {transform: rotate(-360deg);left:0px;}
}*/

/*Kendo custom css*/

.k-picker-wrap.k-state-default, .k-picker-wrap.k-state-focused, .k-picker-wrap.k-state-hover, .k-picker-wrap.k-state-disabled,
.k-dropdown-wrap.k-state-default, .k-dropdown-wrap.k-state-focused, .k-dropdown-wrap.k-state-hover, .k-dropdown-wrap.k-state-disabled,
.k-numeric-wrap.k-state-default, .k-numeric-wrap.k-state-focused, .k-numeric-wrap.k-state-hover, .k-numeric-wrap.k-state-disabled {
    line-height: 1.5385 !important;
    color: #333 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid #ddd !important;
    border-radius: .1875rem !important;
    box-shadow: 0 0 0 0 transparent !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
    background-clip: border-box !important;
}

.k-dropdown-wrap.k-state-default, .k-dropdown-wrap.k-state-focused, .k-dropdown-wrap.k-state-hover, .k-dropdown-wrap.k-state-disabled {
    height: calc(1.5385em + .875rem) !important; 
}

.k-dropdown-wrap .k-input {
    height: calc(1.5385em + .875rem) !important;
    line-height: inherit !important;
    padding: .4375rem .875rem !important;
}


.k-datepicker, .k-numerictextbox, .k-dropdown {
    width: 100% !important;
    font-size: .8125rem !important;
    font-weight: 400 !important;
    background-color: #fff !important;
}

.k-button, .k-header {
    font-size: .8125rem !important;
    font-weight: 400 !important;
}

.input-group > .k-widget {
    position: relative !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    width: 1% !important;
    margin-bottom: 0 !important;
}
/*Kendo - end*/

/* Ajax Processing */
/* Start by setting display:none to make this hidden.
           Then we position it in relation to the viewport window
           with position:fixed. Width, height, top and left speak
           speak for themselves. Background we set to 80% white with
           our animation centered, and no-repeating */
.ajax-processing {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
    background: url('/images/loader.gif') 50% 50% no-repeat;
}

/* When the body has the loading class, we turn
           the scrollbar off with overflow:hidden */
body.loading {
    /*overflow: hidden;*/
}

/* Anytime the body has the loading class, our modal element will be visible */
body.loading .ajax-processing {
    display: block;
}
/*End - Ajax Processing */

.option .option-label .option-body {
    color: #3F4254 !important;
}
.kv-fileinput-error {
    color: var(--danger);
}
.menu-lang img {
    max-height:32px !important; 
}