/*logo*/
@media (max-width: 767px) {
  #sp-top1 {
  display: contents;
}
#sp-top1 #id-user {
  margin-right: 5px; /* Add space from the right */
}

}
.total {
  	padding-top: 10px;
    font-size: 20px;
  	float: right;
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
    float: right;
}

#sp-header.menu-fixed {
    height: 60px;
}
#sp-header.menu-fixed .logo img {
    height: 40px;
    width: auto;
}
#sp-header.menu-fixed #sp-logo {
    height: 60px;
}
#sp-header.menu-fixed .logo {
    height: 60px;
}
.logo img {
    width: 300px;
}

.com-project-management.view-managements section#sp-main-body {
    background: #e6e7e8;
}

body{font-family:'Roboto';}
a {font-weight: normal;}

a {
    color: #111e3e;
}

h3 u {
    text-decoration: auto!important;
    font-weight: 800;}

h3 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;}

.collapse>.accordion-inner { display: none !important;}

.collapse.in>.accordion-inner { display: block !important; }

ul.pagination-list {display: none;}

@media (max-width: 479px) {
  #sp-header .logo a { font-size: 20px; } }

.text-center {
    background: #fff;
    box-shadow: 0 5px 20px -2px #dadada;
    padding: 60px 30px;
}

body.view-login #sp-main-body,
body.view-registration #sp-main-body {
    background: url(/images/0_kpi/bg004.jpg) no-repeat scroll center bottom / cover;
    }
@media(max-width:991px){
  body.view-login #sp-main-body,
body.view-registration #sp-main-body {
    padding: 50px 0px;
    }
}
#sp-header {
    background:#000610!important;
    border-bottom: 1px solid #ffffff73!important;
    height: 90px;
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 99;
}

.dropdown-menu {
    right: 0;
    left: unset !important;
}

/*after login*/
.menu-fixed .sp-module.cls-dash-001 {
    line-height: 60px;
}

.cls-dash-001 { float: right; margin-top: 30px; }

.cls-dash-001 a {
  background: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #22b8f0;
  color: #000;
  font-weight: 600;
  border-radius: 0px;
  transition: 0.5s;
}

.cls-dash-001 a.dropdown-toggle {
    animation: glowings 2000ms infinite;
}

@media(max-width:991px){
  .cls-dash-001 a {
    padding: 10px 10px;
    font-size: 12px
}
}
ul.cls-dropdown-menu.dropdown-menu a {
    padding: 0px 15px;
    border:0px;
    border-radius:0px;
}

ul.cls-dropdown-menu.dropdown-menu a:hover {
    color: #22b8f0!important;
}
#sp-header.menu-fixed #id-user {
    line-height: 60px;
}

