body {
    background: url("/assets/images/public/bg2.jpg") no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    line-height: 18px;
    font-family: "Open Sans", sans-serif;
    color: #0D2842
}

tr.clickable td {
    border: none !important;
    cursor: default;
  }
  
  tr.clickable:hover td {
    background-color: #c5c5c5 !important;
    /* color: white !important; */
  }

.wrapper {
    width: 100%;
    height: 100%
}

.main-container {
    width: 100%;
    padding-top: 80px
}

.login {
    margin-left: 0 !important
}

.login-container {
    padding-top: 40px;
    padding-bottom: 10px;
    width: 300px;
    background-color: #fff;
    box-shadow: 2px 2px 10px #4F4E4E;
    margin: auto;
    position: relative
}

.app-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding-top: 10%;
    color: rgba(13, 40, 66, 0.43);
    font-size: 700%
}

.guest-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    margin-top: -5px;
    z-index: 10
}

.ps-r {
    position: relative
}

form {
    box-shadow: none !important
}

.date-picker[readonly] {
    background-color: white !important;
    cursor: text !important
}

.navigation {
    background-color: #0D2842;
    color: #fff;
    position: fixed;
    width: 190px;
    min-height: 100%;
    z-index: 1000
}

.navigation .company-name {
    height: 70px;
    background-color: #041527;
    -moz-box-shadow: 0px 1px 10px 0px rgba(50, 50, 50, 0.2);
    -webkit-box-shadow: 0px 1px 10px 0px rgba(50, 50, 50, 0.2);
    box-shadow: 0px 1px 10px 0px rgba(50, 50, 50, 0.2)
}

.navigation .search-block {
    padding: 10px 0;
    background-color: transparent
}

.navigation nav ul {
    cursor: pointer
}

.navigation nav ul li {
    list-style: none;
    padding: 11px 0px 18px 0px;
    font-size: 12px;
    font-weight: bold;
    position: relative
}

.navigation nav ul li a {
    color: #BBB
}

.navigation nav ul li .arrow {
    display: none;
    float: right;
    width: 0px;
    position: absolute;
    right: 0px;
    top: 15px;
    border-top: 12px double transparent;
    border-bottom: 12px double transparent;
    border-right: 8px solid #1D4162
}

.navigation nav ul li .sub-menu {
    background-color: #1D4162;
    padding: 0px;
    width: 210px;
    display: none;
    position: absolute;
    top: 0px;
    /* left: 127px */
    left: 100%;
}

.navigation nav ul li .sub-menu li {
    margin: 2px;
    padding: 5px;
    padding-left: 20px;
    font-size: 13px;
    font-weight: normal;
    line-height: 15px;
    border: none
}

.navigation nav ul li .sub-menu li:hover,
.navigation nav ul li .sub-menu li.active {
    background-color: #31587B
}

.navigation nav ul li.active {
    background-color: #133351
}

.navigation nav ul li:hover {
    background-color: #133351
}

.navigation nav ul li:hover .arrow.arrow_sub_menu {
    display: inherit;
    border-right: 8px solid #1D4162
}

.navigation nav ul li:hover .sub-menu {
    display: block
}

.contents {
    background: #E7E7F5;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 190px;
    min-height: 100px
}

.contents .header {
    background-color: #ffffff;
    height: 70px;
    border-bottom: 1px solid #dddddd;
    position: fixed;
    left: 191px;
    right: 0;
    top: 0;
    z-index: 1001
}

.page-content {
    padding: 20px 20px 5px 20px;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto
}

.page-title {
    padding: 0;
    font-size: 26px;
    letter-spacing: -1px;
    line-height: 26px;
    display: block;
    color: #666;
    margin: 0 0 20px 0;
    font-weight: 300;
    font-family: "Open Sans", sans-serif
}

.box {
    height: 120px;
    background-color: #037691;
    border-right: 1px solid rgba(255, 255, 255, 0.19)
}

.box .main-icon {
    color: rgba(250, 250, 250, 0.31);
    padding-top: 40px
}

.box .details {
    padding-left: 10px;
    padding-top: 35px;
    color: whitesmoke
}

.box .details .number {
    height: 30px;
    line-height: 30px
}

.box:last-child {
    border-right: none
}

.btn-file {
    position: relative;
    overflow: hidden
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    background: red;
    cursor: inherit;
    display: block
}

.file-upload input[readonly] {
    background-color: white !important;
    cursor: text !important
}

.boxed {
    background-color: #f9f9f9;
    border-radius: 5px
}

.user-thumbnail,
.cluster-thumbnail {
    min-height: 150px;
    border-radius: 0;
    -webkit-box-shadow: 2px 2px 1px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 2px 2px 1px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 2px 2px 1px 0px rgba(50, 50, 50, 0.75);
    opacity: 0.8
}

