@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600');

html, body {
    height: 100%;
}

html {
    font-size: 15px;
}

body { 
    background-color: #f2f2f2; 
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    color: #747474;
}

.bg-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0px;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
}

.slide-in .bg-overlay {
    display: none;
    z-index: -1;
}

.btn {
    color: #FFF;
    border-radius: 0px;
    min-width: 100px;
    font-size: inherit;
    border: none;
}

.btn:hover {
    color: #FFF;
}

.btn:focus {
    outline: none;
    box-shadow: none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #C5C5C5;
    opacity: 1; /* Firefox */
    font-weight: 300;
    font-size: 0.75rem;
}
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #C5C5C5;
    font-weight: 300;
    font-size: 0.75rem;
}
  
::-ms-input-placeholder { /* Microsoft Edge */
    color: #C5C5C5;
    font-weight: 300;
    font-size: 0.75rem;
}

label {
    color: #222F3F;
}

.form-control {
    border-radius: 0 0;
    height: 35px;
    font-size: inherit;
}

.input-group-text {
    height: 35px;
    background-color: transparent;
    font-size: inherit;
    padding: 0 8px;
}

.form-group .mandatory {
    color: #BB1A1A;
}

.border-radius {
    border-radius: 5px;
}

.nowrap {
    white-space: nowrap;
}

.login-btn {
    background:#2CACE0;
}

.custom-file-label::after {
    background-color: #222f3f;
    color: #FFFFFF;
    top: 2px;
    right: 1px;
    height: calc(calc(1.8rem + 2px) - 1px * 2);
    line-height: 1.2;
}

.login-wrapper {
    display: flex;
    height: 100%;
}

.login-box {
    margin: 0 auto;
    background-color: #FFF;
    padding: 3rem 2rem;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.22);
}

.login-logo {
    text-align: center;
    margin: 40px auto;
}