@keyframes glowings
{
  0% { box-shadow: 0 0 -10px #22b8f0; }
  40% { box-shadow: 0 0 30px #22b8f0; }
  60% { box-shadow: 0 0 30px #22b8f0; }
  100% { box-shadow: 0 0 -10px #22b8f0; }
}

.cls-dash-001 a:hover { color: #fff !important; background: #22b8f0; }

.cls-dash-001 a:hover{ color: #fff !important; }


.dashboard-style img { border-radius: 100%; border: 1px solid #22b8f0; transition: 0.5s; }

.dashboard-style:hover img { border: 1px solid transparent; box-shadow: 0 4px 15px #b3d3e8; }

.dashboard-style .sppb-btn-primary { min-width: 175px; }

div#sp-top1 {
    line-height: 95px;
}

/*loguot*/
.com-users.view-login .col-sm-4.col-sm-offset-4 {text-align: center;border-radius: 15px;box-shadow: 0px 0px 10px #00000030;}

.com-users.view-login .col-sm-4.col-sm-offset-4 .btn-primary, .sppb-btn-primary {
    background: #000;
    border: #000;
}
.com-users.view-login .col-sm-4.col-sm-offset-4 .btn-primary:hover, .sppb-btn-primary:hover {
    background: #00000090 !important;
}
.com-users.view-login a {
  color: #000;
  transition: 0.3s;
}
.com-users.view-login a:hover {
  text-decoration: underline;
}
#sp-top1 .sp-module {
    margin-top: 0 !important;
}
/*dashboard*/
.sppb-btn {min-width: 150px!important;}

/*new project*/
.new_project_button {
    background: #22b8f0;
    color: white;
    border: 1px solid #22b8f0;
}

.new_project_button:hover {
    background: #ffffff;
    color: #22b8f0;
    border: 1px solid #22b8f0;
}

h1.project_title {
    margin-bottom: 50px;
}

.com-project-management.view-newproject div#sp-component .row{
    border-bottom: 1px solid #cccccc7a;
    padding-bottom:10px;
}

@media screen and (max-width:992px){
  .com-project-management.view-newproject div#sp-component .row .col-sm-6.col-md-2:nth-child(1) {
    float: left;}
.com-project-management.view-newproject div#sp-component .row .col-sm-6.col-md-2:nth-child(3){
    float: right!important;}
}

button#accept0 {
    background: #22b8f0;
    color: white;
    outline: 0px;
    border: blue;
    border-radius: 5px;
    padding: 2px 10px;
}

.calendar-container tr th:nth-child(4),
.calendar-container tr td:nth-child(4),
.calendar-container tr th:nth-child(5),
.calendar-container tr td:nth-child(5),
.calendar-container tr th:nth-child(6),
.calendar-container tr td:nth-child(6) {
    width: unset;
    min-width: unset;
    max-width: unset;
}

.calendar-container table {
    max-width: 300px;
}

/*-----------------------------------------------------------------------
  TABLE STYLE              
-------------------------------------------------------------------------*/

tbody tr:nth-child(even) {background: #fff;color:#000;}
 tbody tr:nth-child(odd) {background: #FFF}

.current-project-section tr th:nth-child(1), .current-project-section tr td:nth-child(1) {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
}

.kpirecordList_status tr th:nth-child(6), tr td:nth-child(6){
      width: unset !IMPORTANT;
    min-width: unset !IMPORTANT;
    max-width: unset !IMPORTANT;}

tr th:nth-child(4), tr td:nth-child(4),
tr th:nth-child(5), tr td:nth-child(5),
tr th:nth-child(6), tr td:nth-child(6) {
  width: 115px;
  min-width: 120px;
  max-width: 120px;
  word-break: break-all;
}
.calendar-container tr th:nth-child(1),
.calendar-container tr td:nth-child(1) {
    width: unset !IMPORTANT;
    min-width: unset !IMPORTANT;
    max-width: unset !IMPORTANT;
}

/*-------------------------
      SCROLLBAR
--------------------------*/
/* width */
::-webkit-scrollbar {
  width: 8px;
  height:7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #000000;
  border-radius:50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/*pagination*/
.pagination.pagination-toolbar.clearfix {
    margin: 10px 0px;
}
.pagination.pagination-toolbar.clearfix {
    margin-bottom: 200px;
}

/*header*/
#sp-header {
    padding: 0;
    background: #00061b;
    box-shadow: 0 2px 8px #376990;
}
#sp-header .logo a {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

/*button*/

button.btn.hasTooltip, button {
    background: #000;
    color: #fff!important;
    border-radius: 0px !important;
    transition: 0.5s;
    outline:0px;
}

button.btn.hasTooltip:hover, button:hover {
    opacity: 0.6;
}


/*register page*/
.com-users.view-registration .col-sm-4.col-sm-offset-4 {
    background: #fff;
    padding: 30px;
}

/*alert*/
.alert {
    background: #ffe6e6;
}

/*project management*/

/*project this month*/

.project-this-month{
  text-align:
  center;
  padding: 15px 30px;
  background-color: #111e3e !important;
  color: white;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0px 0px 10px #00000090;
}
.project-this-month .project-userpoint {
  color: white;
  font-size: 40px;
  line-height: 1.2;
  transition: 0.3s;
}
.project-this-month a:hover, .project-this-month a:focus {
  opacity: 0.6;
  color: white;
}

.this-project-view-more{
  position: absolute;
  right: 10%;
  top: 33%
}

/*project last month*/

.project-last-month{
  text-align:center;
  padding: 15px 30px;
  background-color: black;
  color: white;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #00000090;
}
.project-last-month .project-userpoint {
  color: white;
  font-size: 40px;
  line-height: 1.2;
  transition: 0.3s;
}

.project-last-month a:hover, .project-last-month a:focus {
  opacity: 0.6;
  color: white;
}

.last-project-view-more{
  position: absolute;
  right: 10%;
  bottom: 0%;
}

/*project total*/

.project-total-pending, .project-total-current, .project-total-complete {
  display: inline-block;
  width: 32%;
  padding: 10px;
  text-align:center;
}
@media(Max-width:991px){
.project-total-pending, .project-total-current, .project-total-complete {
  width: 100%;
  background: #fff;
  border-radius: 15px;
  /* margin: 0px -15px; */
  margin-bottom: 10px;
  box-shadow: 0px 0px 10px #00000030;
  display: block;
}
}
span.project-total-pending-span {
    font-size: 100px;
    line-height: 1;
}

span.project-total-current-span {
    font-size: 100px;
    line-height: 1;
    color: #111e3e;
}

span.project-total-complete-span {
    font-size: 100px;
    line-height: 1;
}
@media(max-width:991px){
  span.project-total-pending-span {
    font-size: 40px;
}
span.project-total-current-span {
    font-size: 40px;
}
span.project-total-complete-span {
    font-size: 40px;
}
}
span.project-total-current-header {
    color: #111e3e;
}
@media(min-width:992px){
.col-sm-7.top-table-project {
    padding: 25px 15px;
    background: #fff;
    box-shadow: 0px 0px 10px #00000030;
    border-radius: 15px;
    /* margin: 0; */
}}
@media(max-width:991px){
  .col-sm-7.top-table-project {margin-top: 15px;}
}

@media (min-width: 992px) {
    .row.top-project-row { margin-right: 0; }
    .all-project-status { background: #fff !important; padding: 10px 0; text-align: center; }
}

/*pending project*/

.pending-project-body .col-sm-6.col-md-3.pending_project_name { line-break:anywhere; }

.pending-project-section {
    margin-top: 15px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0px 0px 10px #00000030;
}
.pending-project-section h3 {
    margin: 0px;
    background: #111e3e;
    color: #fff;
    margin: 0px 15px;
    padding: 10px 30px;
    font-size: 24px !important;
    border-radius: 15px 15px 0px 0px;
}
.pending-project-body {
    padding: 20px !important;
    max-height: 350px;
    overflow: hidden;
    overflow-y: scroll;
}
.pending-project-body a {
    color: #000;
}

td.top-table-project {
    border-radius: 15px;
    box-shadow: 0px 0px 10px #00000030;
}
.project-user-header h3 {
    border: none;
    font-weight: 600;
    font-size: 28px;
    margin-bottom: 60px;
    margin-top: 0px;
}
.pending-project-body button {
    background: #000000 !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 4px 10px !important;
    transition: 0.3s;
    border: none;
    line-height: 1.3;
}
.pending-project-body button:hover {
    opacity: 0.8;
}
@media(max-width:991px){
.pending-project-body .col-sm-6.col-md-1.pending_accept {
    width: 30% !important;
    display: inline-block !important;
}
.pending-project-body .col-sm-6.col-md-3 {
    width: 50% !important;
    display: inline-block !important;
}
.pending-project-body {
    /* display: inline-block !important; */
}
.pending-project-body .col-sm-6.col-md-2.pending_value {
    margin-bottom: 10px;
}
.pending-project-body .row {
    border-bottom: 1px solid #ececec;
    padding-bottom: 15px;
    margin-bottom: 15px !important;
}}

@media(max-width:480px){

.pending-project-body .col-sm-6.col-md-1.pending_number{ 
display: inline-block !important;
font-weight:600;
vertical-align:top !important;  
}

.pending-project-body .col-sm-6.col-md-3.pending_project_name{
  width: 85% !important;
  display: inline-block !important;
  text-align:justify;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
  line-break: anywhere;
}

.pending-project-body .col-sm-6.col-md-2.pending_value {
  display:inline-block !important;
  width: 32% !important;
  font-size: 13px;
  text-align: center;
  line-height: 1.3;
}
  
.pending-project-body .col-sm-6.col-md-1.pending_accept {
    width: 40% !important;
    display: inline-block !important;
  justify-content:center!important;
}} 


/*current project*/
footer#sp-footer {
    background: #000;
}
.current-project-section {
    background: #fff;
    padding: 0px;
    border-radius: 15px;
    box-shadow: 0px 0px 10px #00000030;
}
.current-project-section form#adminForm {
    padding: 20px;
    /*height: 500px;*/
    /*overflow: auto;*/
}
.current-project-section h3 {
    margin: 0px;
    background: #111e3e;
    color: #fff;
    margin: 0px;
    padding: 0px;
    font-size: 24px !important;
    border-radius: 15px 15px 0px 0px;
}
.all-project-view-more{
  position: absolute;
  right: 5%;
  bottom: 0%;
}
@media(max-width:991px){
form#adminForm .js-stools .js-stools-container-bar {
    margin-bottom: 20px;
}
form#adminForm input#filter_search {
    width: 100px;
}
form#adminForm button.btn.hasTooltip, button {
    padding: 6px 5px;
  }}

/*button*/
a.btn.btn-small {
    background: #111e3e !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 4px 10px !important;
    transition: 0.3s;
    border: none;
}
a.btn.btn-small:hover {
    opacity: 0.8;
}

/*user page*/
.com-point-lok.view-points section#sp-main-body {
    background: #e6e7e8;
}
.point_back_button button {
    background: #000 !important;
    box-shadow: none !important;
    padding: 5px 20px !Important;
    border-radius: 100px !Important;
    border: none !important;
}
.point_back_button:before {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 200px;
    height: 200px;
    top: -100px;
    right: -150px;
    z-index: 0;
}
.point_back_button:after {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 200px;
    height: 200px;
    bottom: -100px;
    left: -200px;
    z-index: 0;
}
@media(max-width:991px){
.point_back_button:before {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 130px;
    height: 130px;
    bottom: 0px;
    left: 0px;
    z-index: 0;
}
.point_back_button:after {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 130px;
    height: 130px;
    bottom: -130px;
    left: -50px;
    z-index: 0;
}}
.point_back_button:before, .point_back_button:after {
    animation-name            : rotate;
    animation-duration        : 40s     ;
    animation-iteration-count : infinite  , infinite  ;
    animation-direction       : alternate , alternate ;
}
@keyframes rotate {
    from { transform: rotate(90deg); }
    to   { transform: rotate(0); }
}
/*current project*/
div#current-project-tab-click {
    width: 25% !important;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 15px 0px 0px 0px;
    transition: 0.5s;
}
div#activity-tab-click {
    width: 25% !important;
    display: inline-block;
    padding: 10px 30px;
    transition: 0.5s;
    margin-left: -5px;
}

