/******************* Generic Style ********************/
body {
    background-color: #e4e5e6;
    padding: 0;
    margin: 0;
    font-size: 1.3rem;
    color:#061253;
    font-family: Overpass,sans-serif
}

.text-white {
    color: #fff !important;
}

.no-padding {
    padding: 0;
}

.padding-right10{
    padding-right: 10px;
}
.no-horizantal-padding {
    padding: 2px 0;
}

.no-margin-bottom {
    margin-bottom: 0;
}

.margin-right10 {
    margin-right: 10px;
}

.margin-right30 {
    margin-right: 30px;
}

.margin-bottom20{
    margin-bottom: 20px;
}

.margin-bottom10{
    margin-bottom: 10px;
}
.margin-top20{
    margin-top: 20px;
}
.margin-top10{
    margin-top: 10px;
}
.margin-horizantal10 {
    margin-left: 10px;
    margin-right: 10px;
}

a:hover, a:focus {
    text-decoration: none !important;
}

.mx-auto{
    margin-left: auto;
    margin-right: auto;
}

.verticle-margin10{
    margin: 10px 0;
}

.display-flex{
    display: flex;
}

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

.thumbmail-wrapper{
    background-color: #f5fcf5;
    padding: 10px;
}
/*******************************************************/

.app-wrapper {
    min-height: 100vh;
    background-color: #f1f4f6;
    display: flex;
    flex-direction: column;
    margin: 0;
}

/********************* Top Navigation Bar ***********************/
.navbar-default {
    background-color: #fff;
    /*background-image: url('img/texture-bg.jpg');*/
    /*background-repeat: repeat-x;*/
    border-bottom: 1px solid #ccc;
    margin-bottom: 0;
    box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03),0 0.9375rem 1.40625rem rgba(4,9,20,0.03),0 0.25rem 0.53125rem rgba(4,9,20,0.05),0 0.125rem 0.1875rem rgba(4,9,20,0.03);
    position: fixed;
    width: 100%;
    top: 0;
}

.navbar-fixed-top {
    height: 60px;
    display: flex;
    border-bottom:2px solid #093895;
}

.navbar-brand {
    line-height: 50px;
    padding: 4px 20px;
    margin: 0;
}

.logo {
    height: 50px;
    text-align: left;
}

.navbar-toggle {
    padding: 5px 7px 3px 7px !important;
    color: #449d44;
}

.mobile-menu-icon {
    font-size: 16pt;
    font-weight: normal;
}

.navbar-toggle {
    margin-top: 12px !important;
}

.app-main {
    flex: 1;
    display: flex;
    z-index: 8;
    position: relative;
    padding-top: 60px;
}

.app-header-right {
    align-items: center;
    display: flex;
    margin-left: auto;
    padding-right: 20px;
}

.dropdown-menu-right {
    min-width: 270px;
    width: 100%;
}

.widget-content-wrapper {
    display: flex;
    flex: 1;
    position: relative;
    align-items: center;
}

.dropdown-menu {
    border-radius: 7px;
}

.dropdown-menu-header {
    color: #fff;
    margin-top: -.65rem;
    margin-bottom: .65rem;
    position: relative;
    z-index: 6;
}