.user-thumbnail {
    border-color: #81709b;
    background: #81709b;
    color: #ffffff
}

.cluster-thumbnail {
    border-color: cadetblue;
    background: cadetblue;
    color: #ffffff
}

.user-thumbnail:hover,
.cluster-thumbnail:hover {
    opacity: 1
}

.user-thumbnail:hover .thumbnail-edit,
.cluster-thumbnail:hover .thumbnail-edit {
    display: block !important
}

.add-user-thumbnail,
.add-cluster-thumbnail {
    min-height: 150px;
    border-radius: 0;
    -webkit-box-shadow: 2px 2px 1px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 2px 2px 1px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 2px 2px 1px 0px rgba(50, 50, 50, 0.75)
}

.add-user-thumbnail {
    border-color: #81709b;
    color: #81709b
}

.add-cluster-thumbnail {
    border-color: cadetblue;
    color: cadetblue
}

.add-user-thumbnail:hover,
.add-cluster-thumbnail:hover {
    cursor: pointer;
    border-color: darkgray;
    color: darkgray
}

.thumbnail-edit {
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 0
}

.thumbnail-edit .emp-edit:hover {
    cursor: pointer;
    color: #81709B
}

.thumbnail-edit .cluster-edit:hover {
    cursor: pointer;
    color: cadetblue
}

.thumbnail-edit .emp-remove:hover,
.thumbnail-edit .cluster-remove:hover {
    cursor: pointer;
    color: #CA4F4F
}

.pl3,
.ph3,
.pa3 {
    padding-left: 3px
}

.pr3,
.ph3,
.pa3 {
    padding-right: 3px
}

.pt3,
.pv3,
.pa3 {
    padding-top: 3px
}

.pb3,
.pv3,
.pa3 {
    padding-bottom: 3px
}

.pls,
.phs,
.pas {
    padding-left: 5px
}

.prs,
.phs,
.pas {
    padding-right: 5px
}

.pts,
.pvs,
.pas {
    padding-top: 5px
}

.pbs,
.pvs,
.pas {
    padding-bottom: 5px
}

.plm,
.phm,
.pam {
    padding-left: 10px
}

.prm,
.phm,
.pam {
    padding-right: 10px
}

.ptm,
.pvm,
.pam {
    padding-top: 10px
}

.pbm,
.pvm,
.pam {
    padding-bottom: 10px
}

.pll,
.phl,
.pal {
    padding-left: 20px
}

.prl,
.phl,
.pal {
    padding-right: 20px
}

.ptl,
.pvl,
.pal {
    padding-top: 20px
}

.pbl,
.pvl,
.pal {
    padding-bottom: 20px
}

.pl0,
.ph0,
.pa0 {
    padding-left: 3px !important
}

.pr0,
.ph0,
.pa0 {
    padding-right: 0 !important
}

.pt0,
.pv0,
.pa0 {
    padding-top: 0 !important
}

.pb0,
.pv0,
.pa0 {
    padding-bottom: 0 !important
}

.mls,
.mhs,
.mas {
    margin-left: 5px
}

.mrs,
.mhs,
.mas {
    margin-right: 5px
}

.mts,
.mvs,
.mas {
    margin-top: 5px
}

.mbs,
.mvs,
.mas {
    margin-bottom: 5px
}

.mlm,
.mhm,
.mam {
    margin-left: 10px
}

.mrm,
.mhm,
.mam {
    margin-right: 10px
}

.mtm,
.mvm,
.mam {
    margin-top: 10px
}

.mbm,
.mvm,
.mam {
    margin-bottom: 10px
}

.mll,
.mhl,
.mal {
    margin-left: 20px
}

.mrl,
.mhl,
.mal {
    margin-right: 20px
}

.mtl,
.mvl,
.mal {
    margin-top: 20px
}

.mbl,
.mvl,
.mal {
    margin-bottom: 20px
}

.ml0,
.mh0,
.ma0 {
    margin-left: 0 !important
}

.mr0,
.mh0,
.ma0 {
    margin-right: 0 !important
}

.mt0,
.mv0,
.ma0 {
    margin-top: 0 !important
}

.mb0,
.mv0,
.ma0 {
    margin-bottom: 0 !important
}

.ml3,
.mh3,
.ma3 {
    margin-left: 3px
}

.mr3,
.mh3,
.ma3 {
    margin-right: 3px
}

.mt3,
.mv3,
.ma3 {
    margin-top: 3px
}

.mb3,
.mv3,
.ma3 {
    margin-bottom: 3px
}

.ml12,
.mh12,
.ma12 {
    margin-left: 12px
}

.mr12,
.mh12,
.ma12 {
    margin-right: 12px
}

.mt12,
.mv12,
.ma12 {
    margin-top: 12px
}