@media(max-width:991px){
  div#current-project-tab-click {
    width: 49% !important;
    padding: 10px 15px;
    font-size: 18px;
}
div#activity-tab-click {
    width: 49% !important;
    padding: 10px 15px;
    font-size: 18px;
}
}
div#current-project-tab-click.active, div#activity-tab-click.active {
    background: #000 !important;
    padding: 10px 30px;
}
div#activity-tab-click:hover {
    background: #000;
}
div#current-project-tab-click:hover {
    background: #000;
}

/*arrow*/
p.this-project-view-more {
    color: #fff;
    font-size: 30px;
    margin-right: -20px;
    transition: 0.3s;
}
p.this-project-view-more:hover {
    opacity: 0.6;
}
p.last-project-view-more {
    color: #fff;
    font-size: 30px;
    margin-right: -20px;
    transition: 0.3s;
}
p.all-project-view-more:hover {
    opacity: 0.6;
}
p.all-project-view-more {
    color: #000;
    font-size: 30px;
    margin-right: -20px;
    transition: 0.3s;
}
@media(max-width:991px){
    p.this-project-view-more {
    color: #fff;
    font-size: 30px;
    margin-right: -10px;
}
p.last-project-view-more {
    color: #fff;
    font-size: 30px;
    margin-right: -10px;
}
p.all-project-view-more {
    color: #000;
    font-size: 30px;
    margin-right: 9px;
    /* margin-bottom: -77px; */
}
}

