/*Sidear vertical navigation*/
html,
body {
    height: 100%;
}
body {
    background: #ffffff;
}
body.logged-in{
    background: #F6F9FE;
}
body.logged-in nav.navbar, body.logged-in main {
    margin-left: 100px;
}
.required::after{ 
    content:'*'; 
    color:red; 
    padding-left:5px;
}
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100px;
    background-color: darkblue;
    color: #fff;
    z-index:21;
}
main{

}
.nav-item{
    position:relative;
}
.nav-tabs {
    border-bottom: 0px solid #dee2e6;
    padding: 0;
}
.top-header + .nav-tabs {
    background: #73abf3
}
.nav-tabs .nav-item {
    position: relative;
    box-sizing: border-box;
}


.nav-tabs .nav-link {
    border: 1px solid #AECCF3;
    border-radius: 18px 18px 0px 0px;
    background-color: #F8FBFF;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #1877F2;
    background-color: white;
    border-radius: 18px 18px 0px 0px;
    border: 1px solid #AECCF3;
    font-weight: 600;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    background-color: #FFF;
    border: 1px solid #AECCF3;
}




.sidebar .nav-item a.nav-link {
    color: #fff;
    font-size: 20px;
    text-align: center;
    position: relative;
}
.sidebar .nav-item a.nav-link i {
    padding: 10px;
    border-radius: 10px;
}

.sidebar .nav-item a.nav-link.active i,
.sidebar .nav-item a.nav-link:hover i {
    color: #e80b00;
    background-color: #fff;
}

.dataTables_wrapper .top,
.dataTables_wrapper .bottom {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
/*height: 250px;*/
}
.dataTables_wrapper .top > div,
.dataTables_wrapper .bottom > div {
width: 50%;
}

.scroll{
    overflow-y: scroll;
    overflow-x: hidden;
}
.scroll-300{
    height:177px;
    padding-right: 50px;
}
/* width */
::-webkit-scrollbar {
  width: 4px;
}
/* Track */
::-webkit-scrollbar-track {
  background: ##F9F9F9;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #EAEAEA;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #EAEAEA;
}


/*import page styles*/
/*.row{
    padding: 15px 0;
    display:block;
}*/
.error{
    color: #dc3545 !important;
}
.box__dragndrop,
.box__uploading,
.box__success,
.box__error {
  display: none;
}

.box {
    font-size: 1.25rem;
    background-color: #c8dadf;
    position: relative;
    /*padding: 100px 20px;*/
    text-align: center;
    /*max-width: 550px;*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.box.has-advanced-upload {
    background: #FFFFFF;
    border: 1px dashed #AECCF3;
    border-radius: 10px;
    /*outline-offset: -10px;*/
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
    height: 171px;
}

.box.has-advanced-upload .box__icon {
    width: 100%;
    height: 45px;
    display: block;
    /*margin-bottom: 40px;*/
}
.box__file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.box__input > label.btn {
    max-width: 80%;
    background: #73ABF3;
    border-radius: 5px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    /*text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;*/
}
.box__button {
    font-weight: 700;
    color: #e5edf1;
    background-color: #39bfd3;
    display: none;
    padding: 8px 16px;
    margin: 40px auto 0;
}
.box__uploading {
    font-style: italic;
}
.box__success {
    -webkit-animation: appear-from-inside .25s ease-in-out;
    animation: appear-from-inside .25s ease-in-out;
}
.box__progress{
    width: 0%;
    height: 5px;
    background-color: #002687;
    margin-bottom: 8px;
}
.box.has-advanced-upload .box__dragndrop {
  display: inline;
}

#fin-store-list-box{

}
#fin-store-list-box span{
    border-bottom: 1px solid #002687;
    display:block;
    overflow: hidden;
}
#fin-store-list-box .fin-store-status{
    position: absolute;
    right: 15px;
    top: 5px;
    cursor: pointer;
    /*background: #fff;*/
    padding-left: 20px;
    padding-right: 6px;
}
.sidebar-hover-menu{
    position: fixed;
    top: 0;
    left: 100px;
    width: 400px;
    background-color: #F8FBFF;
    z-index: 20;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s linear;
}
.sidebar-hover-menu:before{
    content: '';
    position: fixed;
    background-color: #00000099;
    top: 0;
    left: 100px;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
}
.sidebar-hover-menu a{
    padding: 20px 23px;
    display: block;
    border-bottom: 1px solid #AECCF3;
    background-color: #F8FBFF;
}
.sidebar-hover-menu a:hover{
    background-color: #EDF4FE;
    text-decoration: none;
}