.mb12,
.mv12,
.ma12 {
    margin-bottom: 12px
}

.ml14,
.mh14,
.ma14 {
    margin-left: 14px
}

.mr14,
.mh14,
.ma14 {
    margin-right: 14px
}

.mt14,
.mv14,
.ma14 {
    margin-top: 14px
}

.mb14,
.mv14,
.ma14 {
    margin-bottom: 14px
}

.ml15,
.mh15,
.ma15 {
    margin-left: 15px
}

.mr15,
.mh15,
.ma15 {
    margin-right: 15px
}

.mt15,
.mv15,
.ma15 {
    margin-top: 15px
}

.mb15,
.mv15,
.ma15 {
    margin-bottom: 15px
}

.ml30,
.mh30,
.ma30 {
    margin-left: 30px
}

.mr30,
.mh30,
.ma30 {
    margin-right: 30px
}

.mt30,
.mv30,
.ma30 {
    margin-top: 30px
}

.mb30,
.mv30,
.ma30 {
    margin-bottom: 30px
}

.mtn {
    margin-top: none
}

.mtxs {
    margin-top: 3px
}

.center {
    margin: 0px auto;
    display: block
}

.border5 {
    border-radius: 5px
}

.mt75 {
    margin-top: 75px
}

.p-none {
    padding: 0px
}

.wa {
    width: auto
}

.dib {
    display: inline-block
}

#company-logo {
    width: 80%
}

.navigation .profile-pic img {
    margin: 10px 0;
    height: 50px
}

.navigation .sidebar-dropdown {
    display: none
}

.txtC,
.txtC td,
.txtC th {
    text-align: center
}

.txtL,
.txtL td,
.txtL th {
    text-align: left
}

.txtR,
.txtR td,
.txtR th {
    text-align: right
}

.txtT,
.txtT td,
.txtT th {
    vertical-align: top
}

.txtB,
.txtB td,
.txtB th {
    vertical-align: bottom
}

.txtM,
.txtM td,
.txtM th {
    vertical-align: middle
}

a:hover,
a:active,
a:focus {
    text-decoration: none
}

.fs16 {
    font-size: 16px
}

.fontS {
    font-size: 12px
}

.fontM {
    font-size: 14px
}

.fontL {
    font-size: 20px
}

.capitalize {
    text-transform: capitalize
}

.login-text {
    display: block;
    margin: auto;
    width: 100%;
    height: 100px;
    padding: 23.66667px 0;
    text-align: center;
    background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 100% 2px;
    background-repeat: no-repeat
}

.navigation .profile-name {
    padding: 20px 10px;
    font-size: 140%
}

.navigation .profile-name em {
    font-size: 60%;
    padding: 2px 5px;
    background-color: #5FB760;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px
}

.input-error {
    color: #E70000;
    font-size: 11px
}

.input-label {
    font-size: 80%;
    font-weight: lighter;
    letter-spacing: 1px;
    margin-bottom: 0;
    opacity: 0.8
}

*:active:focus,
*:focus {
    outline: none !important
}

.input-group-addon {
    padding: 6px 8px;
    background-color: white
}

.panel .panel-heading {
    background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
    background-image: linear-gradient(to bottom, #fff 0%, #fff 100%);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0)
}

.panel .panel-heading {
    color: #333333;
    background-color: #FFFFFF;
    border-color: #F4F4F4
}

.panel .panel-heading {
    padding: 13px 15px
}

.panel .panel-body ul {
    margin-top: 0;
    margin-bottom: 10px;
    list-style-type: none
}

.panel .panel-body ul li {
    font-size: 1em;
    border-bottom: 1px solid #f0f0f0;
    line-height: 30px;
    color: #1F77B4
}

.panel .panel-footer {
    padding: 10px 27px;
    background-color: #FFFFFF;
    border-top: 1px solid #F4F4F4;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px
}

.pull-right>.dropdown-menu {
    left: auto !important
}

.btn-success {
    background-color: #6FC36F;
    background-image: none
}

.btn-success:hover {
    background-color: #54B854;
    background-image: none
}

.btn-link-page {
    color: #888888 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    font-weight: bold
}

.btn-link-page:hover {
    border: 1px solid #D5DDE5;
    text-decoration: none
}

.checkbox {
    min-height: 0px
}

.mtn {
    margin-top: none
}

.input-group.file-upload {
    float: left
}

ul.dropdown-menu {
    max-height: 350px;
    overflow: auto
}

.danger {
    color: #c84f4f
}

.bg-white {
    background-color: #ffffff
}

.red {
    color: #F45959
}

.green {
    color: #4FC84F
}

.blue {
    color: #4A90AE
}

.violet {
    color: #B87BB8
}

* {
    padding: 0;
    margin: 0
}

.pricing-table {
    -webkit-box-shadow: 0px 0px 3px #26292e;
    box-shadow: 0px 0px 3px #26292e;
    display: inline-block;
    margin: 30px 45px;
    width: 250px
}

.featured {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1)
}