/*activity*/
div#activity-tab {
    padding: 20px !important;
}
div#activity-tab th {
    color: #000;
}

/*pattern-001*/
.project-user-header:before {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 300px;
    height: 300px;
    bottom: -200px;
    right: -100px;
    z-index: 0;
}
@media(max-width:991px){
  .project-user-header:before {
    width: 250px;
    height: 250px;
}
}
.project-user-header {
    position: relative;
}

/*pattern-style-002*/
.project-user-header h3:before {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element4.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 300px;
    height: 300px;
    top: 50px;
    left: 0px;
    z-index: 0;
}
.project-user-header h3 {
    position: relative;
}


/*pattern-003*/
section#sp-section-3:before {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 150px;
    height: 150px;
    bottom: 0px;
    left: -50px;
    z-index: 0;
}
@media(max-width:991px){
  section#sp-section-3:before {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 200px;
    height: 200px;
    bottom: 0px;
    left: -50px;
    z-index: 0;
}
}
.project-user-header:before {
    animation-name            : rotate;
    animation-duration        : 40s     ;
    animation-iteration-count : infinite  , infinite  ;
    animation-direction       : alternate , alternate ;
}
@keyframes rotate {
    from { transform: rotate(90deg); }
    to   { transform: rotate(0); }
}

/*all member project value*/
.com-project-management.view-newproject #sp-main-body {
    background: #e6e7e8;
}
.com-project-management.view-newproject .project_value_section {
    padding: 0px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0px 0px 10px #00000030;
}
.com-project-management.view-newproject h1.project_title {
    margin: 0px;
    background: #111e3e;
    color: #fff;
    margin: 0px;
    padding: 10px 30px;
    font-size: 24px !important;
    border-radius: 15px 15px 0px 0px;
}
.project_value_section tr th:nth-child(1), 
.project_value_section tr td:nth-child(1) {
    max-width: 130px !important;
    width: 130px !important;
}
.project_value_section tr th:nth-child(2), 
.project_value_section tr td:nth-child(2) {
    max-width: 190px !important;
    width: 190px !important;
}
.project_value_section tr th:nth-child(3), 
.project_value_section tr td:nth-child(3) {
    max-width: 190px !important;
    width: 190px !important;
}
.project_value_section tr th:nth-child(4), 
.project_value_section tr td:nth-child(4) {
    max-width: 140px !important;
    width: 140px !important;
}
.project_value_section tr th:nth-child(5), 
.project_value_section tr td:nth-child(5) {
    max-width: 140px !important;
    width: 140px !important;
}
.project_value_section tr th:nth-child(6), 
.project_value_section tr td:nth-child(6) {
    max-width: 160px !important;
    width: 160px !important;
}
.project_value_section:before {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 200px;
    height: 200px;
    top: -100px;
    right: -150px;
    z-index: 0;
}
.project_value_section:after {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 200px;
    height: 200px;
    bottom: -100px;
    left: -200px;
    z-index: 0;
}
@media(max-width:991px){
.project_value_section:before {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 130px;
    height: 130px;
    bottom: 0px;
    left: 0px;
    z-index: 0;
}
.project_value_section:after {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 130px;
    height: 130px;
    bottom: -130px;
    left: -50px;
    z-index: 0;
}
}
.project_value_section:before, .project_value_section:after {
    animation-name            : rotate;
    animation-duration        : 40s     ;
    animation-iteration-count : infinite  , infinite  ;
    animation-direction       : alternate , alternate ;
}
@keyframes rotate {
    from { transform: rotate(90deg); }
    to   { transform: rotate(0); }
}