.dropdown-menu-header-inner {
    /*margin: -1px -1px 0;*/
    padding: 1.5rem .5rem;
    position: relative;
    background-image: url("Images/textured_paper.png");
    background-repeat: no-repeat;
    opacity: .7;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.widget-content {
    padding: 10px;
    width: 100%;
}

.widget-content-left {
    margin-left: 8px;
}

.widget-content-right {
    margin-left: auto;
    margin-right: 8px;
}

.dropdown-menu.show {
    animation: fade-in2 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    display: block;
}

.user-dropdown-arrow {
    font-size: 9pt;
    opacity: .8;
}

.profile-text{
    width: 40px;
    height: 40px;
    background-color: #449d44;
    border-radius: 50%;
    font-size: 16pt;
    font-weight: bold;
    line-height: 35px;
}

.profile-text-danger{
    width: 40px;
    height: 40px;
    background-color: #b94a48;
    border-radius: 50%;
    font-size: 16pt;
    font-weight: bold;
    line-height: 35px;
}
/**************************************************************/

/************************ Media ***********************/

@media(min-width:768px) {
    .app-container {
        z-index: 9;
        flex: 1;
        flex-direction: column;
        display: flex;
        margin-left: 270px;
    }
}

@media(max-width:768px) {
    .app-container {
        z-index: 9;
        flex: 1;
        flex-direction: column;
        display: flex;
        margin: 0;
    }

    .app-sidebar {
        transition: all .3s ease;
        transform: translateX(-280px);
    }
}
/******************************************************/

/********************* Side Bar ***********************/
.app-sidebar {
    z-index: 11;
    position: fixed;
    min-width: 270px;
    background-color: #fff;
    border-right: 1px solid #ccc;
}

.app-sidebar-scroll {
    z-index: 15;
    width: 100%;
    position: relative;
    height: calc(100vh - 70px) !important;
    overflow: auto;
    padding: 10px 10px 10px 10px;
    margin-bottom: 10px;
}

.menu-icons {
    color: #b2b2b2;
    padding-right: 8px;
}

.app-sidebar .arrow {
    font-size: 9px;
    margin-top: 3px;
}

.in {
    transform: translateX(0);
}

.nav-second-level {
    margin-left: 20px;
    /*border-left: 3px solid #93EB9A;*/
    border-left: 3px solid #275FA9;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.nav > li > a {
    display: block;
    position: relative;
    color: #52585F;
    white-space: nowrap;
    transition: all .2s;
    font-size:15px;
}

.nav > li > form > a {
    display: block;
    position: relative;
    color: #52585F;
    white-space: nowrap;
    transition: all .2s;
}

    .nav > li > a:hover  {
        text-decoration: none;
        /*background-color: #A9F5D6 !important;*/
        background-color: #2987C5 !important;
        border-radius: 7px;
        font-weight: bold;
    }

    .nav > li > a:focus {
        text-decoration: none;
        background-color: #fff;
    }

    .nav-second-level > li > form > a:hover  {
        text-decoration: none;
        background-color: #A9F5D6 !important;
        border-radius: 7px;
        font-weight: bold;
    }

    .nav-second-level > li > form > a:focus {
        text-decoration: none;
        background-color: #fff;
    }

.nav-second-level li a {
    margin-left: 7px;
    display: block;
    padding: 6px 10px 6px 10px;
    position: relative;
    border-radius: 10px;
    background-color: none;
}

a.active{
    font-weight: bold;
}
/*************************************************************/

/******************** Wrapper & Container ********************/
.app-content {
    flex: 1;
    background-color: #fff;
    padding-right: 10px;
    overflow: auto;
}

.page-content {
    flex: 1;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 15px;
    margin: 15px 0;
}

.app-footer {
    border-top: #e9ecef solid 1px;
}

.app-footer-content {
    border-left: #e9ecef solid 1px;
    background: #fafbfc;
    padding: 0 1.5rem 0 .75rem;
    height: 60px;
    display: flex;
    align-content: center;
    align-items: center;
}
/********************************************************/

/********************* Page Header **********************/
.page-title-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 15px 8px 2px;
    text-align: left;
    /*border-bottom: #5cb85c solid 2px;*/
    border-bottom: #093895 solid 2px;

}

.page-title-icon {
    align-items: center;
    align-content: center;
    text-align: center;
    margin: 0 10px 0 0;
    /*background-image: linear-gradient(120deg, #fff 0%, #eee 100%) !important;
    box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03),0 0.9375rem 1.40625rem rgba(4,9,20,0.03),0 0.25rem 0.53125rem rgba(4,9,20,0.05),0 0.125rem 0.1875rem rgba(4,9,20,0.03);*/
    border-radius: .25rem;
    width: 50px;
    height: 50px;
    line-height: 55px;
    color: #2769B0;
    font-size: 30pt;
}