.pricing-table-header {
    background-color: #586272;
    padding: 5px;
    text-align: center
}

.pricing-table-header h1 {
    color: #fff;
    font-size: 14px;
    text-transform: uppercase
}

.pricing-table-content {
    background-color: #fff
}

.pricing-table-content ul {
    list-style: none
}

.pricing-table-content ul li {
    border-bottom: 1px solid #efeff0;
    font-size: 14px;
    padding: 16px 56px
}

.pricing-table-footer {
    background-color: #f5f7f8;
    -webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    padding: 16px 0
}

.pricing-table-footer {
    text-align: center
}

.pricing-table-footer p {
    font-size: 12px;
    text-transform: uppercase
}

.pricing-table-footer a {
    background: #50b7e4;
    background: -moz-linear-gradient(top, #50b7e4 0%, #3098c4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #50b7e4), color-stop(100%, #3098c4));
    background: -webkit-linear-gradient(top, #50b7e4 0%, #3098c4 100%);
    background: -o-linear-gradient(top, #50b7e4 0%, #3098c4 100%);
    background: -ms-linear-gradient(top, #50b7e4 0%, #3098c4 100%);
    background: linear-gradient(to bottom, #50b7e4 0%, #3098c4 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#50b7e4', endColorstr='#3098c4', GradientType=0);
    background-color: #3ea6d2;
    border: 1px solid #1481b0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    margin-top: 10px;
    padding: 10px;
    text-decoration: none
}

#filterBtn {
    background-color: #e7e7f3
}

#myModalNorm {
    z-index: 3000
}

.c3-circle {
    stroke-width: 2px !important;
    stroke: #5fb9e2 !important
}

.c3-circle-6 {
    fill: red !important;
    stroke-width: 2px !important;
    stroke: #5fb9e2 !important
}

.c3-legend-item text {
    fill: #3d3d3d !important;
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 10px !important;
    font-weight: bold !important
}

li.list-group-item-success-ngo {
    text-overflow: ellipsis;
    white-space: nowrap
}

i span {
    color: #3d3d3d;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px
}

.c3-legend-item-Average {
    display: none
}

.c3-line {
    stroke: #5fb9e2 !important;
    stroke-width: 2px
}

.c3-line-Expected {
    stroke: #ff7f0e !important;
    stroke-width: 1px;
    stroke-dasharray: 7, 7 !important
}

.c3-chart-arcs-title {
    font-size: 1.2em;
    font-family: Verdana, Geneva, sans-serif, sans-serif
}

.list-group-item-success-head {
    background-color: #3d9bb8;
    margin-top: 3px !important
}

.list-group-item-success-ngo {
    color: #372746;
    background-color: #f0f4ef;
    font-size: 0.9em
}

.list-group-item-success-ngo .label {
    font-size: 1.1em
}

@media (min-width: 767px) {
    .box-main-container {
        margin-top: -10px
    }
}

.panel .panel-heading.panel-heading-dashboard {
    background-image: linear-gradient(top, #cbcdcd 0, #dee5e6 100%) !important;
    background-image: -webkit-linear-gradient(top, #cbcdcd 0, #dee5e6 100%) !important
}

i.fa-titles {
    color: #4b4b4b;
    font-size: 0.9em
}

.box.box-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.box.box-right {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.fl {
    float: left
}

.fr {
    float: right
}

.no-float {
    float: none !important
}

.cp {
    cursor: pointer
}

.full {
    width: 100%
}

.half {
    width: 50%
}

html {
    width: 100%;
    height: 100%
}

.cadetblue {
    color: cadetblue
}

.nav-item-label {
    font-size: 18px;
    font-weight: normal
}

.login-header {
    margin: auto;
    padding-bottom: 20px
}

.form-horizontal {
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 20px
}

.form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
    padding-right: 0
}

h2 {
    margin: 0
}

.logo-sfdc {
    display: block;
    color: #fff;
    margin: auto;
    margin-top: 40px;
    width: 100%;
    max-width: 300px;
    padding: 23.66667px 0;
    text-align: center;
    background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 100% 2px;
    background-repeat: no-repeat
}

.form-control:focus {
    outline: none
}

.page-bar {
    background-color: #ffffff;
    margin-bottom: 20px;
    height: 40px;
    line-height: 38px;
    border: 1px solid #ddd
}

.brs {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px
}

.caption-subject {
    font-size: 16px
}

.font-purple-intense {
    color: #797979 !important
}

.uppercase {
    text-transform: uppercase !important
}

.bold {
    font-weight: 700 !important
}

.textVCentreInput {
    height: 34px;
    line-height: 34px
}

.textVCentreCheckBox {
    height: 40px;
    line-height: 40px
}

.noBg {
    background: none
}

.progress-extended {
    font-size: 13px;
    color: #6a6d8b;
    font-style: italic
}

.header .logout {
    text-align: center
}

.header .logout .glyphicon-off:hover {
    color: #e90000;
    cursor: pointer
}

.header .entity-name {
    padding-left: 20px
}

#processing img {
    width: 10%;
    height: 10%;
    margin-top: 15%;
    margin-bottom: 5%
}

.ngo-grid .table-title {
    display: block;
    margin: auto;
    max-width: 600px;
    padding: 5px;
    width: 100%
}

.ngo-grid .table-title h3 {
    color: #fafafa;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    font-family: "Roboto", helvetica, arial, sans-serif;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
    text-transform: uppercase
}

.ngo-grid .table-fill {
    background: white;
    border-radius: 3px;
    border-collapse: collapse;
    margin: auto;
    padding: 8px;
    width: 100%;
    animation: float 5s infinite
}

.ngo-grid th {
    color: #D5DDE5;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    background: #556471;
    border-bottom: 1px solid #9ea7af;
    border-right: 1px solid rgba(109, 111, 116, 0.36);
    font-size: 15px;
    font-weight: 400;
    padding: 10px;
    text-align: left;
    vertical-align: middle
}

.ngo-grid tfoot td {
    color: #D5DDE5;
    background: #556471 !important;
    font-size: 15px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #9ea7af;
    padding: 2px 10px
}

.ngo-grid th:first-child {
    border-top-left-radius: 3px
}

.ngo-grid th:last-child {
    border-top-right-radius: 3px;
    border-right: none
}

.ngo-grid tr {
    color: #666B85;
    font-size: 16px;
    font-weight: normal;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1)
}

.ngo-grid thead tr {
    height: 45px
}

.ngo-grid tbody tr {
    height: 0px
}

.ngo-grid tr:first-child {
    border-top: none
}

.ngo-grid tr:last-child {
    border-bottom: none
}

.ngo-grid tr:nth-child(odd) td {
    background: rgba(235, 235, 235, 0.36)
}

.ngo-grid tr:last-child td:first-child {
    border-bottom-left-radius: 3px
}

.ngo-grid tr:last-child td:last-child {
    border-bottom-right-radius: 3px
}

.ngo-grid td {
    background: #FFFFFF;
    padding: 8px;
    text-align: left;
    vertical-align: middle;
    font-weight: 300;
    font-size: 14px;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(249, 249, 249, 0.19);
    max-width: 100px
}

.ngo-grid td:focus {
    outline: none
}

.ngo-grid td[contenteditable=true]:focus {
    font-weight: bold
}

.ngo-grid td:last-child {
    border-right: 0px
}

.ngo-grid th.text-left {
    text-align: left
}

.ngo-grid th.text-center {
    text-align: center
}

.ngo-grid th.text-right {
    text-align: right
}

.ngo-grid td.text-left {
    text-align: left
}

.ngo-grid td.text-center {
    text-align: center
}

.ngo-grid td.text-right {
    text-align: right
}

.ngo-grid .changed {
    color: #5B82FF !important
}

.ngo-grid .error {
    color: crimson !important
}

.ngo-grid .synced {
    color: #08CF03 !important
}

.ngo-grid td {
    overflow: hidden
}

.ngo-grid td:focus {
    outline: 1px dotted black
}

.ngo-grid .active-page {
    color: #D5DDE5 !important;
    font-weight: bold
}

@-webkit-keyframes indicate {
    50% {
        background-color: orange
    }
}

.key-found {
    color: orange;
    animation: indicate 2s linear;
    -webkit-animation: indicate 2s linear
}

.add-btn,
.remove-btn {
    color: #848E99
}

.add-btn:hover {
    color: #0000cc
}

.remove-btn:hover {
    color: #c12e2a
}

.tr-mark {
    width: 35px
}

.orders-table .order-items {
    max-height: 37px;
    overflow: hidden
}

.orders-table .order-items.show-more {
    max-height: none;
    overflow: visible
}

.app-loading {
    z-index: 9999
}

#processing.modal {
    z-index: 2050
}

.modal-backdrop {
    z-index: 2040
}

@media (min-width: 768px) {
    .header .search-form.search-form-expanded {
        width: 200px
    }
}

@media (max-width: 767px) {
    #company-logo {
        display: none
    }
    .navigation {
        position: static;
        width: 100%;
        min-height: 100%
    }
    .hamburger{
        margin-top: 14px;
    }
    .mob-search{
        width: 100%;
    }
    .navigation nav ul li .sub-menu{
        z-index:1000;
        left:128px;
    }
    #navbarSupportedContent1{
        background: #037bb0;
    }
    .navigation .profile-head {
        margin: 0
    }
    .navigation .profile-pic img {
        margin: 10px 0;
        height: 50px
    }
    .navigation .profile-name {
        font-size: 150%;
        text-align: center;
        padding: 10px 10px
    }
    .navigation nav {
        display: unset !important;
    }
    .navigation nav ul li {
        padding: 3px 0px 6px 0px;
        font-size: 9px;
        text-align: center
    }
    .nav-item-label{
        font-size: 14px;
    }
    .contents {
        width: 100%;
        margin-left: 0;
        position: static
    }
    .contents .header,
    .contents header,
    .contents footer {
        display: none
    }
    .contents #taskTable {
        padding: 0
    }
    .contents #taskTable .widget-body {
        overflow: auto
    }
    .contents #taskTable .table {
        border: none
    }
    .contents .calendarContainer {
        padding: 0;
        margin-bottom: 10px
    }
    .contents .page-content {
        position: static
    }
}