/*all member project value*/
.com-point-lok.view-points #sp-main-body {
    background: #e6e7e8;
}
.com-point-lok.view-points .point-table {
    padding: 0px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0px 0px 10px #00000030;
}
.com-point-lok.view-points h3 {
    margin: 0px;
    background: #111e3e;
    color: #fff;
    margin: 0px;
    padding: 10px 30px;
    font-size: 24px !important;
    border-radius: 15px 15px 0px 0px;
}
.com-point-lok.view-points .table-responsive {
    padding: 20px;
}
.com-point-lok.view-points tr th:nth-child(1), 
.com-point-lok.view-points tr td:nth-child(1) {
    max-width: 500px !important;
    width: 500px !important;
}
.com-point-lok.view-points tr th:nth-child(2), 
.com-point-lok.view-points tr td:nth-child(2) {
    max-width: 190px !important;
    width: 190px !important;
}
.com-point-lok.view-points tr th:nth-child(3), 
.com-point-lok.view-points tr td:nth-child(3) {
    max-width: 190px !important;
    width: 190px !important;
}

/*table*/
@media screen and (max-width: 767px){
.table-responsive>.table>tbody>tr>td, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>td, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>thead>tr>th {
    white-space: inherit !Important;
}}

/*project page*/
.project-item {
    padding: 20px;
    background: #fff;
    box-shadow: 0px 0px 10px #00000030;
    border-radius: 20px;
}
#sp-main-body {
    background: #e6e7e8;
    padding: 50px 0px 100px!IMPORTANT;
}
.project-item:before {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 200px;
    height: 200px;
    top: -100px;
    right: -150px;
    z-index: 0;
}
@media(max-width:991px){
.project-item:before {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 130px;
    height: 130px;
    bottom: 0px;
    left: 0px;
    z-index: 0;
}
}
.project-item:before {
    animation-name            : rotate;
    animation-duration        : 40s     ;
    animation-iteration-count : infinite  , infinite  ;
    animation-direction       : alternate , alternate ;
}
.project-item button  {
    background: #111e3e !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 4px 10px !important;
    font-size: 16px;
    transition: 0.3s;
    border: none;
    line-height: 1.5;
}
.project-item button:hover {
    opacity: 0.8;
} 

