﻿.calender-input input {
    width: 90%;
    float: right;
    border-radius: 0 8px 8px 0;
}

.calender-btn {
    width: 10%;
    float: left;
}

.calender-btn button {
    display: block;
    width: 100%;
    border-radius: 8px 0 0 8px !important;
}

.badge-block {
    height: 23px;
    border:0;
    font-weight:normal;
}

.ngn {
    padding-top:10px !important;
    padding-bottom:10px !important;
}

.table.table-bordered tfoot th, .table.table-bordered tfoot td {
    border-bottom: 1px solid #ECF0F3 !important;
}

.modal-title {
    float: right !important;
    display: block !important;
    width: 100% !important;
    padding-right: 15px !important;
}

.fz-label {
    font-size: 13px;
}

div#dwtcontrolContainer,
div#dwtcontrolContainer div {
    width: 100% !important;
}

/* Calender Styling */

.calendars-nav a {
    text-decoration: none !important;
    font-weight: normal !important
}

.calendars-month {
    border: 0 !important;
}

.calendars-month a {
    background-color: #FFF;
    text-decoration: none !important;
}

.calendars-month td .calendars-weekend {
    background-color: #eef1f5;
    color: #333 !important
}

.calendars-month td .calendars-weekend:hover {
    color: #333 !important
}

.calendars-ctrl {
    background-color: #0091CC !important;
}

.calendars-cmd {
    padding: 0 !important;
    text-align: center !important;
}

.calendars-cmd:hover {
    background-color: #fad42e !important;
    color: #333 !important;
}

.calendars-ctrl a {
    color: #FFF;
    text-decoration: none !important;
    font-weight: normal !important;
    cursor: pointer;
}


.calendars-month-header, .calendars-month-header select, .calendars-month-header input {
    background-color: #0091CC !important;
}


.calendars-month-header, .calendars-month-header select, .calendars-month-header input {
    font-family: 'Tajawal', sans-serif !important;
    height: 1.90em !important;
    font-size: 13px !important;
    font-weight: normal;
}

.calendars-month td .calendars-highlight {
    background-color: #fad42e !important;
    color: #333 !important;
}

.calendars-month span,
.calendars-ctrl a,
.calendars-nav a {
    font-family: 'Tajawal', sans-serif !important;
}


.calendars-month span{
    font-size:12px;
}

.WSSCalenderSwitch {
    background-color: #0091CC;
    color: white;
    height: 40px;
    border: none;
}

a.active-menu span{
    color:#FFF !important
}




/*Loader*/

.cs-loading {
    position: fixed;
    background: rgba(54, 65, 80, 0.7);
    bottom: 50px;
    font-size: 14px;
    color: #FFF;
    border-radius: 3px !important;
    z-index: 999999;
    padding: 6px 12px;
}

.cs-loading span{
    position:relative;
    top:-5px;
}

.loadingspinner {
    margin-left:5px;
    display: inline-block;
    pointer-events: none;
    width: 1.5em;
    height: 1.5em;
    border: 0.2em solid transparent;
    border-color: #eee;
    border-top-color: #191A27;
    border-radius: 50%;
    -webkit-animation: loadingspin 1s linear infinite;
    animation: loadingspin 1s linear infinite;
}

@-webkit-keyframes loadingspin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loadingspin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

a[data-toggle="tooltip"] {
    font-family: 'Tajawal', sans-serif !important;
}

.tooltip {
    font-family: 'Tajawal', sans-serif !important;
}



.note-container__item input,
.note-container__item select {
    min-width: 200px;
    padding: 5px 10px;
}

.note-container__item > button {
    background-color: green;
    border: 0;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    padding: 5px 25px;
}

.notes-added {
    min-width: 200px;
    margin-bottom: 10px;
    width: 300px;
    border-radius: 8px;
}

    .notes-added p {
        color: #333;
    }

.bg-red, .bg-green, .bg-blue {
    padding: 10px 20px;
}

.bg-red {
    background-color: #FFE2E5 !important;
}

.bg-blue {
    background-color: #E1F0FF !important;
}

.bg-green {
    background-color: #C9F7F5 !important;
}


select {
    -webkit-appearance: menulist;
    outline: none;
    font-size: 1rem;
    box-sizing: border-box;
    border-radius: 0;
    background: #ffffff;
    border: 1px solid #d1d1d1;
    padding: 0.5em 3.5em 0.5em 1em;
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
}

select {
    color: black;
}

.red {
    background-color: #FFE2E5 !important;
}

.blue {
    background-color: #E1F0FF !important;
}

.green {
    background-color: #C9F7F5 !important;
}

.Beneficiaries-container {
    overflow-y: auto;
    overflow-x: hidden;
    height: 800px;
    padding-right: 8px;
    direction:ltr;
}

    .Beneficiaries-container::-webkit-scrollbar {
        width: 4px;
        border-left: 4px solid #EEF0F8;
        direction:rtl;
    }

.Beneficiaries-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.Beneficiaries-container::-webkit-scrollbar-thumb {
    background: #1C8AB9;
}

.Beneficiaries-container::-webkit-scrollbar-thumb:hover {
    background: #1C8AB9;
}

.sticky-toolbar {
    width: 35px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top:0 !important;
}

.sticky-toolbar a{
    border-radius:5px !important;
}

.sticky-toolbar li.nav-item {
    margin-bottom: 2px !important;
}

/* Table Scrollable */

.table-scrollable::-webkit-scrollbar {
    -webkit-appearance: none;
}

.table-scrollable::-webkit-scrollbar:vertical {
    width: 12px;
}

.table-scrollable::-webkit-scrollbar:horizontal {
    height: 12px;
}

.table-scrollable::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

.table-scrollable::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

@media screen and (max-width: 1030px) {
    #kt_subheader ul.nav{
        display:none !important
    }

}