.footer-part {
    background-color: #556471;
    padding: 2px
}

.footer-part .pagination>li:nth-child(-n+3) {
    background-color: #ffffff
}

.footer-part .pagination>li>a,
.pagination>li>span {
    background-color: transparent;
    border: transparent;
    font-size: 14px;
    font-weight: bold;
    color: #888888 !important
}

.footer-part .pagination>.active>a,
.footer-part .pagination>.active>a:focus,
.footer-part .pagination>.active>a:hover,
.footer-part .pagination>.active>span,
.footer-part .pagination>.active>span:focus,
.footer-part .pagination>.active>span:hover {
    color: #D5DDE5 !important;
    background-color: transparent
}

.footer-part .pagination>li>a:hover {
    border: 1px solid #D5DDE5
}

.footer-part .pagination {
    margin: 10px 8px 0px !important
}

.recipe-table.recipe-grid th {
    padding: 10px 10px
}

.recipe-table .recipe-grid .table-fill {
    margin: 0px
}

.footer-part .pagination>.disabled>a,
.footer-part .pagination>.disabled>a:focus,
.footer-part .pagination>.disabled>a:hover,
.footer-part .pagination>.disabled>span,
.footer-part .pagination>.disabled>span:focus,
.footer-part .pagination>.disabled>span:hover,
.footer-part .pagination .pagination-next>a,
.footer-part .pagination .pagination-last>a,
.pagination>li>a,
.pagination>li>span,
.footer-part .pagination>li>a:disabled {
    background-color: #ffffff;
    padding: 2px 6px;
    font-weight: 100 !important;
    margin: 2px
}