/*turn on specific sidebar submenu*/
 .nav-item-has-hover:hover  .sidebar-hover-menu  {
    left: 100px;
    visibility: visible;
    opacity: 1;
    transition: all 0.3s linear;
}
.nav-item-has-hover:hover:before{
    content: '\f054';
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    color: #FFFFFF;
    position: absolute;
    right: 8px;
    top: 17px;
    bottom: 0;
    font-size: 14px;
}

.top-header{
    background-color: #73ABF3;
    padding: 10px;
    /*padding-bottom: 25px;*/
    background: #73ABF3;
    border-radius: 8px 8px 0px 0px;
    /*margin-bottom: -20px;*/

    font-weight: 800;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/*====================================
=            Table styles            =
====================================*/

.table-wrapper {
    background-color: #fff;
}

.table-wrapper thead {
    background-color: rgba(150, 156, 186, 0.16);
}

.table-wrapper thead th {
    color: #002687;
}

/*=====  End of Table styles  ======*/





/*====================================
=            Login form            =
====================================*/
#navbarSupportedContent .nav-link{
    border: 1px solid #73ABF3;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.3px;
    color: #73ABF3;
    margin-left:20px;
    padding: 4px 10px;
}

.login .card-header, .register .card-header{
    display:none;
}
.login .card, .register .card{
    background: #F6F9FE;
    border: 0;
    padding: 7vh 0;
    margin: 5vh 0 0 0;
}
.login .card label, .register .card label{
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.2px;
    color: #002687;
}
.login .card input, .register .card input{
    border: 0;
    border-radius: 0;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    align-items: center;
    letter-spacing: 0.2px;
}
.login .card button[type="submit"], .register .card button[type="submit"]{
    background: #1877F2;
    border-radius: 5px;
    font-weight: 800;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    letter-spacing: 0.01em;
    padding: 7px 90px;
}
.register-text{
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    letter-spacing: 0.2px;
    color: #737B7D;
    margin: 10px 20px 0 0;
}
.register-text a{
    font-weight: bold;
    text-transform: uppercase;
    color: #E80B00;
    text-decoration: none;
}
.register .card .select2{
    width: 100% !important;
    border:0 !important;;
    border-radius: 0 !important;;
}
.register .select2-container--classic .select2-selection--single {
     background-color: #FFF; 
     border: 0; 
     border-radius: 0; 
     outline: 0; 
     background-image: none; 
}
.register .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
    background-image: none;
}
.register .select2-container--classic .select2-selection--single .select2-selection__arrow {
     background-color: transparent; 
     border: 0; 
     background-image: none; 
}
.select2-container--classic.select2-container--open .select2-dropdown {
    border:0;
}
select.select2.select2multiple + span.select2 ul {
    border: none;
}
select.select2.select2multiple + span.select2 textarea {
 width: auto;
}
.balloon{
    position: absolute;
    top: -33px;
    left: 50px;
    font-weight: 800;
    font-size: 20px;
    line-height: 27px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.26em;
    background: #E80B00;
    color: #FFFFFF;
    padding: 3px 20px;
    text-transform: uppercase;
}
.balloon:after{
    content: '';
    position: absolute;
    bottom: -24px;
    left: 40px;
    width: 25px;
    height: 25px;
    background: #e80b00;
    background: linear-gradient(45deg, transparent 50%, #e80b00 50%);
}
.login .balloon{
    background: #1877F2;    
}
.login .balloon:after{
    background: #1877F2;
    background: linear-gradient(45deg, transparent 50%, #1877F2 50%);
}




/*====================================
=            Login form            =
====================================*/

/*.modal-backdrop {
    position: fixed;
    top: 90px;
    left: 120px;
    z-index: 1040;
    width: calc(100vw - 140px);
    height: calc(100vh - 130px);
    background: rgba(96, 99, 108, 0.74);
    border-radius: 30px;
}*/





/*====================================
=            Data tables            =
====================================*/
.table-wrapper{
    padding-bottom: 30px;
}
.dataTables_wrapper .top, .dataTables_wrapper .bottom  {
    /*display:none;*/
}

.dataTable{
    background: #FFFFFF;
    border: 0;
}
.dataTable th{
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.4px;
    color: #002687;
    padding: 20px 15px;
    background: rgba(150, 156, 186, 0.16);
}
.dataTable td{
    /*font-weight: 500;*/
    font-size: 13px;
    line-height: 24px;
    letter-spacing: 0.4px;
    color: rgba(116, 116, 116, 1);
    padding: 12px 15px;
}
.dataTable tr.odd{
    background: #FFF;
}
.dataTable tr.even{
    background: #FCFCFC;
}
.dataTable tr.alert-danger{
    background: rgba(255, 146, 178, 0.62);
}
.dataTable tr.alert-success{
    background: rgba(149, 255, 153, 0.77);
}

.dataTable.table-bordered th, .dataTable.table-bordered td {
    border:0;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.dataTable.table-bordered th:last-child, .dataTable.table-bordered td:last-child {
    border:0;
}
.dataTable:not(#users-table,#roles-table) td .btn{
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.115em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: #1877F2;
    border-radius: 30px;
    padding: 6px 20px;
    border: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;    
}
.dataTable td .cancel.btn{
    background: #E80B00 !important;
}
.dataTable td .cancel.btn.disabled{
    background: transparent !important;
    border: 1px solid #747474 !important;
    color: #747474 !important;
}
.dataTable:not(#users-table,#roles-table) td .btn i{
    font-size: 20px;
    margin-right:10px;
}




/*====================================
=            Modal            =
====================================*/

.modal .modal-content{
    background: #F6F9FE;
    border-radius: 8px 8px 0px 0px;
}
.modal .modal-title {
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #002687;
}
.modal .modal-header {
    border-bottom: 1px solid rgba(96, 99, 108, 0.74);
}
.modal .modal-body label{
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.2px;
    color: #002687;    
}
.modal button[type="submit"]{
    font-weight: 800;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    letter-spacing: 1px;
    color: #FFFFFF;
    background: #1877F2;
}
.modal .modal-body label[for="year-1"], .modal .modal-body label[for="year-2"], .modal .modal-body label[for="year-3"], .modal .modal-body label[for="full-proposal"], .modal .modal-body label[for="budget"], .modal .modal-body label[for="self-evaulation"], .modal .modal-body label[for="interim_report"], .modal .modal-body label[for="final_report"], .modal .modal-body label[for="self_evaluation_2"], .modal .modal-body label[for="fin_report"], .modal .modal-body label[for="docs"], .modal .modal-body label[for="guide"], .modal .modal-body label[for="report_guide"]    {
    font-weight: normal;
    font-size: 14px;
    letter-spacing: 0.2px;
    color: #737B7D;  
}
.modal .modal-body label[for="year-1"], .modal .modal-body label[for="year-2"], .modal .modal-body label[for="year-3"]{
    background: #fff;  
}
.modal .modal-body .text-info{
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.2px;
    color: #002687 !important;
}
.modal .modal-body ul {
    border-left: 1px solid #002687;
    padding-left: 30px;
}
.modal .modal-body #summary, .modal .modal-body #activities-list, .modal .modal-body #gm-comment {
    display: block;
    padding:5px;
}




/*====================================
=     Training for mobile-teams      =
====================================*/

.training-filter {
    position: relative;
}


.training-filter #trainings-table_filter{
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    top: 60px;
}

.training-filter input[type="search"]{
    background: #AECCF3;
    border-radius: 20px;
}

.select2-container {
    width: 100% !important;
}
.select2-container--default .select2-selection--multiple {
    background-color: white;
    border: 2px solid #f3f5f7;
    border-radius: 0px;
    cursor: text;
    padding: 3px 12px;
    line-height: normal;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
box-shadow: 0px 2px 5px 0 rgb(0 0 0 / 5%); */
    background-color: #ffffff;
    border: none;
    /* border-radius: 0; */
    /* outline: 0; */
    line-height: normal;
    display: flex;
    flex-direction: column;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e5e5e5;
    border: 0;
    border-radius: 2px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 2px 5px;
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    text-align: left;
    color: #0f3a6c;
    margin-bottom: 2px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #73abf3;
    cursor: pointer;
    font-weight: bold;
    font-size: 27px;
    margin-top: 2px;
    font-weight: lighter;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #e5e5e5;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(229, 229, 229, 0.5);
    color: #0f3a6c; 
}
.ddsub{
    margin-left: 20px;
    font-size: 16px;
    font-weight: 300;
    color: #0f3a6c !important;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;  
}
.ddsub::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c8";
    color: #0f3a6c;
    font-weight: bold;
    display: inline-block;
    width: 16px;
    margin: 0 10px;
}
/*.select2-results__option[aria-selected="true"] .ddsub:before{*/
.select2-results__option--selected .ddsub:before{
    content: "\f14a";    
}
.select2-results__option--highlighted .ddsub:before{
    content: "\f14a";    
}
.select2-container--default .select2-results>.select2-results__options {
    max-height: 400px;
    overflow-y: auto;
}
.select2-results__option {
    padding: 6px;
    user-select: none;
    -webkit-user-select: none;
    color: #0f3a6c;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    position: absolute;
    right: 0;
}
.select2-selection__rendered{
    /*display:none !important;*/
    margin-bottom: 0;
}
.select2-container--default .select2-search--inline .select2-search__field {
    display: block;
    border-bottom: 2px solid #73abf3;
    width: 100% !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 28px;
    padding-right: 5px;
}
#date_range input{
    border:0;
    padding: 4px;
}