.project-item a.btn  {
    background: #000000 !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 4px 10px !important;
    font-size: 16px;
    transition: 0.3s;
    border: none;
    line-height: 1.5;
}
.project-item a.btn:hover {
    opacity: 0.8;
} 

/*project-edit*/

.management-edit.front-end-edit {
    padding: 0px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0px 0px 10px #00000030;
}
.management-edit.front-end-edit h1 {
    margin: 0px;
    background: #111e3e;
    color: #fff;
    margin: 0px;
    padding: 10px 30px;
    font-size: 24px !important;
    border-radius: 15px 15px 0px 0px;
}
.management-edit.front-end-edit:before {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 200px;
    height: 200px;
    top: -100px;
    right: -150px;
    z-index: 0;
}
@media(max-width:991px){
.management-edit.front-end-edit:before {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element001.png);
    background-size: contain;
    width: 130px;
    height: 130px;
    bottom: 0px;
    left: 0px;
    z-index: 0;
}
}
.management-edit.front-end-edit:before {
    animation-name            : rotate;
    animation-duration        : 40s     ;
    animation-iteration-count : infinite  , infinite  ;
    animation-direction       : alternate , alternate ;
}
.management-edit.front-end-edit form#form-management {
    padding: 20px;
}
.form-horizontal .control-label {
    text-align: left;
    width: 250px;
}
.management-edit.front-end-edit input {
    width: 88% !important;
}
.management-edit.front-end-edit input {
}
.management-edit.front-end-edit .input-append {
    width: 88% !important;
}
.management-edit.front-end-edit a.chzn-single {
    width: 100% !important;
}
.management-edit.front-end-edit div#jform_status_chzn {
    width: 88% !important;
}
.management-edit.front-end-edit div#jform_commitee_chzn {
    width: 88% !important;
}
.management-edit.front-end-edit div#jform_custom_field9_chzn {
    width: 88% !important;
}
.management-edit.front-end-edit div#jform_custom_field10_chzn {
    width: 88% !important;
}
.management-edit.front-end-edit div#jform_custom_field10_chzn {
    width: 88% !important;
}
.management-edit.front-end-edit div#jform_custom_field11_chzn {
    width: 88% !important;
}
.management-edit.front-end-edit .form-horizontal .controls:first-child {
    text-align: right;
}
.management-edit.front-end-edit a.btn {
    background: #000;
    color: #fff;
    border-radius: 0px;
    transition: 0.3s;
}
.management-edit.front-end-edit a.btn:hover {
    opacity: 0.7;color: #fff !important;
}
.management-edit.front-end-edit button.validate.btn.btn-primary {
    transition: 0.5s;
}

/*pending project*/
@media(Max-width:991px){
.pending-project-body .col-sm-6.col-md-2 {width: 100% !important;display: inline-block !important;}
  
.col-sm-6.col-md-1.pending_number {width: 9% !important;display: inline-block;}

.col-sm-6.col-md-4.pending_project_name {width: 89% !important;display: inline-block;padding-left: 0px !IMPORTANT;}
  
}