.page-title-heading {
    font-size: 2.25rem;
    font-weight: 400;
    display: flex;
    align-content: center;
    align-items: center;
}

.page-title-main-text {
    width: 100%;
    /*color: #5cb85c;*/
    color: #275FA9;
}

.page-title-sub-text {
    padding: 3px 0 0;
    font-size: 1.25rem;
    opacity: .6;
    /*color: #171717;*/
    color: #666769;
    font-weight: bolder;
}

.page-title-actions {
    margin-left: auto;
}

a:focus {
    outline: none;
}
/***********************************************************/

/************************ Animate **************************/
@-webkit-keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
/**********************************************************/


/******************* Custom Validation ********************/
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

.has-success .form-control-feedback {
    color: #3c763d;
}

.has-feedback .form-control {
    padding-right: 42.5px;
}

input.valid {
    border: 1px solid #449d44;
}

.valid + .form-control-feedback::before {
    content: "\e013" !important;
    color: #449d44;
}

.input-validation-error + .form-control-feedback::before {
    content: "\e014" !important;
    color: #b94a48;
}
select.input-validation-error + .select2>.selection>.select2-selection {
    border: 1px solid #b94a48;
}
select.valid + .select2>.selection>.select2-selection {
    border: 1px solid #449d44;
}
.selection>.select2-selection{
    height:33px !important;
}
.selection>.select2-selection>#select2-RoleName-container{
    line-height:33px !important;
}
.selection>.select2-selection>.select2-selection__arrow{
    height:33px !important;
}
 .selection > .select2-selection > .select2-selection__rendered {
        line-height: 33px !important;
    }
.form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    pointer-events: none;
}
/**********************************************************/

/***************** User Grid Style *******************/
.image-thumb {
    display: block;
    padding: 4px;
    margin-right: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}
.grid-user-info{
    align-items: center;
}

.grid-button{
    width: 80px;
    margin: 5px 0;
}

/************************* Cropper ************************/
.img-container {
    min-height: 100px;
    background-image: url("img/img-bg.png");
    background-repeat: repeat;
}

/***************** Image Upload ****************/
.image-preview{
    margin-bottom: 5px;
    height: 150px; 
    width: 130px
}

.cropper-container{
    top: 0!important;
}
.cropper-preview{
    margin-left: auto; margin-right: auto; 
    height: 140px; 
    width: 120px; 
    overflow:hidden;
    margin-top: 8px;
    margin-bottom: 4px;
    background-image: url("img/img-bg.png");
    background-repeat: repeat;
}

/*******************************************************/

/******************** Login Page ***********************/
.login-page-wrapper {
    background: url("../Content/Images/sdktexture.jpg") top right no-repeat;
    background-size: cover;
    width: 100%;
}

.login-content-wrapper {
    padding: 20px;
    flex-grow: 1;
    background-size: auto;
    background-size: cover;
    min-height: calc(100vh - 61px);
}
.login-form {
    background: #ffffff;
    padding: 30px 40px 10px;
    border-radius: 8px;
    box-shadow: 0 -25px 37.7px 11.3px rgba(8, 143, 220, 0.07);
}

.login-page-footer {
    border-top: #000 solid 1px;
    border-radius:10px;
    margin-top:5px;
}

.login-page-footer-content {
    background: #010101;
    padding: 0 1.5rem 0 .75rem;
    height: 50px;
    display: flex;
    align-content: center;
    align-items: center;
    opacity: .8;
    border-radius:10px;
}

.validation-summary-errors > ul {
    list-style-type: none;
    padding:0;
    margin-bottom: 0;
    text-align: justify;
}

.logout-button-style{
    margin: 15px 8px;
}
/*****************************************************/

/**************** Forgot Password ********************/
.forgot-password-content{
    margin-top: 100px;
}

.forgot-password-bg{
    background-image: url("img/forgotpassword.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/*****************************************************/

.required:after {
    content: "*";
    color: #D1413E;
    font-weight: 400;
    font-size: 15px;
    position: absolute;
    margin-left: 3px;
}