header {
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    height: 100px;
    color: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

.menubar {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eaf6ff+0,5caaeb+24,3d5fc9+100 */
    background: #eaf6ff; /* Old browsers */
    background: -moz-linear-gradient(left,  #eaf6ff 0%, #5caaeb 50%, #3d5fc9 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #eaf6ff 0%,#5caaeb 50%,#3d5fc9 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #eaf6ff 0%,#5caaeb 50%,#3d5fc9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaf6ff', endColorstr='#3d5fc9',GradientType=1 ); /* IE6-9 */
    height: 60px;
}

.menubar ul {
    margin: 0px;
    padding: 0px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-self: stretch;
    height: 100%;
}

.menubar ul li {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.menubar li a {
    color: #FFFFFF;
    display: flex;
    align-items: center;
    align-self: stretch;
    font-weight: 500;
    padding: 0px 15px;   
    transition: background ease 0.5s;
}

.menubar li a.active, .menubar li a:hover {
    background-color: #80bbee;
    box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
    text-decoration: none;
}

.menubar li a i {
    margin-left: 10px;
}

.menubar li a i.fa-user-tie {
    font-size: 20px;
}

.menubar .dropdown-menu {
    min-width: 250px;
    background: #5598e3;
    right: 1px !important;
    will-change: none !important;
    top: 100% !important;
    left: initial !important;
    transform: none !important;
    border: none;
}

.menubar .dropdown-item:focus, .menubar .dropdown-item:hover {
    color: #FFF;
}

.menubar .dropdown-item {
    font-size: 14px;
    line-height: 40px;
    display: flex;
    align-items: center;
}

.menubar .dropdown-item:hover {
    box-shadow: none;
}

.menubar .dropdown-item i {
    margin-left: 0px;
    margin-right: 10px;
}

.breadcrumbs {
    height: 40px;
    padding: 0px;
    margin: 0px;
    display: flex;
    align-items: center;
}

.breadcrumbs li {
    display: inline-block;
}

.seperator {
    padding: 0px 5px;
    text-align: center;
    color: #404040;
}

.breadcrumbs li a {
    display: block;
    color: #404040;
}

.breadcrumbs li a.active {
    color: #404040;
    font-weight: 600;
    text-decoration: underline;
}

.logo {
    display: inline-grid;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.21);
    padding: 0 20px;
    border-radius: 0 50px 50px 0;
}

.logo img {
    transition: all ease 0.5s;
}

.logo a {
    display: inline-grid;
}

.logo a img {
    height: 35px;
}

.wrapper {
    display: flex;
    height: 100%;
}

.attendence {
    background: #FFF;
    border-radius: 2px;
    padding: 0 15px 15px 15px;
    overflow: hidden;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.22);
}

.attendence h3 {
        color: #FFF;
    padding: 0 0 0 15px;
    margin: 0px -15px;
    font-weight: 600;
    font-size: 17px;
    position: relative;
    border-radius: 4px 4px 0 0;
    height: 50px;
    line-height: 50px;
}

.my-task h3 {
    background-color: #f6bc65;
}
.to-do-list h3 {
    background-color: #ff6b45;
}
.pending-for-task h3 {
    background-color: #9771f0;
}

.overall-attendence h3 {
    background-color: #3edaf1;
}

.region-attendence h3 {
    background-color: #43d0bf;
}

.my-task h3 span {
    color: #f6bc65;
}

.to-do-list h3 span {
    color: #ff6b45;
}

.pending-for-task h3 span {
    color: #9771f0;
}

.attn-count-block {
    position: relative;
    padding: 25px;
}

.attn-result {
    font-size: 30px;
    font-weight: 600;
    color: #535353;
}

.attn-det-view {
    position: absolute;
    right: 8px;
    bottom: 6px;
    font-weight: 600;
    color: #656565;
    text-decoration: underline;
}

span.create-plus {
    transform: translate(0%, -50%);
    border: 1px solid #4b64d8;
    border-radius: 4px;
    position: absolute;
    right: 0;
    top: 50%;
    padding: 5px;
    font-size: 13px;
    cursor: pointer;
}

.attendence span.create-plus {
    right: 15px;
    background-color: #FFF;
    border: none;
    line-height: 20px;
    min-width: 65px;
    text-align: right;

}

.task-block {
    background-color: #f0f6fb;
    max-height: 450px;
    position: relative;
    padding: 15px;
}

.inner-task-block {
    background: #FFFFFF;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.096);
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.inner-task-block:last-child {
    margin-bottom: 0px;
}

.task-content {
    color: #616161;
    font-weight: 600;
}

.label-1 {
    padding-right: 10px;
}

.label-2 {
    color: #616161;
    font-weight: 600;
}

.status-open {
    color: #1bc31b;
}

.toggle-container {
    margin-left: 0px;
    background-color: #f4f4f4;
    height: 50px;
    display: block;
    padding: 15px;
}

.toggle-menu {
    cursor: pointer;
    display: inline-grid;
}

.slide-in .toggle-menu {
    margin-left: 0px;
}
/*Wrapper CSS*/

section {
    padding-top: 100px;
}

header, section {
    transition: margin ease 0.5s;
}

.max-height {
    padding: 0px;
}

.main-container {
    padding: 1rem 1rem;
}

h2.title {
    color: #222F3F;
    font-size: 1.2rem;
    margin: 0 0 15px 0;
    font-weight: 400;
}

h3.sub-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #222F3F;
    padding-bottom: 9px;
    margin-bottom: 1rem;
    position: relative;
    border-bottom: 2px dashed #959eac;
}

.add-record {
    position: absolute;
    right: 0px;
    display: inline-grid;
    background: #222f3f;
    color: #FFF;
    top: -5px;
    border-radius: 2px;
    cursor: pointer;
}

.add-new {
    display: inline-grid;
    position: absolute;
    z-index: 9;
}

.add-new img {
    width: 30px;
}

.action-icon {
    margin: 1px 0px 1px 10px;
    display: inline-grid;
    vertical-align: middle;
}

.action-icon img {
    width: 20px;
}

.table-responsive {
    background-color: #FFF;
    padding: 15px 10px 10px 10px;
}

.table-responsive h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    position: relative;
    color: #1f8ee9;
}