/*====================================
=     User  notify      =
====================================*/

.mt-user-list .applicant{
    display:none;
}
.user-notify-form input{
    border: 1px solid #EAEAEA;
}

.user-notify-form textarea{
    width:100%;
    min-height: 400px;
    border: 1px solid #EAEAEA;
}
.user-notify-form .SumoSelect{
    flex: 1 1 auto;
}
.user-notify-form .SumoSelect .CaptionCont  i{
    display: none !important;
}
.user-notify-form .SumoSelect>.CaptionCont {
     padding-bottom: 7px; 
     border: 1px solid #EAEAEA;
     height: 33px;
}

.user-notify-form .input-group-text {
    min-width: 70px;
    border-radius: 0;
    background: #EDF4FE;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: #002687;
}
.user-notify-form button{
    background: #1877F2;
    border-radius: 5px;
    padding: 13px 53px;
    font-weight: 800;
    font-size: 16px;
    line-height: 22px;
    align-items: center;
    letter-spacing: 0.095em;
    color: #FFFFFF;  
}
.user-notify-form .filter-opener{
    position: absolute;
    top: 0;
    right: 15px;
    width: 33px;
    height: 33px;
    /* background: red; */
    font-weight: 600;
    color: #747474;
    font-size: 23px;
    text-align: center;
    cursor: pointer;
}

.mt-notify-filter {
    width: calc(100% - 46px);
    padding: 30px;
    background: #fff;
    margin-top: 30px;
    box-shadow: 0px 0px 8px rgb(37 40 43 / 12%);
    border-radius: 8px;
    opacity: 0;
    transition: all 0.3s linear;
    position: absolute;
    z-index: 122;
    top: 55px;
    left: 23px;
    right: 0;
    z-index: -1;
}
.mt-notify-filter.open {
    opacity: 1;
    z-index: 99;
}
.mt-notify-filter .SumoSelect{
    width:100%;
}
.mt-notify-filter .SumoSelect .select-all, .user-notify-form .SumoSelect .select-all{
    display: table;
    width: 100%;
}
.mt-notify-filter label{
    font-weight: normal;
    font-size: 13px;
    line-height: 13px;
    letter-spacing: 0.4px;
    color: #747474;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.reportModal-filename{
    position: relative;
}

.reportModal-filename:before{
    content:"\f15b";
    font-weight: 600;
    font-family: "Font Awesome 5 Free";
    position: absolute;
    left: -15px;
}

.slider.slider-horizontal {
    width: 100%;
    /*background: blue;*/
}
.slider.slider-horizontal .slider-selection {
    background: #73ABF3;
}