/*input*/
input {
    background: #fff !important;
    border-color: #cbcbcb !IMPORTANT;
}


/*table*/

@media(max-width:991px){
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
}

table.performance-table th.performance-id { width: 50px; min-width: 50px; max-width: 50px; }

table.performance-table th.performance-remark { width: 300px; min-width: 300px; max-width: 300px; }

table.performance-table th.performance-rated { width: 150px; min-width: 150px; max-width: 150px; }

table.performance-table th.performance-point { width: 50px; min-width: 50px; max-width: 50px; }

table.performance-table th.performance-action { width: 100px; min-width: 100px; max-width: 100px; }

table.performance-table th.performance-commented-by { width: 150px; min-width: 150px; max-width: 150px; }

@media (min-width: 1200px) {
    table.performance-table { margin-top: 20px; }
}
table#managementList p {
    margin: 0px;
}

/*frontend edited*/
.front-end-edit {
    padding: 20px;
    background: #fff;
    box-shadow: 0px 0px 10px #00000030;
    border-radius: 20px;
}
.front-end-edit input {
    width: 100% !IMPORTANT;
}
.front-end-edit textarea {
    width: 100%;
    min-height: 100px;
}
.front-end-edit .form-horizontal .control-label {
    text-align: left;
}
.front-end-edit a.btn {
    background: #232323;
    border-radius: 0px;
    color: #fff;
    transition: 0.3s;
}
.front-end-edit a.btn:hover {
    color: #fff;
    opacity: 0.8;
}

/*whitebackground*/

div#activity-tab, .white-background-shadow {
    padding: 20px;
    background: #fff;
    box-shadow: 0px 0px 10px #00000030;
    border-radius: 20px;
}

/*button*/
.btn-primary, .sppb-btn-primary {
    background-color: #141e3e;
    transition: 0.3s;
}

a.btn {
    background: #232323;
    color: #fff;
    border-radius: 0px;
    transition: 0.3s;
}
.btn-danger {
    border-radius: 0px;
    background: #ff0000 !important;
    color: #fff !important;
    transition: 0.3s;
}
a.btn:hover {
    opacity: 0.8;
    color: #fff !important;
}
.btn-danger:hover {
    opacity: 0.6;
    color: #fff !important;
}
button.btn.btn-secondary.back-btn.btn-small.back-performance {
    background: #111e3e !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 4px 10px !important;
    transition: 0.3s;
    border: none;
}
a.btn.btn-small.add-button {
    background: #4caf50 !important;
}

/*title-style-001*/
h3.title-performance.title-style-001:before {
    position: absolute;
    content: '';
    background: url(/images/0_kpi/element4.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 300px;
    height: 20px;
    top: 40px;
    left: -5px;
    z-index: 0;
}
h3.title-performance.title-style-001 {
    position: relative;
    margin-bottom: 60px;
    border: none;
    padding: 0px;
    font-size: 30px !important;
    font-weight: 700;
}


/*breezing form*/
button#ff_elem2_calendarButton {
    padding: 4px 15px !IMPORTANT;
    background: #000 !IMPORTANT;
    border: 1px solid #000;
}
button#bfSubmitButton {
    background: #000;
    border-color: #000;
    text-transform: uppercase;
}


/*inventory*/
.inventory_form input {
    width: 100%;
}

label#bfLabel43 {
    width: 100%;
}

label#bfLabel103 {
    width: 100%;
}

.inventory_form input, .inventory_form select, .inventory_form textarea {
    width: 100%;
    max-width: 100%!important;
}

.performance-table i.far.fa-eye {
    color: rgb(0 0 0 / 30%);
}

/*purchase refund equest form*/

.purchase_refund_form input {
    width: 100%;
}

.purchase_refund_form input, .purchase_refund_form select, .purchase_refund_form textarea {
    width: 100%;
    max-width: 100%!important;
}

fieldset#details_of_refund {
    margin-top: 50px;
}

fieldset#banking_information {
    margin-top: 50px;
}

fieldset#item_requested {
   margin-top: 50px;
}