.table-responsive table {
    /*background-color: #575e71;*/
    background-color: #fcfdff;
    font-size: 0.9rem;
    margin: 0px !important;
    padding: 0px 5px 5px 5px;
}

.table-responsive thead {
    background-color: #575e71;
}

.table-responsive .table thead th {
    color: #FFF;
    font-weight: 600;
    padding: 12px 0;
}

.table-fullwidth {
    width: 100% !important;
    margin: 0 auto !important;
}

.table {
    border-spacing: 0px;
    border-collapse: separate;
    font-family: 'Source Sans Pro', sans-serif;
}

.table tr th {
    color: #101C28;
}

.table tr td {
    color: #7C7C7C;
    border-bottom: 1px solid #eaeaea !important;
}

.table td, .table th {
    border: none;
}

.dataTables_paginate span {
    display: flex;
    text-align: center;
}

.table thead th, .table thead td, .table td, table.dataTable thead th, table.dataTable thead td, table.dataTable tbody th, table.dataTable tbody td {
    padding: 0.5rem 0.35rem;
    vertical-align: middle;
    font-weight: 400;
    border: none;
}

.table tbody td {
    background-color: #FFFFFF;
}

/* .table tbody tr:nth-child(even) td {
    background-color: #E3ECF8;
} */

.table-bg-white {
    background-color: #F8F8F8;
    padding: 1rem;
}

table.dataTable tbody tr:last-child td, .table tbody tr:last-child td {
    border-bottom: none;
}     

table.dataTable.no-footer {
    border: none;
}

.dataTables_length select {
    border-radius: 30px;
    padding: 0.1rem 0.75rem;
    margin: 0 0.5rem;
    color: #848484;
}

.dataTables_length select, .dataTables_filter input {
    background-color: #ffffff;
}

.dataTables_length label {
    margin-bottom: 0px;
}

.dataTables_info {
    float: left !important;
    clear: initial !important;
    margin-left: 7px;
}

/* .dataTables_length select:focus, .dataTables_filter input:focus {
    outline: none;
} */

.dataTables_filter input {
    border-width: 1px;
    padding: 3px 10px;
    min-width: 250px;
    color: #848484;
    margin-left: 10px !important;
    border-color: transparent;
    background-color: #eeeeee;
}

.datatable-toprow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
     margin-bottom: 1rem; 
}

.datatable-toprow > div {
    float: none !important;
    padding: 0 !important;
}

.datatable-toprow > div > label {
    margin: 0px;
    text-transform: capitalize;
    color: #848484;
}

.datatable-bottomrow {
    margin: 0 0px;
    padding: 5px;
    height: 55px;
    border: 5px solid;
    border-top: 10px solid;
    border-bottom: 10px solid;
    border-color: #fcfdff;
}

.datatable-bottomrow > div {
    padding: 0px !important;
    line-height: 25px;
    color: #848484 !important;
    font-size: 0.8rem;
    font-weight: 300;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0 !important;
    min-width: 25px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    color: #A1A1A1 !important;
    margin-left: 5px;
    transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    border: none !important;
}