.ngo-grid td>.selected,
.selected {
    background-color: #c9dde1
}

.recipe-grid .servings_table {
    width: 75%
}

.recipe-grid .ingre_table {
    width: 90%
}

.recipe-grid td {
    cursor: pointer
}

table tbody tr {
    width: 100%
}

tbody,
thead {
    width: 100%
}

.ingre_table .table-scroll {
    max-height: 170px;
    display: block;
    overflow-y: scroll
}

.ingre_table thead,
.ingre_table tbody tr {
    display: table;
    table-layout: fixed
}

.ngo-grid .table-title,
.recipe-table .table-title {
    display: block;
    margin: auto;
    max-width: 600px;
    padding: 5px;
    width: 100%
}

.ngo-grid .table-title h3,
.recipe-table .table-title h3 {
    color: #fafafa;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    font-family: "Roboto", helvetica, arial, sans-serif;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
    text-transform: uppercase
}

.ngo-grid .table-fill {
    background: white;
    border-radius: 3px;
    border-collapse: collapse;
    margin: auto;
    padding: 8px;
    animation: float 5s infinite
}

.recipe-table .table-fill {
    width: 100%;
    background: white;
    border-radius: 3px;
    border-collapse: collapse;
    padding: 8px;
    animation: float 5s infinite
}

.recipe-table .servings_table.table-fill,
.recipe-table .ingre_table.table-fill {
    width: 90%
}

.ngo-grid th,
.recipe-table th {
    color: #D5DDE5;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    background: #556471;
    border-bottom: 1px solid #9ea7af;
    border-right: 1px solid rgba(109, 111, 116, 0.36);
    font-size: 15px;
    font-weight: 400;
    padding: 10px;
    text-align: left;
    vertical-align: middle
}

.ngo-grid tfoot td,
.recipe-table th {
    color: #D5DDE5;
    background: #556471 !important;
    font-size: 15px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #9ea7af;
    padding: 2px 10px
}

.ngo-grid th:first-child,
.recipe-table th:first-child {
    border-top-left-radius: 3px
}

.ngo-grid th:last-child,
.recipe-table th:last-child {
    border-top-right-radius: 3px;
    border-right: none
}

.ngo-grid tr,
.recipe-table tr {
    color: #666B85;
    font-size: 16px;
    font-weight: normal;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1)
}

.ngo-grid thead tr,
.recipe-table thead tr {
    height: 45px
}

.ngo-grid tbody tr,
.recipe-table tbody tr {
    height: 0px
}

.ngo-grid tr:first-child {
    border-top: none
}

.ngo-grid tr:last-child,
.recipe-table tr:last-child {
    border-bottom: none
}

.ngo-grid tr:nth-child(odd) td,
.recipe-table tr:nth-child(odd) td {
    background: rgba(235, 235, 235, 0.36)
}

.ngo-grid tr:last-child td:first-child,
.recipe-table tr:last-child td:first-child {
    border-bottom-left-radius: 3px
}

.ngo-grid tr:last-child td:last-child,
.recipe-table tr:last-child td:last-child {
    border-bottom-right-radius: 3px
}

.ngo-grid td {
    background: #ffffff;
    padding: 8px;
    text-align: left;
    vertical-align: middle;
    font-weight: 300;
    font-size: 14px;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(249, 249, 249, 0.19);
    max-width: 100px
}

.recipe-table td {
    padding: 8px 17px;
    text-align: left;
    vertical-align: middle;
    font-weight: 300;
    font-size: 14px;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(249, 249, 249, 0.19);
    max-width: 100px
}

.recipe-table tr td:first-child,
.recipe-table thead th:first-child {
    width: 49px
}

.recipe-table tr td,
.recipe-table thead th {
    width: 100px
}

.ngo-grid td:focus,
.recipe-table td:focus {
    outline: none
}

.ngo-grid td[contenteditable=true]:focus,
.recipe-table td[contenteditable=true]:focus {
    font-weight: bold
}

.ngo-grid td:last-child,
.recipe-table td:last-child {
    border-right: 0px
}

.ngo-grid th.text-left,
.recipe-table th.text-left {
    text-align: left
}

.ngo-grid th.text-center,
.recipe-table th.text-center {
    text-align: center
}

.ngo-grid th.text-right,
.recipe-table th.text-right {
    text-align: right
}

.ngo-grid td.text-left,
.recipe-table td.text-left {
    text-align: left
}

.ngo-grid td.text-center,
.recipe-table td.text-center {
    text-align: center
}

.ngo-grid td.text-right,
.recipe-table td.text-right {
    text-align: right
}

.ngo-grid .changed,
.recipe-table .changed {
    color: #5B82FF !important
}

.ngo-grid .error,
.recipe-table .error {
    color: crimson !important
}

.ngo-grid .synced,
.recipe-table .synced {
    color: #08CF03 !important
}

.ngo-grid td,
.recipe-table td {
    overflow: hidden
}

.ngo-grid td:focus,
.recipe-table td:focus {
    outline: 1px dotted #000
}

.ngo-grid .active-page,
.recipe-table .active-page {
    color: #D5DDE5 !important;
    font-weight: bold
}

.margin_t10 {
    margin-top: 10px
}

.margin_l74 {
    margin-left: 74%
}

.margin_l65 {
    margin-left: 65%
}

.margin_l62 {
    margin-left: 62%
}

.margin_l70 {
    margin-left: 70%
}

.modal-content.margin_t30 {
    margin-top: 30px
}

.modal-color {
    background-color: white
}

.modal-backdrop {
    z-index: 0
}

.recipeModel .managebtn {
    width: 100%
}

.recipeModel .modal-dialog {
    top: 10%
}

@media (min-width: 768px) {
    .recipeModel .modal-dialog {
        width: 748px !important
    }
    .hamburger {
        display: none;
    }
}

.c3-custom-plain .c3-grid line {
    stroke: none;
}
  
.c3-custom-plain .c3-axis-x > path.domain, .tick > line[x2="-6"] {
    visibility: hidden;
}

.c3-custom-plain .c3-texts.c3-texts-count .c3-text {
    font-size: 1.8rem;
}

.c3-empty {
    fill: #a94442 !important;
    font-size: 1.4rem !important;
}

.c3-region.regionOdd {
    fill: gray;
}