.dataTables_wrapper .dataTables_paginate span .paginate_button:hover {
    background-color: #e8f1f8 !important;
    color: #000000 !important;
    border-radius: 50px;
    background: #e8f1f8 !important;
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after {
    bottom: 0.5em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #E8F1F8 !important;
    color: #101C28 !important;
    border-radius: 50px;
}

.dataTables_paginate {
    display: flex;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.first {
    /* background-image: url('../images/pagination-last-previous.svg') !important; */
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous {
    background-image: url('../images/pagination-step-left.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    background-image: url('../images/pagination-step-right.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.last {
    /* background-image: url('../images/pagination-last-next.svg') !important; */
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.first:hover
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover
.dataTables_wrapper .dataTables_paginate .paginate_button.last:hover {
    background: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    border: none;
    box-shadow: none;
}

.save-btn {
    background-color: #222F3F;
    background: #222F3F;
}

.cancel-btn {
    background-color: #c3c3c3;
    background: #c3c3c3;
    color: #000000;
}

.active-btn, .optional-btn {
    background-color: #234271;
    background: #234271;
}

.inactive-btn {
    background-color: #828282;
    background: #828282;
}

.mandatory-btn {
    background-color: #4DB9DE;
    background: #4DB9DE;
}

.cancel-btn:hover {
    background-color: #222F3F;
    background: #222F3F;
    color: #FFFFFF;
}

.btn-inline-container {
    padding: 3px;
    height: 35px;
    background-color: #222f3f;
    margin: 0px 0px;
    border-radius: 5px;
    color: #FFFFFF;
}

.btn-inline-container .btn {
    min-width: auto;
    padding: 0.16rem 1rem;
    border: none;
    border-radius: 5px;
}

.btn-inline-container .save-btn.selected {
    background-color: #FFF;
    color: #222f3f;
}

.toggle-btn-container {
    overflow: hidden;
    width: 120px;
    height: 35px;
}

.toggle-btn-container .btn  {
    height: 35px;
    width: 120px;
    border-radius: 30px;
    transition: all ease 0.5s;
}

.toggle-btn-container:not(.active) .active-btn {
    transform: translateY(70px);
}

.toggle-btn-container:not(.active) .optional-btn {
    transform: translateY(70px);
}

.toggle-btn-container .inactivebtn {
    transform: translateY(-35px);
}

.toggle-btn-container.active .activebtn {
    transform: translateY(0px);
}

.toggle-btn-container.active .inactivebtn {
    transform: translateY(-140px);
}

#ToDoList .card, #ToDoList .card-header {
    border: none;
    background-color: transparent;
}

#ToDoList .card-header {
    border-bottom: 1px solid #DDD;
    margin-bottom: 0px;
    background-color: #fbfbfb;
    padding: 5px;
}

#ToDoList a.card-link {
    color: #848484;
}

#ToDoList a.card-link i {
    color: #40d040;
    margin-right: 5px;
}

.active-actions {
    position: absolute;
    right: 10px;
    top: 6px;
}

.active-actions a {
    margin-left: 10px;
    font-size: 13px;
}

.active-actions a:hover {
    text-decoration: none;
    color: currentColor;
}

.active-actions a i {
    margin-right: 5px;
}

#ToDoList a.card-link + .active-actions {
    display: none;
}

#ToDoList a.card-link.collapsed + .active-actions {
    display: block;
}

.link-set {
    color: #3ba1ec;
}
.link-complete {
    color: #40d040;
}
.link-cancel {
    color: #ff6d6d;
}
/* Custom labels: the container */
.checkcontainer {
    display: inline;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 17px;
    -webkit-user-select: none; /* Chrome, Opera, Safari */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

/* Hide the browser's default checkbox */
.checkcontainer input {
  	position: absolute;
	  opacity: 0;
cursor: pointer;}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
    background-color: #1A6A78;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
    left: 10px;
    top: 6px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Create a custom radio button */
.radiobtn{
  position: absolute;
  top: 5px;
  left: 0px;
  height: 15px;
  width: 15px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .radiobtn{
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.checkcontainer input:checked ~ .radiobtn{
  background-color: #234271;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiobtn:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.checkcontainer input:checked ~ .radiobtn:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.checkcontainer .radiobtn:after {
    top: 4px;
    left: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: white;
}

.mCSB_scrollTools .mCSB_draggerRail {
    width: 10px;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #4471d1;
    background-color: rgb(67, 111, 208);
}

.mCSB_scrollTools .mCSB_draggerRail {
    background-color: rgb(236, 236, 236);
}

/*tr:first-child td:first-child {
    border-radius: 7px 0 0 0;
}
tr:first-child td:last-child {
    border-radius: 0 7px 0 0;
}
tr:last-child td:first-child {
    border-radius: 0px 0 0px 7px;
}
tr:last-child td:last-child {
    border-radius: 0px 0 7px 0px;
}*/

.menubar .dropdown-item:focus {
    background-color: #5598e3 !important;
}