.c3-region.regionEven {
    fill: black;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.table-row {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;  
    -webkit-flex-direction: row;
    flex-wrap: no-wrap;
    -webkit-flex-wrap: no-wrap;
    width: 100%;
}

.table-row .table-wrapper {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-grow: 0;
    justify-content: space-around;
}

.table-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.table-primary {
    flex-grow: 0;
}

.table-secondary {
    flex-grow: 1;
}

@media(max-width: 1360px) {
    .table-row .table-wrapper {
        flex-direction: column;
    }

    .table-primary {
        margin-top: 8px;
    }

    .table-secondary {
        font-size: 1.2rem;
    }
}

.text-light {
    color: #f8f9fa !important;
}

.text-theme {
    color: #037691 !important;
}

.loader-container {
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.box-main-container .box {
    margin-bottom: 3px;
}

.float-right {
    float: right !important;
}

.download-error button {
    background-color: crimson !important;
}

.viewAllBtn {float: right !important;padding: 0px 5px !important;border: 1px solid #3d87b8 !important;color: #fff !important;border-radius: 2px;background: #3d87b8;}.analysisBox{max-height: 415px !important; overflow-y: auto;}.transBtn {border: 0; background: none;}.blueFilter{color: #3d87b8;}.maskButtons{    margin: 5px;padding: 0px 5px !important;border: 1px solid #3d87b8 !important;color: #fff !important;border-radius: 2px;background: #3d87b8;}.maskButtonsDisabled{    margin: 5px;padding: 0px 5px !important;border: 1px solid #3d87b8 !important;color: #fff !important;border-radius: 2px;background: #3d87b8;}

input.date-picker + ul > li {
    padding: 0 5px 5px 5px;
}

.btn-default[disabled] {
    background-color: #eee;
    opacity: 1;
}

/* ng-sortable */
/* ng-sortable css file */
.as-sortable-item,.as-sortable-placeholder{display:block}.as-sortable-item{-ms-touch-action:none;touch-action:none;-webkit-touch-callout:none}.as-sortable-item-handle{cursor:move;cursor:-webkit-grab;cursor:-moz-grab}.as-sortable-drag{position:absolute;pointer-events:none;z-index:9999}.as-sortable-hidden{display:none!important}.as-sortable-un-selectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
/* ng-sortable css file */
.as-sortable-item,.as-sortable-placeholder{min-height:20px;margin:1px 2px 5px 1px;border-radius:10px}.as-sortable-item{border:solid 1px darkgrey;background-color:#fff}.as-sortable-placeholder{border:1px dashed darkgrey;box-sizing:border-box;background-color:#dbdbdb}.as-sortable-drag{opacity:.8}

.modal-xl.modal-dialog {
    width: auto;
}

@media (min-width: 768px) {
    .modal-xl.modal-dialog {
        width: 760px;
        margin: 30px auto;
    }
}

@media (min-width: 992px) {
    .modal-xl.modal-dialog {
        width: 988px;
        margin: 30px auto;
    }
}

@media (min-width: 1200px) {
    .modal-xl.modal-dialog {
        width: 95%;
        margin: 30px auto;
        max-width: 1600px;
    }
}

.card {
    all: unset;
    border-radius: 4px;
    border: 1px solid #eee;
    background-color: #fafafa;
    padding: 8px;
    transition: all 0.2s ease-in-out;
    max-width: 100%;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
}

.attachments-viewer {
    max-width: 100%;
    text-align: center;
    margin-top: 16px;

    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    align-items: center;
    gap: 8px;
}

.attachments-viewer .attachment {
    box-sizing: border-box;
    /* padding: 16px; */
    width: 200px;
    overflow: hidden;
    position: relative;
}

.attachments-viewer .attachment .attachment-title {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.attachments-viewer .attachment .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: -1;
    transition: all 0.2s linear;
    /* background-color: rgba(0, 0, 0, 0.02); */
}

.attachments-viewer .attachment .overlay .actions {
    width: 100%;
    position: absolute;
    left: 0;
    padding: 4px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.attachments-viewer .attachment .upload-progress-bar {
    position: absolute;
    left: 0;
    width: 50%;
    top: 0;
    bottom: 0;
    transition: width 0.4s linear;
    background-color: rgba(0, 148, 255, 0.4);
    z-index: 5;
}

.attachments-viewer .attachment .upload-progress-bar.success {
    background-color:rgba(0, 128, 0, 0.4);
}

.attachments-viewer .attachment .upload-progress-bar.error {
    background-color: rgba(220, 20, 60, 0.4);
}

.attachments-viewer .attachment:hover .overlay {
    opacity: 1;
    z-index: 10;
}

.attachments-viewer .attachment .icon-container {
    width: 100%;
    text-align: center;
}

.attachments-viewer .attachment .icon-container i {
    width: 100%;
}

.text-info-default {
    color: #0094ff;
}

.error-tooltip {
    max-width: 90%;
    max-height: 200px;
    overflow: hidden;
    border: 1px solid lightgray;
    background-color: white;
    padding: 2px 8px;
    border-radius: 4px;
}

.error-tooltip ul.list {
    list-style-type: circle !important;
}

.error-tooltip ul li {
    color: crimson !important;
    border-bottom: none !important;
}