/** Generated by FG **/
@font-face {
  font-family: 'Conv_Platform-Regular';
  src: url('../fonts/Platform-Regular.eot');
  src: local('☺'), url('../fonts/Platform-Regular.woff') format('woff'), url('../fonts/Platform-Regular.ttf') format('truetype'), url('../fonts/Platform-Regular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}


/** Generated by FG **/
@font-face {
  font-family: 'Conv_Platform-Bold';
  src: url('../fonts/Platform-Bold.eot');
  src: local('☺'), url('../fonts/Platform-Bold.woff') format('woff'), url('../fonts/Platform-Bold.ttf') format('truetype'), url('../fonts/Platform-Bold.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}



/*tmog ui*/

.table thead{
  opacity: 1
}
.font2{
  font-family: "Poppins",Arial
}
.menubar-inverse .gui-controls>li:hover .gui-icon,
.menubar-inverse .gui-controls>li.active>.title,
.menubar-inverse .gui-controls li .active li.active.expanded .active .title{
  color: #fff ;


}

/*support page*/
.container{
  padding:  0 15px;
}
.support-page .fixed-container{
  min-width: 100%;
}
.support-page{
  background: #fff;
  font-family: 'DM Sans',sans-serif;
  /*background: url("../images/bg.svg") no-repeat right top ;
  
  height: 100%;*/
}
.support-bg{
  background: url("../images/bg.svg") no-repeat right top ;
  height: calc(100vh - 100px); 
  position: absolute;
  width: 100%;
  left: 0;
  top: 100px;
  display: none;
}

.right-support-design-mobile{
  background: url("../images/bg.svg") no-repeat right top ;
  background-size: cover;
  position: absolute;
  width: 100%;
  padding-top: 30%;
  
}

.right-support-design-desk{
  display: none;
}

.right-support-design-mobile img,.right-support-design-desk img{
  width:100%; display: block; max-width: 300px; margin: 0 auto
}
.support--form label.error{
  top: auto !important;
  bottom:  -20px;
  opacity: 1 !important;
  color:  red !important;
}
.support-page h1{
  font-size: 30px;
  font-family: 'Conv_Platform-Bold';

}
.support-page .successful{
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  padding-top: 40px;
  height: 300px;
  
}

@media (min-width: 768px){
  .support-bg{
    display: block;
  }
  .right-support-design-mobile{
    display: none;
    position: relative;
  }
  .right-support-design-desk{
    display: block;
  }
}

.form-control3,.form-control3:focus,.form-control3:active,.form-control3:hover{
  border: 1px solid #C0BFBB;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  width: 100%;
  line-height: 55px;
  padding: 0 10px;
  font-size: 19px;
  outline: none;
  font-weight: 700;
}
.support-page .form-group label:not(.error){
  display: block;
  font-size: 17px;
  font-weight: 700;
}

.support-page input[type=submit]{
  line-height: 50px;
  background: #FFD200;
  color: #000;
  border: 0;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  font-weight: 700;
  color: #000;
  font-size: 19px;
  min-width: 140px;
}
/*.menubar-visible .menubar-inverse .gui-controls > li a:hover{
  background: #313942
}





.menubar-inverse .gui-controls li.gui-folder:hover .gui-icon,.menubar-inverse .gui-controls li.active > a .title,.menubar-inverse .gui-icon,.menubar-inverse .gui-controls li .title{
  color: #828282;
}

.menubar-visible .menubar-inverse .gui-folder:hover:not(.active) .gui-icon,.menubar-inverse .gui-controls a.expanded .gui-icon{
  background: none;
  color: #828282;
}


.menubar-inverse .gui-controls li.active .gui-icon, 
.menubar-inverse .gui-controls li.active .gui-icon:hover{
  background: none;
  color: #fff; 
}

.menubar-inverse .gui-controls>li:hover .gui-icon,
.menubar-inverse .gui-controls>li.active>.title,
.menubar-inverse .gui-controls li .active li.active.expanded .active .title{
  color: #fff !important;


}*/



#menubar.menubar-inverse:before{
  background: #000000
}
.menubar-visible .menubar-inverse .gui-controls > li.active:not(.gui-folder) > a,.menubar-visible .menubar-inverse .gui-controls > li:not(.gui-folder) > a:hover{
  background: #000000;
}
.menubar-fixed-panel{
  background: #FFD200;
  color: #fff;
  overflow: hidden;
  display: block;
}

.menubar-fixed-panel a{
  color: #fff;
}

.menubar-fixed-panel a.menubar-toggle{
  position: absolute;
  top: 15px;
  left: -4px;
}
.menubar-fixed-panel .expanded{
  position: absolute;
  top: 15px;
  left: 40px;
}

#menubar .menubar-scroll-panel{
  padding-bottom: 40px !important;
}

.header-nav.header-nav-profile .dropdown{
  background: #fff
}
html:not([data-scroll='0']) .header-nav.header-nav-profile .dropdown{
  background: #fff;
  /*box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
  
}
.header-nav.header-nav-profile{
  
  border-radius: 10px;
  

}

.header-nav-profile .dropdown.open > a{
  box-shadow: none;
  border-color: none
}





input::-webkit-contacts-auto-fill-button,
input::-webkit-autofill,
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}




.full-inline-block{
  display: inline-block;
  width: 100%;
  background: #E5E5E5;
  text-align: center;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.24);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
/*summernote*/
.note-editable ol,.note-editable ul{
  padding-left: 20px;
}

.note-editable ol{
  

    list-style-position: outside;


}


.Mac-OS .xoutline-drop ::-webkit-scrollbar-track,
::-webkit-scrollbar-track{  border-radius: 10px; background-color: #c7c7c7; right: 5px;}
.Mac-OS .xoutline-drop ::-webkit-scrollbar,
::-webkit-scrollbar { width: 5px; background-color: #F5F5F5; height: 10px;}
.Mac-OS .xoutline-drop ::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb { border-radius: 10px;   background-color: #555;}

.header-nav .header-nav-brand img{
  top: 13px;
  min-width: auto;
  min-height: auto
}
.logo{
  display: inline-block;
  width: 32px;
  position: absolute;
  top: 2px;
}
.logo-txt{
  display: inline-block;
  font-size: 15px;
  width: 100px;
  line-height: 15px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
  padding-left: 12px;
  text-transform: uppercase;
  
  color: #000;
  font-weight: 700
}

.loginpage .logo-txt{
  margin-left: 35px;
  color: #fff;
}
.menubar-fixed-panel img{
  height: 32px; 
}
.fixed-container{
  min-width: 1200px
}
input:hover,textarea:hover,textarea:focus{
  
  outline: none
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{
  vertical-align: top;
}

a:focus{
  text-decoration: none
}


/*form ui*/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}




input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  /*border: 1px solid green;*/
  /*-webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;*/
  transition: background-color 5000s ease-in-out 0s;
}

.input-icon--panel{
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 20px;
}

.form-group > label, .form-group .control-label,.form-group .form-control ~ label{
  opacity: 0.7
}

.form-control[readonly],.form-control[disabled]{
  /*background: #ededed !important*/
  border: none;
}

.form-group.floating-label .form-control[readonly],.form-group.floating-label .form-control[disabled]{
  background: none !important;
  border-bottom: none !important;
}
.form-group input[type=text].form-control.lockAdded{
  padding-right: 25px !important;
}

.readonly-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top:-25px;
  
}

.form-control.datepicker[readonly]{
  background: transparent !important;
}


.input-daterange{
  padding-top: 15px;
}

.input-daterange label{
  top: -15px !important;
}


.has-error .input-group-addon{
  color: #0c0c0c;
  background: none;
  border: none;
}


textarea{
  resize: none
}
.alert strong{
  display: block;
}


.view-action .form-group{
  padding-top: 16px !important;

}
/*marginal sidebar*/
.margin-x-notes-sidepanel{
  border-top: 1px solid #E4E4E4;

}
.margin-x-notes-sidepanel .nav-tabs{
  display: table;
  width: 100%
}

.margin-x-notes-sidepanel .nav-tabs li{
  display: table-cell;
  width: 50%;

}
.margin-x-notes-sidepanel .nav-tabs li.active{
  border-bottom: 1px solid #0aa89e;
}
.margin-x-notes-sidepanel .nav-tabs li.active a{
  border-bottom: none !important
}
.margin-x-notes-sidepanel .nav-tabs i{
  font-size: 20px;
  display: block;
  line-height: 24px;
  margin: 5px 0 2px 0;
}
.marginbox{
  border: 1px solid #E4E4E4;
  padding: 0 15px;
  text-align: center;
}
.marginbox.great,.marginbox.good,.marginbox.all{
  background: #ECF9F3
}


/*.marginbox.operations*/
.marginbox.creative{
  background: #E3F2FD
}
/*.marginbox.operations{
  background: #E3F2FD
}*/


.marginbox i{
  position: relative;
  top: 0px;
  margin-right: 5px;
  font-size: 16px
}

.marginbox.great.marginCalculation i,.marginbox.good.marginCalculation i,
.marginbox.great.marginCalculation .marginal-box--amt,.marginbox.good.marginCalculation .marginal-box--amt,
.marginbox.great.marginCalculation .marginal-box--intro,.marginbox.good.marginCalculation .marginal-box--intro
{
  color: #0AA89E;
}

.marginbox.marginCalculation .marginal-box--amt,.marginbox.marginCalculation .marginal-box--amt{
  font-weight: bold;
  font-size: 30px;
  line-height: 34px
}

.marginbox.subpar.marginCalculation i,.marginbox.subpar.marginCalculation i,
.marginbox.subpar.marginCalculation .marginal-box--amt,.marginbox.subpar.marginCalculation .marginal-box--amt,
.marginbox.subpar.marginCalculation .marginal-box--intro,.marginbox.subpar.marginCalculation .marginal-box--intro{
  color: #C62828;
}

.marginal-box--intro{
  margin-bottom: 10px;
}



.marginbox.marginQty i,.marginbox.marginQty i{
  color: #00AEEF;
}
.marginbox.marginQty .marginal-box--amt strong,.marginbox.marginQty .marginal-box--amt strong{
  font-size: 30px;
  line-height: 34px
}
/*.marginbox.good{
  background: #E3F2FD
}*/
.marginal-box--title{
  font-size: 14px;
  margin-top: 10px;
  color: #9E9E9E;
}
.marginal-box--amt{
  font-size: 20px;
}

.boxofinfo .form-group .text-sm,.boxofinfo{
  color: #000000;
  font-family: DM Sans;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0em;
  text-align: left;
}

.boxofinfo div{
  color: #000;
}



.gantt_control .form .form-group{
  margin: 0;
}

.form-control-static{
  padding-top: 0;
  padding-bottom: 0;
  line-height: 20px
}

.form.info .form-group, .form-inline.info .form-group{
  margin-bottom: 5px;
}


.select2{
  border: 1px solid #e5e6e6;
}
.form-group{
  /*padding-top: 20px !important;*/
}

.select2-container.form-control{
  min-height: 30px !important;
}
.gantt_control .select2-container.form-control{
  height: 26px;
}

.form-group.disabled{
  border-bottom: none !important;
}

.form-group.disabled label,.form-group.disabled select,.form-group.disabled input{
  /*opacity: 0.3*/
}
.form-group.disabled .form-control{
  border-bottom:  none !important
}

.form-group.no-label{
  padding-top: 0 !important;
  background: rgba(0,0,0,0.04)
}

.form-group.floating-label3{
  padding-top: 0px !important;
  background: rgba(0,0,0,0.04)
}

.form-group.floating-label3 input[type=text].form-control,.form-group.floating-label3 input[type=password].form-control{
  line-height: 40px;
  height: 56px 
}
.form-group.floating-label,.form-group.floating-label2{
  padding-top: 20px !important;
  background: rgba(0,0,0,0.04)
}

.form-group.with-reply{
  padding: 15px !important;
  background: rgba(0,0,0,0.04) 
}
.form-group.with-reply textarea{
  border: none !important;
  /*margin-top: 20px;*/
}

.form-group.with-reply .form-control ~ label{
  top: auto;
  bottom: 0;
  color: red;
}


.replying-msg--panel{
  background: rgba(255, 210, 0, 0.12); 
  padding: 12px 80px 12px 12px;
  border-left: 2px solid #FFD200;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 20px;
  max-height: 250px;

}

.replying-msg--panel .reply-has-img{
  width: 50px;height: 50px;  position: absolute; right: 5px; top: 10px;
  display: table-cell;
  text-align: center; vertical-align: middle;
  border: 1px solid #E0E0E0;
}

.replying-msg--panel .reply-has-img img{
  width: 100%;
}



/*.replying-msg--panel::after{
  content: " ";
  position: absolute;
  height: 30%;

  left: 0; bottom: 0; z-index: 10; background: linear-gradient(to bottom,rgba(0,0,0,.3),rgba(0,0,0,0)); width: 100%
}*/

.ori-msg--name{
  color: rgba(255, 210, 0, 1);
  line-height: 18px;
  font-size: 14px
}
.floating-label .form-control ~ label{

  font-size: 12px;
  top: 15px;
  padding-left: 5px;

}

.floating-label .form-control:focus ~ label,.floating-label.form-group input:not(:placeholder-shown) ~ label {
  top: 0px;
}


.floating-label2{
  /*max-height: 57px;*/
}
.floating-label2 .select2-container.form-control{
  /*padding-top: 22px;*/
}

.select2-container-multi .select2-choices .select2-search-field{
  /*padding-top: 22px !important;*/
  
}
.floating-label2 .select2-container-multi .select2-choices .select2-search-choice{
  /*top: 20px;*/
  /*margin-top: 25px;*/
  margin:  2px ;
  
  border: none;
}
.floating-label2 label,.floating-label label{
  /*left: 5px !important;*/
  padding-left: 5px;
  top: 0px !important;
}

.floating-label2 .select2-search-field label{
  display: none
}
.floating-label2 .select2-container-multi .select2-choices{
  /*border: 0 ; */
  padding: 0;
  min-height: 30px
}
.form-control{
  border: none;
  font-size: 14px;
  line-height: 18px;

}

select.form-control{
  -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E')
      !important;
    background-repeat: no-repeat, repeat !important;
    background-position: right .7em top 50%, 0 0 !important;
    background-size: .65em auto, 100% !important;
    border: none; 
    padding-right:20px;
}
.select2-container-multi.select2-container-disabled .select2-choices{
  border: none !important;
}
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice{
  background: #0aa89e !important;
  border-color: #0aa89e !important;
}
.floating-label,.floating-label2{
  border-bottom: 1px solid #9E9E9E
}
.form-group input[type=text].form-control,.form-group input[type=password].form-control,
.form-group input[type=number]
/*.floating-label2 .select2-container-multi .select2-choices .select2-search-field input*/{
  /*padding: 0px 5px 0 5px !important;*/
  height: 30px;
  
}
.form-group textarea.form-control{
  padding: 0 5px;
}
.floating-label2 .select2-container-multi .select2-choices .select2-search-field input,.floating-label .select2-container-multi .select2-choices .select2-search-field input{
  min-height: 26px
}
.floating-label.form-group textarea.form-control{
  padding: 0px 5px 0 5px;
  
  position: relative;
  height: 100px;
}

.floating-label .form-control.dirty ~ label {
  top: 5px !important;
}

/*color: #0aa89e;
  opacity: 1*/
.floating-label2.form-group input[type=checkbox]{
  margin-top: 10px;
  margin-left: 5px;
}

.form-group select.form-control{
  /*-webkit-appearance:none;*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
  background-size: 12px;
  background-position: calc(100% - 15px) center;
  background-repeat: no-repeat;
  

  
  padding-left: 5px;

}
.floating-label.form-group select.form-control,.floating-label2.form-group select.form-control{
  height: 30px;
  position: relative;
  top:-5px;
  padding-top: 5px;
}

/*.floating-label.form-group select.form-control,.floating-label2.form-group select.form-control{
  height: 30px;
  position: relative;
  top:-10px;
  padding-top: 10px;
}*/
.select2-container .select2-choice,.select2-container .select2-choice > .select2-chosen{
  height: 30px !important;
}
.select2-container .select2-choice .select2-arrow{
  line-height: 12px !important;
  font-size: 12px !important;
}
.select2-dropdown-open .select2-choice{
  background: none !important;
}

.select2-container .select2-choice > .select2-chosen{
  padding-left: 5px !important;
}
.form-group.floating-label input[type=file]{
  padding-top: 25px;
  height: 56px;
  padding-left: 5px;
}

.form-group.floating-label input[type=file]~label{
  top: 0;
}


/*login page*/

section.section-account .img-backdrop, section.section-account .spacer{
  height: 250px;
}

.loginpage  .form-control-feedback{
  font-size: 20px;
  color: #000;
  line-height: 20px;
  position: absolute;
  top: 20px;
}

.loginpage .form{
  display: none
}

.loginpage .form.login-panel{
  display: block;
}


/*workplace*/

.list-group.list-email.list-gray {
    min-height: calc(100vh );
      

    background: #fff
}
.workplace--header{
  position: relative;
}

.workplace--header .project-contextual--menu{
  position: absolute; top: 50%; margin-top: -15px; font-size: 20px; z-index: 2
}
.workplace-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  
  
  overflow: auto;
  height: 100vh;
}
.list-group-item.project-item.active p,.list-group-item.project-item.active .momentOfDate{
  color: #000;
}
.search-property-item--search-panel input[type=search]:focus,.search-property-item--search-panel input[type=search]{
  width: 100%;
  border: 1px solid #dddddd;
  padding-right: 40px;
  outline: none
}
.section-scroll{
  height:79vh !important; overflow: auto; position: relative
}

.project-item .read-icon{
  position: absolute;
  left: 10px;
  font-size: 16px
}
.list-email{
  margin-bottom: 0 !important;
}
.project-item .list-email a{
  padding-right: 120px;
}
.project-item .list-email a.active{
  background: #f5f5f5;
  color: #555555;
}


#postUpdateModal textarea{
  display: block;
  width: 100%;
  border: 1px solid #e5e6e6;
}

#postUpdateModal .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){
  width: 100% !important;
}

.pma-timeline{
  margin: 10px 0 0 0;
  padding: 0;
  list-style: none
}
.pma-timeline li{
  position: relative;
  background: #fff;
  padding: 10px;
  border-bottom: 1px solid #BABABA;
}

.pma-timeline li.system--item{
  background: rgba(255,245,229,1);
}

.pma-timeline li.system-error--item{
  background: rgba(252,231,231,1); 
}
.align-self-center{
  align-self: center !important;
}
.feeds--link,.feeds--link:hover{
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  display: inline-block;
  background: #FFFFFF;
  padding: 3px 15px 0 15px;
  height: 32px;
  text-decoration: none;
  position: relative;
}
.feeds--link i{
  margin: 0 5px 0 0;
  font-size: 18px;
  position: absolute;
  left: 15px;
  top: 6px;
}

.pma-timeline li.system--item .feeds--link,.pma-timeline li.system-error--item .feeds--link{
  padding-left: 40px;
}

.pma-timeline li.system--item .feeds--link i{
  color: rgba(10,168,158,1);
}

.pma-timeline li.system-error--item .feeds--link i{
  color: rgba(198,40,40,1);
}

.timeline-profile{
  position: relative; overflow: hidden;display: inline-block; width: 40px; height: 40px; -webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px; vertical-align: middle;
}
.timeline-user-details{
  display: inline-block;
  vertical-align: middle;
}

.timeline-user--name{
  font-size: 14px;
  line-height: 15px;
  color: #000;
}
.timeline-user--designation{
  font-size: 14px;
  line-height: 15px;
  color: rgba(0,0,0,0.5);
}
.timeline-media-details{
  margin: 10px 0;
}
.timeline-media--item{
  height: 60px;
  border: 1px solid rgba(0,0,0,0.5);
}

.contextual-menu{
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid black;
  z-index: 2;
  position: absolute;
  display: none;
  width: 100px;
  right: 0;
}
.contextual-menu li{
  border: none;
  background: #fff;
  margin: 0;
  padding: 0 5px;
  color: #000;

}
.contextual-menu--panel{
  position: absolute;
  right: 20px;
}

.contextual-menu--icon{
  position: absolute;
  right: 8px;
  top: 12px;
}
.contextual-menu--icon a{
  display: block;
  width: 100%;
  height: 100%;
  
}
.CE-list .contextual-menu--icon a{
  padding-top: 3px;
}

.CE-list .action-panel .contextual-menu--icon{
  top: -2px;
}

/*header*/
/*notification */
.header-nav-options .dropdown .dropdown-menu{
  width: 350px;
  height: 300px;
  overflow: auto;
}

.header-nav-options .dropdown-header{
  font-size: 20px;
  color: #000;
  opacity: 1;
  padding: 10px 10px 0 10px;
}


/*.notification--item.unread{
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
}
.notification--item{
  background: rgba(83, 88, 88, 0.15) !important;
  position: relative !important;
  padding: 10px !important;
  background: #fff !important;
  color: #313534 !important;
  -webkit-border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  border-radius: 3px !important;
  border-color: rgba(83, 88, 88, 0.15) !important;
  line-height: 12px !important
}
.notification--item strong{
  
  padding-right: 65px;

}
.notification--item small{
  display: block;
  margin-bottom: 10px;
  white-space: initial;
}

.notification--item .notification-date{
  display: none
}

.notification--item .notification-date.show {
  font-size: 12px;
  
  display: inline !important;
  
}
*/
.dropdown-menu .load-notification {
  text-align: center;
}
/*.notification--item.unread:before{
  background: #0aa89e !important
}*/
/*.notification--item.unread:before{
  background: none
}
.notification--item:before{
  background: none !important
}*/


/*.notification--item .notification-receiver--panel strong{
  
  align-items:center;
  margin-top: 0px;
  
  height: 40px;
  vertical-align: middle;
  display: flex;

}*/
.notification--item.unread{
  opacity: 1
}
.notification--item{
  opacity: 0.5
}
.notification-receiver--panel{
  display: flex;  
  align-items: center; 
  justify-content: center;
}
.notification-receiver--panel .notification-sender--avatar{
  width: 40px; height: 40px; border-radius: 20px; border: 1px solid rgba(0,0,0,0.3); margin-right: 5px; float: none; display: flex-grid
}

.notification-receiver--panel .notification-sender--msg{
  width: 258px; float: none; display: flex-grid;
  color: rgba(0, 0, 0, 0.67);
}

.notification-unread--dot{
  position: absolute;
  width: 5px;
  height: 5px;
  -webkit-border-radius: 2.5px;
  -moz-border-radius: 2.5px;
  border-radius: 2.5px;
  background: red;
  top: 50%;
  right: 10px;
  margin-top: -2.5px;
}
.notification-receiver--panel .notification-sender--msg strong,.notification-receiver--panel .notification-sender--msg b{
  color: rgba(0, 0, 0, 0.87);
}
.notification-listing{
  list-style: none;
  height: 252px;
  overflow-y: auto;
}
.notification-listing{
  list-style: none;
  margin: 0 ;
  padding: 0;
}
.notification-listing li{
  padding: 5px 0;

}
.notification-listing li a{
  white-space: initial;
  line-height: 14px;
  position: relative;
  display: block;
}
.notification-listing li a:hover,.notification-listing li a:focus{
  text-decoration: none;
}
.headerbar-right{
  background: #fff;
  margin: 10px 25px 0 0;
  box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px
  /*margin-right: 12px;*/
}
.header-nav{
  margin: 0;
}
.header-nav > li > a.btn.btn-icon-toggle.btn-default{
  margin: 0 10px;
}

.header-nav-options .dropdown .dropdown-menu{
  top: 62px;
}

header#header{
  background: none;
  box-shadow: none;
  left: auto !important;
  right: 0;
  width: 300px;

}
.loginpage header#header{
  left: 0 !important;
}
#header.outside{
  background: none;box-shadow: none; position: absolute;
}

/*content*/
#content{
  padding-top: 0;
}

/*section:first-child{
  padding: 0 24px;
}*/
/*overall*/
#base{
  min-height: 100vh;
  overflow: initial;
  /*padding-bottom: 100px;*/
}
.info{
  background: #d4e9fa
}


.profile-img{
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; 
  height: 208px; 
  width: 208px;
  margin-bottom: 20px;
}
.header-profile-img{
  position: relative; overflow: hidden;display: inline-block; width: 40px; height: 40px; -webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px; vertical-align: middle;
}

.ui-autocomplete{
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}



.ui-menu-item{
  box-shadow: 2px 0px 3px rgba(0,0,0,0.25);
}
.card-foot{
  min-height: 50px
}
.card-foot .total-all{
  display: block;
  padding: 10px 0;
  text-align: center;
}
.card-foot .total-all:hover{
  text-decoration: none
}
.card-head.card-head-xs header{
  padding-top: 10px;
}
.close-owner--btn,.close-property--btn{
  position: absolute;
  right: 0px;
  top: 0px;
  

}
.modal-open.menubar-first #menubar{
  z-index: 1
}
.modal-backdrop{
  height: 100%;
  z-index: 1005;
  position: fixed;
}

.modal-dialog{
  z-index: 2000
}

.modal-dialog.m{
  min-width: 760px;
  width:50%;
}




.modal-dialog.xl{
  min-width: 1000px;
  width:80%;
}
/*.example tr td,.example tr th{
  padding: 5px;
}
*/

/*timeline*/

.ajaxTimelineHTML {
  margin-top: 40px;
}
.timeline{
  margin: 0;
}

.timeline-item--start{
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  background: #2196f3;
  padding: 10px;
  color: #fff;
}
.timeline-item--end{
  /*background: #9c27b0;*/
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  background: #9c27b0;
  padding: 10px;
  color: #fff;
}

#gallery progress{
  width: 100%;
}
.timeline-circ{
  /*position: relative;*/
  overflow: hidden;
}

.timeline.collapse-lg:before{
  display: none
}

.timeline.collapse-lg .timeline-entry .card:after{
  left: -8px;
}

.project-timeline-users--listing{
  display: inline-block;
  margin-right: 20px;
  float: left;
}
.project-timeline-users--listing ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.project-timeline-users--listing ul li{
  width: 26px;
  float: left;
}

.project-timeline-users--listing ul li .member-dotdotdot{
  background: rgba(0,0,0,0.4);
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 100%;
  line-height: 40px;
  text-align: center;
}

.timeline-project--panel{
  position: relative;
  line-height: 14px;
  padding: 10px 0;
}
.timeline-project--panel i{
  margin-top: 5px;
}
.timeline-project--panel .owner-details{
  /*margin-left: 40px;*/
  display: inline-block;
  margin-left: 40px;
}
.project-timeline-users--panel{
  display: inline-block;
  float: left;
  line-height: 46px
}
.profile-icon{
  width: 32px;
  height: 32px;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border: 2px solid #fff;
  /*font-size: 10px;
  line-height: 10px*/
  background: #fff;
  
}
/*.profile-icon img{
  width: 100%;
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
  vertical-align: -webkit-baseline-middle;
  height: 100%;
  
  
}*/
.project-timeline-users--panel ul{
  position: absolute;
  width: 300px;
  height: 240px;
  overflow: auto;
  z-index: 2;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.5);
  display: none;
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: 0;
}

.small-line-height{
  line-height: 14px;
  vertical-align: middle;
  height: 40px;
  display: table-cell
}
.project-timeline-users--panel ul li{
  color: #000
}

.timeline-post--panel{
  background: rgba(0, 0, 0, 0.04);
  position: relative;
  padding-right: 240px;
}
.timeline-post--gate{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: pointer;
}
.timeline-post--status{
  position: relative;
  padding-left: 30px;
}
.timeline-post--status textarea{
  border: none;
  background: none;
  margin-top: 15px;
  padding: 5px 0 0 0 ;
  height: 40px;
}
.timeline-post--status i{
  position: absolute;
  left: 5px;
  top: 20px;
}
.timeline-post--action{
  position: absolute;
  right: 10px;
  top: 10px;
}
.timeline-post--panel textarea{
  width: 100%;
}
.datepicker{
  border-radius: 0 !important
}
.datepicker table{
  width: 100%;
}

/*
.form .form-group > label, .form-inline .form-group > label{
  position: relative;
}*/


.nano > .nano-content{
  overflow: auto
}

#content .nano {
  overflow-y: auto;
  max-height: 400px
}
#content .nano > .nano-content{
  position: relative;
}

/*.gui-controls{
  padding-left: 10px;
}
*/



/*project */
.nav-link--icon{
  line-height: 26px !important;
  text-align: center;
  padding: 6px 20px 0 20px !important;
  color: rgba(0,0,0,0.6);
  /*border-bottom: 1px solid black;*/
}

.nav-link--icon:hover{
  text-decoration: none
}

.nav-link--icon i{
  display: block;
  font-size: 24px
}
.property--item,.owner--item{
  display: none
}
.project-order--item .title{
  font-size: 24px
}
.project-order--item{
  margin-top: 20px;
  display: block;
}
/*th.sticky-col{
  position: sticky;
  position: -webkit-sticky;
  
}*/
/*checkout*/
.project-hood--panel.checkout-hood{
  min-height: 2200px;
}
.open-history-order--link{
  text-decoration: underline;
}
.project-hood--panel{
  position: relative;
  padding-right: 400px;
  min-height: 800px;
  overflow: hidden;
}

.project-hood--panel.expand{
  padding-right: 0;
}
.project-sidepanel--sticky{
  width: 400px; 
  position: absolute;
  right: 0; 
  top: 0;
  /*overflow: auto;*/
  height: 100%;
  padding: 0 20px;
  border-left: 1px solid rgba(186, 186, 186, 0.5)
}


.project-sidepanel--sticky.minimize{
  right: -400px;
}
.project-sidepanel--sticky .form-group{
  line-height: 14px
}

.project-sidepanel--sticky h4{
  position: relative;
  padding-right: 40px;
}

.project-sidepanel--sticky h4 a{
  position: absolute;
  right: 0;
  top: 0;
}
.close-project-sidepanel--btn{
  position: absolute; 
  /*left: -50px; */
  left: 0;
  z-index: 2;
  background: #F5F5F5;
  width: 20px;
  height: 50px;
  top: 75px;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  -moz-border-radius-bottomright: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
  padding-top: 13px;
  padding-left: 6px;
}
.close-project-sidepanel--btn.left{
  left: -21px;
  box-shadow: -1px 1px 0px rgba(0, 0, 0, 0.25);

  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;




  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.project-schedule-action--panel{
  min-height: 50px;
  padding: 15px;
}

.project-schedule-action--panel a{
  display: inline-block;
  padding: 0 10px;
}


/*scheduling*/
.teamMemberList .select2-choices .select2-search-choice{
  -webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
position: relative;
overflow: hidden;
}



/*cart*/
.order-cart--item{
  /*max-width: 700px*/
}
.order-cart--item img{
  display: block;
  width: 100%;
}
.order-cart-details--col{
  padding: 10px 0;
}
.cart-product-name{
  font-size: 14px;
  line-height: 21px;
  font-weight: 500
}
/*cost estimation*/
.label-tag{
  display: inline-block;
  background: rgba(255, 210, 0, 1);
  font-size: 11px;
  line-height: 22px;
  padding: 0 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-weight: 500;
  position: relative;
  top: -4px;
  margin-left: 25px
}
.market-segment--list{
    margin: 0;
    padding: 0;
    list-style: none;
}
.market-segment--list li{
    list-style: none;
    padding: 0;
}
.input-container {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12px;
  line-height: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

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

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

/* When the checkbox is checked, add a blue background */
.input-container input:checked ~ .checkmark {
  background-color: rgba(255, 210, 0, 1);
}

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

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

/* Style the checkmark/indicator */
.input-container .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.found-template--panel{
  margin-top: 20px;
  color: #07557E;
}
.ce-pricing--item{
  color: rgba(0, 0, 0, 0.3);
}
.confirmed-ce--row{
  color: rgba(239, 172, 0, 1);
}
.table-intro{
  margin: 10px 0; font-size: 20px
}
.total-lines{
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  width: 90%;
}


.hidden-cart-section{
  background: #E5E5E5;
  padding: 10px 0;
}
.title-hidden-cart-item--section{
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.15px;
  font-weight: 600
}
.mark-as-done--placeholder{
  position: absolute;
  left: 0;
  font-size: 20px;
  /*color: #0AA89E;*/
  opacity: 0.1
}
.mark-as-done--placeholder.green{
  color: #0AA89E;
}
.mark-as-done--placeholder.active{
  opacity: 1
}
.mark-as-done--placeholder i{
  position: relative;
  top: -5px;
}
.mark-as-done--placeholder i.mark-done-status{
  position: relative;
  top: -9px;
}
.cart-ce-item{
  position: relative;
  padding-left: 60px;
  padding-right: 20px;
}
.cart-ce-item .open-shopping-list--orders{
  position: absolute;
  left: 30px;
  font-size: 18px;
  top: 1px;
}
.cart-ce-item .notes--panel{
  position: absolute;
  right: 0;
  opacity: 0.1;
  top: 0;
}
.cart-ce-item .notes--panel.active{
  opacity: 1
}
.grand-total--panel{
  background:rgba(255, 210, 0, 1);
  padding: 5px;
  color: #000;
}
.ce-manage--section{
  padding: 5px 10px;
  color: rgba(0,0,0,0.6);
  padding-right: 100px;
  position: relative;
}
.main-category--subsection{
  background: #F5F5F5;
  padding: 5px 10px;
  color: rgba(0,0,0,0.6);
  padding-right: 100px;
  position: relative;
}

.ce-manage--section i{
  font-size: 20px
}
.ce-manage--section .dropdown-toggle{
  position: absolute;
  right: 7px;
  top: 10px;
}
.ce-manage--section .arrow-up{
  position: absolute;
  right: 65px;
  
  top: 2px;
}

.ce-manage--section .arrow-down{
  position: absolute;
  right: 35px;
  
  top: 0;
  
}

.main-category--subsection .dropdown-toggle{
  position: absolute;
  right: 9px;
  font-size: 16px
}
.main-category--subsection .arrow-up{
  position: absolute;
  right: 65px;
  
  top: 2px;
}

.main-category--subsection .arrow-down{
  position: absolute;
  right: 35px;
  
  top: 0;
  
}
.main-category--subsection .arrow-up i,.main-category--subsection .arrow-down i{
  font-size: 24px;

}
.ce-item{
  padding: 5px 0;
}
.ce-item--dropdown{
  background: #E5E5E5;
  line-height: 16px;
  padding: 20px 0;
}
.ce-item--dropdown label{
  color: rgba(0, 0, 0, 0.6);
  line-height: 14px
}
.ce-item-dropdown--title{
  font-size: 20px;
  color: #000;
  margin: 10px 0 20px 0;
}
.ce-pricing-format{
  /*padding-right: 40px;
  text-align: right*/
  text-align: center;
}

.row-sticky-header [class*=col-]{
  text-align: center;
}
.ce-item input[type=text]{
  width: 100%;
  text-align: center;
}

#handover-modal .column-quotation--item{
  padding-left: 0px !important;
  padding-right: 0;
}
.column-quotation--item{
  padding-left: 40px !important;
  position: relative;
  padding-right: 120px;
  line-height: 16px;
  padding-top: 4px;

}
.column-quotation--item .open-shopping-list--orders{
  position: absolute;
  left: 25px;
  top: 6px;
}
.column-quotation--item .column-quotation--price{
  position: absolute;
  right: 0;
  top: -8px;
  width: 115px;
  font-size: 12px
}
.sortable-panel{
    position: relative; 
}
.sortable-panel>.row{
    border-bottom: 2px solid #ededed;
    /*padding: 10px 0;*/
}
.sortable-panel>.row.shopping-list--orders{
  padding: 0;
}

.sortable-panel .handle{
    position: absolute; left: 0; width: 25px; height: 15px; cursor: move;
    top: 0px; font-size: 18px;
    color: #D7D5D5;
}




.pricing-in-CE--item{
  border: 1px solid black; 
  margin: 10px 0 10px 0; 
  padding: 15px 20px 10px 10px;
  position: relative
}
.pricing-in-CE--item div{
  line-height: 14px;
  margin-bottom: 10px
}
.pricing-in-CE--item .btn-group.contextual-menu--icon{
  position: absolute; z-index: 2; top: 5px; right: 5px
}
.column-with-icons--panel{
  position: relative;
  padding-left: 22px !important;
}
.column-with-icons--panel i{
  position: absolute;
  left: 0;
  top: 14px;
}

.section-add-item--btn,.section-add-item--btn:hover{
  display: inline-block;
  margin-bottom: 20px;
  color: rgba(7,85,126,1);
  font-weight: 700;
  text-transform: uppercase;

  text-decoration: none
}

.second-level-action--panel{
  position: relative;
}
.second-level-action--panel .contextual-menu--icon {
  font-size: 20px;
  line-height: 26px;
}
.second-level-action--panel .contextual-menu--icon i{
  /*font-size: 20px;*/
}

.pills{
  height: 32px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  background: rgba(10, 168, 158, 0.2);
  color: rgba(10, 168, 158, 1);
  line-height: 32px;
  font-size: 12px
}
.pills.red-bar{
  background: rgba(252,231,231,1);
  color: rgba(198,40,40,1);
}
.pills.orange-bar{
  background: #FFF5E5;
  color: #FFA000; 
}
.pills.blue-bar{
  background: #b8dae6;
  color: #00AEEF;
}
.pills.grey-bar{
  background: #E8E8E8;
  color: rgba(0, 0, 0, 0.54);
}
.pills.fixed-icon{
  margin-top: 6px;
  padding-left: 35px;
  padding-right: 30px;
}
.pills.fixed-icon i{
  position: absolute;
  left: 10px;  
  top: 4px;
  font-size: 20px
}
.project-progress-label{
  position: absolute; display: inline-block;font-size: 10px; width: 30px;  text-align: center; top: -10px; 
}
.contextual-menu--icon{
  cursor: pointer;
  width: 25px;
  height: 25px;
  text-align: center;
}
.open.contextual-menu--icon{
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
}
.project-card:hover{
  text-decoration: none
}
.card-body.small-padding{
  padding: 16px;
}
#content .card .card-body .btn.btn-icon-toggle{
  /*box-shadow: 1px 0px 3px rgba(0,0,0,0.7);*/
}
.card-head .tools{
  float: none;
}

.insert-CE-pricing--td{
  padding: 0 !important; 
  height: 40px; position: relative;
}
.insert-CE-pricing--td .easy-autocomplete-container ul{
  border-bottom: 1px solid #ccc;
  /*position: relative;
  overflow-y: scroll;
  height: 250px;
  border-radius: 0 0 2px 2px*/
}

.easy-autocomplete-container ul li:last-child{
  border-bottom: 0 !important;
}
/*.easy-autocomplete-container ul li:last-child*/
/*border-radius: 0 0 2px 2px*/
/*border-width: 0 1px 1px*/
.insert-CE-pricing--panel{
  padding-left: 30px; position: absolute; top: 0; width: 100%
}
.insert-CE-pricing--panel input[type=text]{
  position: absolute; top: 0; left: 0; width: 100%; padding-left: 20px;
  padding-top: 0;
}


.insert-CE-pricing--panel .easy-autocomplete{
  position: absolute;
  width:100% !important;
  left: 0;
}
.insert-CE-pricing--panel .easy-autocomplete input{
  border: none;
}

.insert-CE-pricing--panel .easy-autocomplete-container{
  position: relative;
  top: 30px;
}

.insert-CE-pricing--panel .easy-autocomplete input{
  width: 100%;
}


.add-CE-pricing--btn{
  position: absolute; left: 0; top: 10px;
}

#content .panel-group .btn-icon-toggle{
  box-shadow: none
}
.sticky-col {
  /*position: sticky;*/
  /*position: -webkit-sticky;*/
  background-color: #fff;

}
.first-col{
  left: 0px;
  width: 10px;
}
.second-col{
  left: 39px;
  width: 200px;
  text-align: left;
  z-index: 2;
}
.owner-details--panel,.property-details--panel{
  position: relative;
   margin-top: 10px; 
}









#datatable10{
  position: relative;
}
.table{
  background: #fff
}
.clickable-row{
  cursor: pointer;
}

.style-success .table{
  color: #313534;
}

.uploadedHTML{
  position: relative;
  overflow: auto;
  height: 300px; 
}
.uploadedHTML .img-holder{
  position: relative;
  text-align: center;
  vertical-align: middle;
  /*display: table-cell;*/
  border: 2px solid #ededed;
  height: 100px;
  margin-bottom: 20px
}

.uploadedHTML .img-holder .delete--btn{
  position: absolute;
  right: 0;
  bottom: 0;
  /*border: 1px solid red;*/
  padding: 5px;
  background: red;
  color: #fff;
}

.uploadedHTML .img-holder img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}
/*#datatable10  thead{
  height: 100px;
}
#datatable10 tr th{
  position: absolute;
  top: 0;
}*/

/*calendar*/

.calendar-day--view{
  position: absolute; 
  width: 500px; 
  height: calc(100%  + 50px); 
  background: #fff; 
  right: -525px; 
  top: -25px; 
  z-index: 1;
  transition: all 0.3s ease;
  box-shadow: 0px 15px 12px rgba(0, 0, 0, 0.22), 0px 19px 38px rgba(0, 0, 0, 0.3);

}
.close--calendar-day-view--btn{
  position: absolute;
  left: 0;
  top: 10px;
  font-size: 30px
}
.calendar-day--view.active{
  right: -12px; 
}
.fc-day-header{
  padding: 8px 4px !important;
  color: #313534
}

.fc-day-grid-event{
  cursor: pointer;
}


.table-filter{
  display: block !important;
}
.table-filter .nav{
  display: none
}

/*.table-filter select{
  display: block;
  margin: 20px 0 0 20px;
}*/
.table-filter{
  padding: 20px;
}

.fc-more-popover .fc-event-container{
  position: relative;
  overflow-y: auto;
  max-height: 200px
}


.control--form .btn-floating-action .fa,.control--form  .btn-floating-action .md,.control--form  .btn-floating-action .glyphicon{
  line-height: 30px
}

.gantt_control label{
  text-align: left;
}
.gantt_control .form-control,.gantt_control .select2-container .select2-choice,.gantt_control .select2-container .select2-choice{
  font-size: 14px;
  height: 26px;
  line-height: 26px;
  margin: 0;
}
.gantt_control .select2-dropdown-open .select2-choice{
  background: none
}


.alert-danger{
   line-height: 16px
}


.inline-loading-gif{
  display: none
}
/*.form-control[readonly]{
  cursor: pointer;
}*/
.modal .help-block{
  /*position: relative !important;
  bottom:0 !important;*/
}
#handover-modal .column-quotation--item label,.checkbox-complete--btn{
  cursor: pointer;
}
#handover-modal .help-block{
  position: relative;
  bottom: 0;
  color: red;
  opacity: 1
}

label.error{
  display: block;
  color: #f44336 
}

table .warning td{
  background-color: #faebd4 !important
}

.pricing ul{
  list-style: none
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.calculator-panel{
  position: relative;
  padding-left: 200px;
}
.calculator-side--panel{
  position: absolute;
  left: 0;
  width: 170px;
}

.calculator-side--panel a{
  display: block;
}
.calculator-main--panel{
  
}


.momentOfDate{
  display: none
}
.momentOfDate.show{
  display: inline-block;
}
/*dashboard page*/
.dashboard-small--widget{
  height: 200px; position: relative; overflow: auto;
}
.dashboard-small--widget a{
  display: block;
  padding: 10px 100px 10px 10px;
  line-height: 14px;
  position: relative;
  
}
.dashboard-small--widget a:hover{
    text-decoration: none;
    background: rgba(0, 0, 0, 0.04);
}
.dashboard-small--widget a .momentOfDate{
  position: absolute;
  right: 10px;
  top: 10px;
  color: #9E9E9E;
}

.dashboard-small--widget.card-body{
  padding: 0px;
} 

/*order page*/


.sidepanel--cards{
  min-height: 100px;
  position: relative;
  /*padding-left: 120px;*/
}
.left-sidepanel--cards{
  position: absolute;
  left: 0;
  width: 100px;
}
.left-sidepanel--cards ul{
  list-style: none;
  line-height: 18px
}

.left-sidepanel--cards ul li{
  margin-bottom: 10px;
}
.main-side--cards{
  width: 100%;
}

.category--item{
  display: none
}


.category--item.active{
  display: block;
  margin-top: 40px;
}

hr{
  margin: 0;
}

.order-progress--box{
  background: #ededed;
  padding: 5px;
  color: #000;
  margin-bottom: 20px;
  line-height: 16px
}

.order-details--panel{
  position: relative;
  min-height:500px;
}
.loading-panel{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 2; color: #fff
}

.loading-panel .inline-loading-gif{

  /*display: block; position: absolute; top: 50%; left: 50%; margin-top: -15px;margin-left: -15px;*/
  display: block; position: absolute; top: 20%; left: 50%; margin-top: 0;margin-left: -15px;
}

.ce-table{
  position: relative;
  min-height: 100px
}




.template-six{
  width: 100%;
  padding-right: 300px;
  position: relative;
}
.main-content-left{
  width: 100%;
  /*position: absolute;*/
  /*right: 100px;*/
}
.side-panel-right{
  /*position: absolute;*/
  /*right: 0px;*/
  /*top: 0px;*/
  /*width: 300px;*/
}

/*margin, order*/

.final-cart .productTable thead tr th{
  background: #f6f8fb
}

.productTable img{
  max-width: 100%; max-height: 100px; margin: 0 auto
}

.productTable td{
  border-top: none !important;
}

.final-cart .productTable thead tr th:first-child,.final-cart .productTable tbody tr td:first-child{
  padding-left: 20px !important;
}
.prev-history--listing{
  /*margin: 40px 0 !important;*/
  background: none;
}
.prev-history--listing th{

}
.prev-history--listing td{
  padding: 2px !important;
  border: none !important

}
.inside-cart{
  background: #E5E5E5; 
  padding: 10px;
  display: none;
  line-height: 15px;

}

.inside-cart [class*=col-]{
  /*color: rgba(49, 53, 52,0.55);*/
}
.curtains-card{

}
.curtains-body--card{
  padding: 20px 0;
  font-size: 14px;
  line-height: 16px;
  
}
.curtains-body--card label{
  color: #9E9E9E;
}
.curtains-body--card .form-control-static{
  margin-bottom: 10px;
  color: #000;
}

.inside-cart [class*=col-] .form-control-static{
  line-height: 16px;
  margin-top: 5px;
  color: rgba(49, 53, 52,1);
}
.inside-cart img{
  display: block;
  width: 100%;
}
.inside-cart--content{
  min-height: 140px;
}
.dept-title{
  font-size: 14px;
  font-weight: bold;
}
.checkout-hood .company-group--row{
  display: block;
}
.company-group--row,.company-margin--listing{
  display: none
}
.company-group--row.card-head.card-head-xs,.company-group--row .card-head{
  min-height: auto;
}

.shopping-list--orders{
  display: none;
  background: #E5E5E5
}
.shopping-list--orders .row{
  margin: 0 -15px;
}
.shopping-list--orders img{
  display: block;
  width: 100%
}

/*.section-header{
  min-height: 85px;
  height: auto
}*/
.gui-controls > li ul > li > a:before{
  height: 2px;
  top: 12px;
}
.no-pad{
  padding: 0 !important;
  margin: 0 !important;
}


/*ganttchart*/
.deadline {
    position: absolute;
    border-radius: 12px;
    border: 2px solid #585858;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: 6px;
    z-index: 1;
    background: url("common/deadline_icon.png") center no-repeat;
}

.overdue-indicator {
    width: 16px;
    margin-top: 10px;
    height: 16px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    color: #fff !important;
    background: rgb(255, 60, 60);
    line-height: 16px;
    text-align: center;
    font-size: 10px;
}

.task-popup--left{
  float: left;
  box-shadow: 0px 15px 12px rgba(0, 0, 0, 0.22), 0px 19px 38px rgba(0, 0, 0, 0.3);
  width: 55%;
}

.task-popup--right{
  float: left;
  width: 45%;
  padding-top: 40px;
  padding-left: 20px;
  height: 500px;
  position: relative;
  overflow: auto;
}
.task-popup--right #orderTools{
  margin-bottom: 40px;
}
#orderTools .company-group--row{
  display: block;
}
.task-row.gantt_row div .pending-indicator {
    width: 16px;
    margin-top: 10px;
    height: 16px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    color: #fff !important;
    background: rgb(255, 60, 60);
    line-height: 16px;
    text-align: center;
    font-size: 10px;
}

.task-row.gantt_row div .approved-indicator {
    width: 16px;
    margin-top: 10px;
    height: 16px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    color: #fff !important;
    background: #4caf50;
    line-height: 16px;
    text-align: center;
    font-size: 10px;
}

.level2 {
    background: orange
}

.task-row.gantt_row .overdue-indicator {
    color: #fff !important;
}

.milestone-row.gantt_row .gantt_cell.gantt_cell_tree {
    text-decoration: underline;
}

.gantt_row .overdue-indicator {
    color: #fff !important;
}

.weekend {
    background: #f4f7f4;
}

.gantt_cal_larea {
    overflow: visible;
}

.gantt_cal_chosen,
.gantt_cal_chosen select {
    width: 500px;
}

.gantt_grid_head_cell[column_id='add'] {
    display: none
}

.readyonly {
    background: #ededed;
    box-shadow: none;
    border: 1px solid black;
    padding: 5px;
    /*color: #;   */
}


/*.disable-add-row .gantt_add,.task-row .gantt_add{*/
.disable-add-row .gantt_add,
.task-row .gantt_add,
.role-Designer .gantt_add,
.role-TPG .gantt_add,
.role-CREW .gantt_add {
    display: none !important
}

.gantt_delete_btn_set {
    display: none
}


/*.gantt_grid_scale .gantt_grid_head_cell,  
        .gantt_task .gantt_task_scale .gantt_scale_cell {   
            font-weight: bold;  
            font-size: 14px;    
            color: rgba(0, 0, 0, 0.7);  
        }*/

.gantt_row div {
    /*color: #066265 !important;*/
    color: #066265 !important;
    font-weight: bold
}

.warning-row {
    background-color: orange !important;
    color: #fff !important;
}

.rush-row {
    background-color: red !important;
    color: #fff;
}

.warning-row div,
.rush-row div {
    color: #fff !important
}

.task-row.gantt_row div {
    /*color: #066265 !important;*/
    color: #454545 !important;
    font-weight: normal;
}

.resourceGrid_cell .gantt_row div {
    /*color: #066265 !important;*/
    font-weight: normal color: #454545 !important;
}

.gantt_task_content {
    display: none
}

.hideItem {
    display: none;
}


/*
        .gantt_grid_data .gantt_row.gantt_selected, .gantt_grid_data .gantt_row.odd.gantt_selected, .gantt_task_row.gantt_selected,.gantt_grid_data .gantt_row.odd:hover, .gantt_grid_data .gantt_row:hover{
            background: #0aa89e !important
        }

        

        .gantt_row .gantt_cell{
            color: #fff !important;
        }*/


/*.eachtaskitem.fc-event{
          display: none
        }*/

.fc-event,
.fc-event-dot {
    background: #299cb4
}


/*@import url('https://fonts.googleapis.com/css?family=Roboto:500');*/

* {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.gantt_control {
    background: #ededed;
    text-align: center;
}

.gantt_control input[type=button],
.gantt_control input[type=file],
.gantt_control input[type=checkbox],
.gantt_control button {
    font: 500 14px Roboto;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    background: #fff;
    padding: 4px 12px;
    margin: 0 5px;
    color: rgba(0, 0, 0, 0.7);
    line-height: 20px;
}

.gantt_control input[type=button]:hover,
.gantt_control button:hover {
    border: 1px solid #B3B3B3;
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

.gantt_control input[type=button]:active,
.gantt_control button:active {
    background: #F7F7F7;
}

.gantt_control input[type=button]:focus,
.gantt_control button:focus {
    outline: none !important;
}

.gantt_control {
    padding: 10px 0 12px;
}

.gantt_control input[type=radio],
.gantt_control input[type=checkbox] {
    display: none;
}

.gantt_control label {
    vertical-align: bottom;
    position: relative !important;
    line-height: 14px !important;
    padding: 0 6px;
    color: rgba(0, 0, 0, 0.54);
    font: 14px Roboto;
    line-height: 20px;
    letter-spacing: 0.2px;
}

.material-icons {
    position: relative;
    top: 6px;
    right: 2px;
    color: rgba(0, 0, 0, 0.54);
}

.material-icons.icon_color {
    color: #0288D1;
}

.material-icons.md-inactive {
    color: rgba(0, 0, 0, 0.38);
}

.checked_label {
    color: rgba(0, 0, 0, 0.7)!important;
}

.gantt_radio:checked,
.gantt_radio:not(:checked) {
    position: absolute;
    left: -9999px;
}

.gantt_radio:checked+label,
.gantt_radio:not(:checked)+label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}

.gantt_radio:checked+label:before,
.gantt_radio:not(:checked)+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

.gantt_radio:checked+label:after,
.gantt_radio:not(:checked)+label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #8a9ada;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.gantt_radio:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.gantt_radio:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.gantt_row .show-completion--btn {
    background: #9b7ad3;
    cursor: pointer;
    color: #fff !important;
    border-radius: 3px;
    margin: 3px;
    display: inline-block;
    width: 30px;
    line-height: 25px;
    text-align: center;
}

.gantt_row .show-completion--btn.ready {
    background: orange;
}

.gantt_row .show-completion--btn.completed {
    background: green;
}

.ticketing {
    display: none
}

.refresh {
    display: none
}

#projectSummaryModal .modal-body ul,
#projectSummaryModal .modal-body ol {
    list-style: none
}

#projectSummaryModal .modal-body ul>li>.listingName {
    text-decoration: underline;
    width: 60%;
}

#projectSummaryModal .modal-body ol li .listingName {
    text-decoration: none;
}

.listingNo {
    width: 5%;
    display: inline-block;
}

.listingName {
    width: 55%;
    display: inline-block;
}

.listingCompletion {
    width: 30px;
    text-align: center;
    display: inline-block;
}

.back-project--btn {
    background: #caf0ee;
    display: inline-block;
    padding: 10px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33)
}

.gantt_task_line {
    background: #555555
}

.gantt_task_progress {
    background: #4caf50
}
#gantt_here .deadline {
    position: absolute;
    border-radius: 12px;
    border: 2px solid #585858;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: 6px;
    z-index: 1;
    background: url("common/deadline_icon.png") center no-repeat;
}

#gantt_here .overdue-indicator {
    width: 16px;
    margin-top: 10px;
    height: 16px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    color: #fff !important;
    background: rgb(255, 60, 60);
    line-height: 16px;
    text-align: center;
    font-size: 10px;
}

#gantt_here .task-row.gantt_row div .pending-indicator {
    width: 16px;
    margin-top: 10px;
    height: 16px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    color: #fff !important;
    background: rgb(255, 60, 60);
    line-height: 16px;
    text-align: center;
    font-size: 10px;
}

#gantt_here .task-row.gantt_row div .approved-indicator {
    width: 16px;
    margin-top: 10px;
    height: 16px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    color: #fff !important;
    background: #4caf50;
    line-height: 16px;
    text-align: center;
    font-size: 10px;
}

#gantt_here .level2 {
    background: orange
}

#gantt_here .task-row.gantt_row .overdue-indicator {
    color: #fff !important;
}

#gantt_here .milestone-row.gantt_row .gantt_cell.gantt_cell_tree {
    text-decoration: underline;
}

#gantt_here .gantt_row .overdue-indicator {
    color: #fff !important;
}

#gantt_here .weekend {
    background: #f4f7f4;
}

#gantt_here .gantt_cal_larea {
    overflow: visible;
}

#gantt_here .gantt_cal_chosen,
#gantt_here .gantt_cal_chosen select {
    width: 500px;
}

#gantt_here .gantt_grid_head_cell[column_id='add'] {
    display: none
}

#gantt_here .readyonly {
    background: #ededed;
    box-shadow: none;
    border: 1px solid black;
    padding: 5px;
    /*color: #;   */
}


#gantt_here .task-row .gantt_add,
#gantt_here .role-Designer .gantt_add,
#gantt_here .role-TPG .gantt_add,
#gantt_here .role-CREW .gantt_add {
    /*display: none*/
}

#gantt_here .gantt_delete_btn_set {
    display: none
}


/*.gantt_grid_scale .gantt_grid_head_cell,  
        .gantt_task .gantt_task_scale .gantt_scale_cell {   
            font-weight: bold;  
            font-size: 14px;    
            color: rgba(0, 0, 0, 0.7);  
        }*/

#gantt_here .gantt_row div {
    text-decoration: none !important;
    color: #066265 !important;
    font-weight: bold
}

#gantt_here .warning-row {
    background-color: orange !important;
    color: #fff !important;
}

#gantt_here .rush-row {
    background-color: red !important;
    color: #fff;
}

#gantt_here .warning-row div,
#gantt_here .rush-row div {
    color: #fff !important
}

#gantt_here .task-row.gantt_row div {
    /*color: #066265 !important;*/
    color: #454545 !important;
    font-weight: normal;
}

#gantt_here .resourceGrid_cell .gantt_row div {
    /*color: #066265 !important;*/
    font-weight: normal color: #454545 !important;
}

#gantt_here .gantt_tree_content a{
  text-decoration: underline;
}

#gantt_here .gantt_task_content {
    display: none
}

#gantt_here .hideItem {
    display: none;
}



#gantt_here .fc-event,
#gantt_here .fc-event-dot {
    background: #299cb4
}


#gantt_here .gantt_control {
    background: #ededed;
    text-align: center;
}

#gantt_here .gantt_control input[type=button],
#gantt_here .gantt_control input[type=file],
#gantt_here .gantt_control input[type=checkbox],
#gantt_here .gantt_control button {
    font: 500 14px Roboto;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    background: #fff;
    padding: 4px 12px;
    margin: 0 5px;
    color: rgba(0, 0, 0, 0.7);
    line-height: 20px;
}

#gantt_here .gantt_control input[type=button]:hover,
#gantt_here .gantt_control button:hover {
    border: 1px solid #B3B3B3;
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

#gantt_here .gantt_control input[type=button]:active,
#gantt_here .gantt_control button:active {
    background: #F7F7F7;
}

#gantt_here .gantt_control input[type=button]:focus,
#gantt_here .gantt_control button:focus {
    outline: none !important;
}

#gantt_here .gantt_control {
    padding: 10px 0 12px;
}

#gantt_here .gantt_control input[type=radio],
#gantt_here .gantt_control input[type=checkbox] {
    display: none;
}

#gantt_here .gantt_control label {
    padding: 0 6px;
    color: rgba(0, 0, 0, 0.54);
    font: 14px Roboto;
    line-height: 20px;
    letter-spacing: 0.2px;
}

#gantt_here .material-icons {
    position: relative;
    top: 6px;
    right: 2px;
    color: rgba(0, 0, 0, 0.54);
}

#gantt_here .material-icons.icon_color {
    color: #0288D1;
}

#gantt_here .material-icons.md-inactive {
    color: rgba(0, 0, 0, 0.38);
}

#gantt_here .checked_label {
    color: rgba(0, 0, 0, 0.7)!important;
}

#gantt_here .gantt_radio:checked,
#gantt_here .gantt_radio:not(:checked) {
    position: absolute;
    left: -9999px;
}

#gantt_here .gantt_radio:checked+label,
#gantt_here .gantt_radio:not(:checked)+label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}

#gantt_here .gantt_radio:checked+label:before,
#gantt_here .gantt_radio:not(:checked)+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

#gantt_here .gantt_radio:checked+label:after,
#gantt_here .gantt_radio:not(:checked)+label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #8a9ada;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#gantt_here .gantt_radio:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

#gantt_here .gantt_radio:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

#gantt_here .gantt_row .show-completion--btn {
    background: #9b7ad3;
    cursor: pointer;
    color: #fff !important;
    border-radius: 3px;
    margin: 3px;
    display: inline-block;
    width: 30px;
    line-height: 25px;
    text-align: center;
}

#gantt_here .gantt_row .show-completion--btn.ready {
    background: orange;
}

#gantt_here .gantt_row .show-completion--btn.completed {
    background: green;
}

#gantt_here .ticketing {
    display: none
}

#gantt_here .refresh {
    display: none
}

#projectSummaryModal .modal-body ul,
#projectSummaryModal .modal-body ol {
    list-style: none
}

#projectSummaryModal .modal-body ul>li>.listingName {
    text-decoration: underline;
    width: 60%;
}

#projectSummaryModal .modal-body ol li .listingName {
    text-decoration: none;
}

#gantt_here .listingNo {
    width: 5%;
    display: inline-block;
}

#gantt_here .listingName {
    width: 55%;
    display: inline-block;
}

#gantt_here .listingCompletion {
    width: 30px;
    text-align: center;
    display: inline-block;
}

#gantt_here .back-project--btn {
    background: #caf0ee;
    display: inline-block;
    padding: 10px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33)
}

#gantt_here .gantt_task_line {
    background: #555555
}

#gantt_here .gantt_task_progress {
    background: #4caf50
}



/*main ui styles*/
.light-grey-indication{
  color: #C4C4C4;
}
.red-indication{
  color: #C62828;
}
.green-indication{
  color: #0aa89e;
}
.orange-indication{
  color: #FFA000;
}

.blue-indication{
 color: #27B1FA; 
}
.rounded-icon{
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #fff;
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  display: inline-block;
}
.rounded-icon.green{
  background: #0AA89E;
  color: #fff;
}
.small-padding2{
  padding: 5px;
}


.card-head .tools{
  padding-right: 0;
}



/*page*/

/*3 steps ordering page*/


.header-tools .active .item .selected{
  border-bottom: 2px solid rgba(255, 210, 0, 1);
  line-height: 47px;
  
}
.tertiary-menu .item a:hover{
  text-decoration: none
}
.tertiary-menu .item a{
  height: 40px;
  display: inline-block;
  padding: 5px 10px 5px 10px;
}

.tertiary-menu .item.selected a{
  border-bottom: 1px solid #0AA89E
}
.order-company--summary{
    background: #F6F6F6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.calculator-side--panel a{
    padding: 10px;
    line-height: 16px;
    border: 1px solid #CCCCCC;
    margin-bottom: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.calculator-side--panel a:hover{
    text-decoration: none;
}
.calculator-side--panel a.active{
    background: #0BA89F;
    color: #fff;
}
.company--item{
    
    margin-bottom: 20px;
    display: none;
    min-height: 600px
}
.company--item.active{
    display: block;
}
.company-empty-products-panel{
    padding: 40px 20px;
    text-align: center;
    border: 2px dashed #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top: 20px;
}
.company-empty-products-panel a{

}

.order-company--cart .dataTables_filter,.order-company--cart .dataTables_length{
    display: none
}
.order-company--cart input[type=number]{
    height: 20px;
    width: 70px;
}
.order-company--cart table.dataTable thead th,.order-company--cart table.dataTable thead td,.order-company--cart  table.dataTable tbody td{
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

.customized-calculator td .form-group{
    padding: 0;
    margin: 0;
}

.customized-calculator td .form-group.has-error input{
    border: 1px solid red;
}


.totalMargin.great{
    color: #00ff00
}
.totalMargin.good{
    color: #00ffff
}
.totalMargin.subpar{
    color: #ff0000
}

.product-row.added{
    background: green;
    color: #fff;
}

.companySection .product-row.added input[type=number]{
    display: none
}

tr.product-row td,.customized-calculator tr td,.customized-calculator tr th{
    line-height: 14px !important;
    padding: 5px !important;
}
.customized-calculator tr td input[type=number]{
    width: 50px;
}

.customized-calculator tr th{
    text-align: center;
}

.pagination-panel a{
    display: inline-block;
    padding: 0 5px;
    border: 1px solid #ededed;
    margin: 0 3px;
}

.pagination-panel a.active{
    background: #ededed
}





/*margin order*/
.create-CE--link,.create-CE--link:hover{
  color: #07557E !important;
  text-transform: uppercase;
  font-size: 24px;
  text-decoration: none
}

.ce-table .create-CE--link{
  font-size: 14px
}


/*role page*/
.role-content{
  min-height: 400px
}


/*overwrite plugins*/
/*select2*/
.select2-locked{
  padding: 6px 5px 6px 5px !important;
}
/*grids*/

/*table*/
.table{
  margin: 0;
}
.action-panel{
  padding: 5px 0 0 0 !important;
  position: relative;
  
}
.small-padding .action-panel .contextual-menu--icon,
.small-padding2 .action-panel .contextual-menu--icon,
table tr td.action-panel .contextual-menu--icon{
  top: 12px !important;
}

.contextual-menu--icon i{
  margin-top: 5px;
}
.action-panel .contextual-menu--icon{
  top: 2px;
  position: absolute; 
  right: 5px
}
.action-panel .card-head .tools > .btn-group,.action-panel .btn-group{
  margin-right: 0 !important
}



/*table*/
.list-filter{
  position: relative;
  
  display: inline-block;
  padding-right: 20px;
  margin-top: 10px;
}
.list-filter .list-filter--group{
  position: relative;
  
}

.list-filter .list-filter--group span{
  
  float: left;
  font-size: 12px

}
.list-filter .list-filter--group select{
  color: #0AA89E;
  font-size: 12px;
  height: auto !important;
  margin: 0;
  float: left !important; 
  display: inline-block; 
  width: auto;
  -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none; 

        padding-right: 20px;
        position: relative;
        z-index: 2
}

.list-filter .list-filter--group select + i{
  position: absolute;
  right: 0;
  top: -3px;
  font-size: 20px;
}


.data-listings{
  margin-top: 20px;
}

/*main ui styles*/
.red-btn{
  background: rgba(252,231,231,1);
  color: rgba(198,40,40,1);
  border: 1px solid rgba(198,40,40,1);
}

.red-btn:hover,.red-btn:focus{
  background: rgba(198,40,40,1);
  color: rgba(252,231,231,1);
  border: 1px solid rgba(198,40,40,1);
}
.style-primary-light2{
  background: rgba(255, 210, 0, 0.2)
}

.no-bot-pad{
  padding-bottom: 0;
}
.card-body2{
  padding: 0;
}

.overflow-hidden{
  overflow: hidden;
}
.project-progress.progress{
  height: 8px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: rgba(10, 168, 158, 0.2);
  margin-top: 10px;
}
.project-progress.red-bar{
    background: rgba(252,231,231,1)
}
.project-progress.blue-bar{
    background: #b8dae6;
}
.project-progress.green-bar{
    background: rgba(10, 168, 158, 0.2)
}
.project-progress.grey-bar{
    background: #E8E8E8;
}
.project-progress.red-bar .progress-bar{
  background: rgba(198,40,40,1)
}
.btn-group.open .dropdown-toggle{
  box-shadow: none
}
.filter-notification{
  font-size: 10px;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  position: relative;
}
.card-body{
  display: block;
  position: relative;
  
}

a.card-body{

}



/*.btn{
  padding: 3px 14px;
}*/
.btn-mark-done,.btn-mark-done:hover{
  color: #ffffff;
  background-color: #2196F3;
  border-color: #2196F3
}
.btn i{
  position: relative;
  top: 0;
  margin-right: 10px;
}
.timelineHTML .dropdown-menu{
  
  max-height: 300px;
  overflow: auto;
}
.dropdown-menu > li > a.disabled{
  color: #9E9E9E;
}
.dropdown-menu.pma-dropdown{
  max-height: 300px;
  overflow: auto;
  background: #fff
}
.dropdown-menu.pma-dropdown-menu > li > a i.zmdi {
  position: absolute;
  left: 8px;
  top: 10px;
  font-size: 14px
}

.dropdown-menu.pma-dropdown-menu > li > a i.zmdi~.zmdi{
  position: absolute;
  left: auto;
  right: 8px;
}

.dropdown-menu.pma-dropdown-menu > li > a{
  position: relative;
  white-space: normal;
  line-height: 15px;
  width: 100%;
  padding-left: 27px !important;
  padding-right: 25px !important;
}
.dropdown-menu.pma-dropdown-menu li{
  padding: 0 0;
  border-bottom: 0;
  margin: 0;
}

.dropdown-menu.pma-dropdown-menu .filter-timeline i{
    position: absolute; left: 5px; top: 14px
}

.dropdown-menu.pma-dropdown-menu li a{
  padding: 10px 5px;
  display: inline-block;
}

.dropdown-menu{
  z-index: 3;
  padding: 0;
  margin: 0;
  top: 100%;
  min-width: 200px;
  left: 50%;
}
.open > .dropdown-menu{
  padding: 32px 24px;
  left: auto;
}
.dropdown-menu .dropdown-header-label{
  margin-bottom: 40px;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 19px;
  line-height: 25px;
  color: #000000;
}
.dropdown-menu.notification-list .dropdown-notification{
  margin-bottom: 24px;
}
.dropdown-menu.notification-list .dropdown-notification .notification-text{
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: left;
}
.dropdown-menu.notification-list .dropdown-notification .notification-date{
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 15px;
  color: #75716B;
}
.dropdown-menu > li > a{
  padding: 0;
  margin: 0;
}
.dropdown-menu .divider{
  margin: 0;
}
.dataTables_wrapper input[type=submit]{

  position: relative;
  float: left;
  margin-right: 3px;
  background-color: #fff;
  border: 1px solid #d0d0d0;
  outline: none;
  cursor: pointer;
  *cursor: hand;
  padding: 4px 12px 4px 30px;
  white-space: nowrap;
  padding: 5px 8px;
}

.card{
  display: block
}
.card:hover{
  text-decoration: none
}
.dataTables_filter.search-panel{
  float: left !important;
  background: rgba(0, 0, 0, 0.04);
  padding: 0 10px;
  margin: 0 !important;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  width: 240px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
  align-items: center;
}
.dataTables_filter.search-panel input{
  border: none;
  padding: 0 5px 0 0;
  margin: 0 !important;
  padding-left: 8px;
  display: flex;
  flex: 1;
}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){
  width: 140px !important;
}
.row-no-gutters {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.row-no-gutters>[class*="col-"] {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.mog-container-fluid{
  margin: 0;
  width: 100%;
}
.modal{
  z-index: 1006 !important
}
/*.mfp-bg{
  z-index: 1100 !important
}
.mfp-content{
  z-index: 1101 !important
}*/






/*order details start*/
.order-item--indication{
  position: relative;
  padding-left: 44px;
}

.order-item--indication .rounded-icon{
  position: absolute;
  left: 22px;
  top: 2px;
  cursor: pointer;
}

.order-item--indication .indication-icon{
  position: absolute;
  left: 0;
  top: -5px;
  
position: absolute; font-size: 20px

}
.expand-row--below{
  cursor: pointer;
  position: absolute;
  left:22px;
}
.shopping-list--orders{
  display: none
}
.category-item--btn,.category-item--btn:hover{
  text-decoration: none;
}
.category-item--btn.selected{
 text-decoration: underline;
}
.order-company--summary{
    background: #F6F6F6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.calculator-side--panel a{
    padding: 10px;
    line-height: 16px;
    border: 1px solid #CCCCCC;
    margin-bottom: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.calculator-side--panel a:hover{
    text-decoration: none;
}
.calculator-side--panel a.active{
    background: #0BA89F;
    color: #fff;
}
.company--item{
    
    margin-bottom: 20px;
    display: none;
    min-height: 600px
}
.company--item.active{
    display: block;
}
.company-empty-products-panel{
    padding: 40px 20px;
    text-align: center;
    border: 2px dashed #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top: 20px;
}
.company-empty-products-panel a{

}

.order-company--cart .dataTables_filter,.order-company--cart .dataTables_length{
    display: none
}
.order-company--cart input[type=number]{
    /*height: 20px;*/
    width: 70px;
}
.order-company--cart table.dataTable thead th,.order-company--cart table.dataTable thead td,.order-company--cart  table.dataTable tbody td{
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

.customized-calculator td .form-group{
    padding: 0;
    margin: 0;
}

.customized-calculator td .form-group.has-error input{
    border: 1px solid red;
}
/*.companySection{
    border: 1px solid black; 
    padding: 20px
}
.companySection table td{
    line-height: 14px;
    padding: 5px;
}

.companySection table td input[type=number],.companySection input[type=number]{
    border: 1px solid black;
    width:50px;
}
.companySection .add-mini-cart--btn{
    display: block;

}


*/    

.totalMargin.great{
    color: #00ff00
}
.totalMargin.good{
    color: #00ffff
}
.totalMargin.subpar{
    color: #ff0000
}

.product-row.added{
    background: green;
    color: #fff;
}

.companySection .product-row.added input[type=number]{
    display: none
}

tr.product-row td,.customized-calculator tr td,.customized-calculator tr th{
    line-height: 14px !important;
    padding: 5px !important;
}
.customized-calculator tr td input[type=number]{
    width: 50px;
}

.customized-calculator tr th{
    text-align: center;
}

.pagination-panel a{
    display: inline-block;
    padding: 0 5px;
    border: 1px solid #ededed;
    margin: 0 3px;
}

.pagination-panel a.active{
    background: #ededed
}
.product-item {
  margin-bottom: 40px;
  padding: 10px;
}
/*.product-item .form-group{
  margin-top: 0;
  padding-top: 0 !important;
}*/
.product-item figure{
    padding-top: 95%;
    position: relative;
    overflow: hidden;
}
.product-item figure img{
    position: absolute;
    top: 0;
    max-height: 100%;
    max-width: 100%;
    width: 100%;
}
.product-item .btn{
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    display: block;

}
/*order details ends*/






/*social media starts*/
.reply-box{
  background: rgba(255, 210, 0, 0.12);
  padding: 5px 10px;
  border-left: 2px solid rgba(255, 210, 0, 1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  display: block;
  margin-bottom: 20px;
}

.reply-box.with-attachment{
  padding-right: 80px !important;
  position: relative;
}

.reply-box.deleted-msg,.deleted-msg{
  font-style: italic;
}
.reply-box .reply-user{
  color: rgba(255, 210, 0, 1);
  font-weight: bold
}
.reply-box .reply-has-img{
  position: absolute;
  top: 5px;
  right: 5px;
  width: 50px;
}
.reply-box .reply-has-img img{
  display: block;
  max-width: 50px;
  max-height: 50px;
  margin: 0 auto;

}
.reply-box:hover{
  text-decoration: none;
}

@keyframes highlight {
    0% {
        background: #faebd4; 
    }
    100% {
        background: none;
    }
}

.highlight {
    animation: highlight 2s;
}


.sm-download--caption{
  height: 24px; padding: 5px 0 0 0; font-size: 10px; position: absolute; bottom: 0; background: rgba(245,246,247); width: 100%
}
.doc-icon{
  width: 50px; margin: 10px auto  0 auto !important
}
.main-post--form textarea{
  width: 100%;
  border: 1px solid #e5e6e6;
  outline: none
}

.filter-timeline{
  position: relative;
}

.filter-timeline i{
  display: none
}
.filter-timeline.selected i{
  display: block;
}

.timeline--filter{
  background: rgba(0, 0, 0, 0.04);
  cursor: pointer;
  border: none; 
  padding: 0 10px;
  margin: 0;
  line-height: 30px
  
}
.timeline--filter .btn-group{
  top: -5px;
}

.timeline--filter i{
  margin-right: 10px;
}
.timeline--filter .dropdown-toggle{
  font-size: 20px
}
.timeline-footer hr{
  width: 100px;
  margin: 30px 0 10px 0;
}

.timeline-footer{
  color: rgba(0, 0, 0, 0.6);
}
.timeline-only--panel{
  position: relative; min-height: 50px
}
.timeline-loading--panel{
  height: 50px; position: relative; display: none
}
.search-loading {
  position: absolute; 
  right: 25px; 
  top: 15px;
  z-index: 2;
  width: 20px;
  height:20px;
  display: none;
}
.search-loading img{
  display: block;
  width: 100%;
}
.social-media--item{
  position: relative;
  text-align: center;
  border: 1px solid black;
  height: 100px;
  margin-bottom: 4%;
}

.social-media--item a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/*module landing*/
.card-header--link,.card-header--link:hover{
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  top: 5px;
  padding: 15px 24px;
  text-decoration: none
}
.card-header--link i{
  position: absolute;
  right: 15px;
  top: 14px;
}
.card-head{
  min-height: 50px
}
.card-head header.header-module--panel{
  position: relative;
  width: 100% ;
  display: block;
  border-bottom: 1px solid rgba(186, 186, 186, 0.5);
  height: 50px;
  min-height: 50px;
  padding-top: 15px;
  padding-right: 500px;
  padding-left: 40px;
  overflow: hidden;
  font-weight: 600;
  /*margin-right: 300px;*/
}
.card-head header.header-module--panel a{
  line-height: 48px;
  display: inline-block;
  padding: 0 10px;
  color: rgba(0, 0, 0, 0.6);
}
.card-head header.header-module--panel a:hover{
  text-decoration: none
}

.card-head header.header-module--panel>span{
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
  height: 25px;
  

}

.card-head header.header-module--panel .header-back--btn{
  position: absolute;
  left: 0px;
  top: 0px;
  font-weight: 400;
  border-right: 1px solid rgba(186, 186, 186, 0.5);
  height: 100%;
  line-height: 45px
}
.card-head header.header-module--panel .header-back--btn:hover{
  text-decoration: none
}
.card-head header.header-module--panel a.selected{
  color: rgba(255, 210, 0, 1);
  border-bottom: 1px solid rgba(255, 210, 0, 1);
}
.view-menu{
  padding: 10px;
  min-width: 300px
}
.view-menu.dropdown-menu ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.view-menu.dropdown-menu ul li{
  padding-right: 60px;
  position: relative;
  line-height: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.view-menu.dropdown-menu ul li .switch{
  position: absolute;
  right: 0;
  top: 10px;
  width: 40px;
  height: 15px;
}
.view-menu.dropdown-menu .slider.round:before{
  left: 0;
  top: -5px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.24);
  background: #F1F1F1
}

.view-menu.dropdown-menu .slider.round{

}
.view-menu.dropdown-menu input:checked + .slider:before {
  -webkit-transform: translateX(15px);
  -ms-transform: translateX(15px);
  transform: translateX(15px);
  background: rgba(255, 210, 0, 1)
}
.view-menu.dropdown-menu input:checked + .slider{
  background-color: rgba(255, 210, 0, 0.2)

}
.header-tools{
  width: 500px;
  position: absolute;
  right:0;
  font-size: 14px;
  top: 0;
  line-height: 50px;
  min-height: 50px;
  padding-right: 65px;
  font-weight: 400
}
.header-tools2{
  width: 400px;
  position: absolute;
  right:0;
  font-size: 14px;
  top: 0;
  line-height: 50px;
  min-height: 50px;
  /*padding-right: 20px;*/
}

.header-tools2 .nav{
  float: right;
  ;
}

.header-tools .owl-nav{
  position: absolute;
  right: -65px;
  top: 0;

}
.header-tools .owl-carousel  .owl-nav.disabled{
  display: block;
}
.header-tools .owl-carousel .owl-nav button.disabled span{
  color: rgba(0,0,0,0.3)
}
.header-tools .owl-nav button:focus{
  outline: none
}
.header-tools .owl-nav button span{
  font-size: 30px;
  padding: 0 10px;
  display: inline-block;
  border-left: 1px solid rgba(186, 186, 186, 0.5);

}

/*flex grid*/
.row.flex-grid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.row.flex-grid .col-1, 
.row.flex-grid .col-2, 
.row.flex-grid .col-3, 
.row.flex-grid .col-4, 
.row.flex-grid .col-5, 
.row.flex-grid .col-6, 
.row.flex-grid .col-7, 
.row.flex-grid .col-8, 
.row.flex-grid .col-9, 
.row.flex-grid .col-10, 
.row.flex-grid .col-11, 
.row.flex-grid .col-12, 
.row.flex-grid .col,
.row.flex-grid .col-auto, 
.row.flex-grid .col-sm-1, 
.row.flex-grid .col-sm-2, 
.row.flex-grid .col-sm-3, 
.row.flex-grid .col-sm-4, 
.row.flex-grid .col-sm-5, 
.row.flex-grid .col-sm-6, 
.row.flex-grid .col-sm-7, 
.row.flex-grid .col-sm-8, 
.row.flex-grid .col-sm-9, 
.row.flex-grid .col-sm-10, 
.row.flex-grid .col-sm-11, 
.row.flex-grid .col-sm-12, 
.row.flex-grid .col-sm,
.row.flex-grid .col-sm-auto, 
.row.flex-grid .col-md-1, 
.row.flex-grid .col-md-2, 
.row.flex-grid .col-md-3, 
.row.flex-grid .col-md-4, 
.row.flex-grid .col-md-5, 
.row.flex-grid .col-md-6, 
.row.flex-grid .col-md-7, 
.row.flex-grid .col-md-8, 
.row.flex-grid .col-md-9, 
.row.flex-grid .col-md-10, 
.row.flex-grid .col-md-11, 
.row.flex-grid .col-md-12, 
.row.flex-grid .col-md,
.row.flex-grid .col-md-auto, 
.row.flex-grid .col-lg-1, 
.row.flex-grid .col-lg-2, 
.row.flex-grid .col-lg-3, 
.row.flex-grid .col-lg-4, 
.row.flex-grid .col-lg-5, 
.row.flex-grid .col-lg-6, 
.row.flex-grid .col-lg-7, 
.row.flex-grid .col-lg-8, 
.row.flex-grid .col-lg-9, 
.row.flex-grid .col-lg-10, 
.row.flex-grid .col-lg-11, 
.row.flex-grid .col-lg-12, 
.row.flex-grid .col-lg,
.row.flex-grid .col-lg-auto, 
.row.flex-grid .col-xl-1, 
.row.flex-grid .col-xl-2, 
.row.flex-grid .col-xl-3, 
.row.flex-grid .col-xl-4, 
.row.flex-grid .col-xl-5, 
.row.flex-grid .col-xl-6, 
.row.flex-grid .col-xl-7, 
.row.flex-grid .col-xl-8, 
.row.flex-grid .col-xl-9, 
.row.flex-grid .col-xl-10, 
.row.flex-grid .col-xl-11, 
.row.flex-grid .col-xl-12, 
.row.flex-grid .col-xl,
.row.flex-grid .col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.row-cols-1 > * {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.row-cols-2 > * {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.row-cols-3 > * {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.row-cols-4 > * {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.row-cols-5 > * {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.row-cols-6 > * {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}







.row.flex-grid .col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.row.flex-grid.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.row.flex-grid .col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.row.flex-grid .col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.row.flex-grid .col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.row.flex-grid .col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.row.flex-grid .col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.row.flex-grid .col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.row.flex-grid .col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.row.flex-grid .col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.row.flex-grid .col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.row.flex-grid .col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}



#gantt_here{
  width:100%; height:90%;
  min-height: 100px;
}

@media (min-width: 576px) {
  .row.flex-grid .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row.flex-grid .row-cols-sm-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row.flex-grid .row-cols-sm-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row.flex-grid .row-cols-sm-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row.flex-grid .row-cols-sm-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row.flex-grid .row-cols-sm-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row.flex-grid .row-cols-sm-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .row.flex-grid .col-sm-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .row.flex-grid .col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .row.flex-grid .col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .row.flex-grid .col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row.flex-grid .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row.flex-grid .col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .row.flex-grid .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row.flex-grid .col-sm-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .row.flex-grid .col-sm-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .row.flex-grid .col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .row.flex-grid .col-sm-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .row.flex-grid .col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .row.flex-grid .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .row.flex-grid .offset-sm-0 {
    margin-left: 0;
  }
  .row.flex-grid .offset-sm-1 {
    margin-left: 8.333333%;
  }
  .row.flex-grid .offset-sm-2 {
    margin-left: 16.666667%;
  }
  .row.flex-grid .offset-sm-3 {
    margin-left: 25%;
  }
  .row.flex-grid .offset-sm-4 {
    margin-left: 33.333333%;
  }
  .row.flex-grid .offset-sm-5 {
    margin-left: 41.666667%;
  }
  .row.flex-grid .offset-sm-6 {
    margin-left: 50%;
  }
  .row.flex-grid .offset-sm-7 {
    margin-left: 58.333333%;
  }
  .row.flex-grid .offset-sm-8 {
    margin-left: 66.666667%;
  }
  .row.flex-grid .offset-sm-9 {
    margin-left: 75%;
  }
  .row.flex-grid .offset-sm-10 {
    margin-left: 83.333333%;
  }
  .row.flex-grid .offset-sm-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 768px) {
  .row.flex-grid .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row.flex-grid .row-cols-md-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row.flex-grid .row-cols-md-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row.flex-grid .row-cols-md-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row.flex-grid .row-cols-md-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row.flex-grid .row-cols-md-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row.flex-grid .row-cols-md-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .row.flex-grid .col-md-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .row.flex-grid .col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .row.flex-grid .col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .row.flex-grid .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row.flex-grid .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row.flex-grid .col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .row.flex-grid .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row.flex-grid .col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .row.flex-grid .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .row.flex-grid .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .row.flex-grid .col-md-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .row.flex-grid .col-md-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .row.flex-grid .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .row.flex-grid .offset-md-0 {
    margin-left: 0;
  }
  .row.flex-grid .offset-md-1 {
    margin-left: 8.333333%;
  }
  .row.flex-grid .offset-md-2 {
    margin-left: 16.666667%;
  }
  .row.flex-grid .offset-md-3 {
    margin-left: 25%;
  }
  .row.flex-grid .offset-md-4 {
    margin-left: 33.333333%;
  }
  .row.flex-grid .offset-md-5 {
    margin-left: 41.666667%;
  }
  .row.flex-grid .offset-md-6 {
    margin-left: 50%;
  }
  .row.flex-grid .offset-md-7 {
    margin-left: 58.333333%;
  }
  .row.flex-grid .offset-md-8 {
    margin-left: 66.666667%;
  }
  .row.flex-grid .offset-md-9 {
    margin-left: 75%;
  }
  .row.flex-grid .offset-md-10 {
    margin-left: 83.333333%;
  }
  .row.flex-grid .offset-md-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 992px) {
  .row.flex-grid .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row.flex-grid .row-cols-lg-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row.flex-grid .row-cols-lg-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row.flex-grid .row-cols-lg-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row.flex-grid .row-cols-lg-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row.flex-grid .row-cols-lg-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row.flex-grid .row-cols-lg-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .row.flex-grid .col-lg-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .row.flex-grid .col-lg-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .row.flex-grid .col-lg-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .row.flex-grid .col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row.flex-grid .col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row.flex-grid .col-lg-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .row.flex-grid .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row.flex-grid .col-lg-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .row.flex-grid .col-lg-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .row.flex-grid .col-lg-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .row.flex-grid .col-lg-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .row.flex-grid .col-lg-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .row.flex-grid .col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .row.flex-grid .offset-lg-0 {
    margin-left: 0;
  }
  .row.flex-grid .offset-lg-1 {
    margin-left: 8.333333%;
  }
  .row.flex-grid .offset-lg-2 {
    margin-left: 16.666667%;
  }
  .row.flex-grid .offset-lg-3 {
    margin-left: 25%;
  }
  .row.flex-grid .offset-lg-4 {
    margin-left: 33.333333%;
  }
  .row.flex-grid .offset-lg-5 {
    margin-left: 41.666667%;
  }
  .row.flex-grid .offset-lg-6 {
    margin-left: 50%;
  }
  .row.flex-grid .offset-lg-7 {
    margin-left: 58.333333%;
  }
  .row.flex-grid .offset-lg-8 {
    margin-left: 66.666667%;
  }
  .row.flex-grid .offset-lg-9 {
    margin-left: 75%;
  }
  .row.flex-grid .offset-lg-10 {
    margin-left: 83.333333%;
  }
  .row.flex-grid .offset-lg-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 1200px) {
  .row.flex-grid .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row.flex-grid .row-cols-xl-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row.flex-grid .row-cols-xl-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row.flex-grid .row-cols-xl-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row.flex-grid .row-cols-xl-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row.flex-grid .row-cols-xl-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row.flex-grid .row-cols-xl-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .row.flex-grid .col-xl-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .row.flex-grid .col-xl-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .row.flex-grid .col-xl-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .row.flex-grid .col-xl-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row.flex-grid .col-xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row.flex-grid .col-xl-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .row.flex-grid .col-xl-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row.flex-grid .col-xl-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .row.flex-grid .col-xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .row.flex-grid .col-xl-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .row.flex-grid .col-xl-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .row.flex-grid .col-xl-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .row.flex-grid .col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .row.flex-grid .offset-xl-0 {
    margin-left: 0;
  }
  .row.flex-grid .offset-xl-1 {
    margin-left: 8.333333%;
  }
  .row.flex-grid .offset-xl-2 {
    margin-left: 16.666667%;
  }
  .row.flex-grid .offset-xl-3 {
    margin-left: 25%;
  }
  .row.flex-grid .offset-xl-4 {
    margin-left: 33.333333%;
  }
  .row.flex-grid .offset-xl-5 {
    margin-left: 41.666667%;
  }
  .row.flex-grid .offset-xl-6 {
    margin-left: 50%;
  }
  .row.flex-grid .offset-xl-7 {
    margin-left: 58.333333%;
  }
  .row.flex-grid .offset-xl-8 {
    margin-left: 66.666667%;
  }
  .row.flex-grid .offset-xl-9 {
    margin-left: 75%;
  }
  .row.flex-grid .offset-xl-10 {
    margin-left: 83.333333%;
  }
  .row.flex-grid .offset-xl-11 {
    margin-left: 91.666667%;
  }
}




.paging_simple_numbers select{
  margin: 0 20px;
}
.paging_simple_numbers select:focus{
  outline: none
}

.hide{
        display: none
    }
    .remove-img--btn{
            position: absolute; top: 0; right: 0 ; background: #000; width: 30px; height: 30px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; line-height: 23px; color: #fff; font-size: 20px
        }
        .remove-img--btn:focus,.remove-img--btn:active,.remove-img--btn:hover{
            color: #fff;
            text-decoration: none
        }
    .img-table{
        display: table;
        width: 100%;
        
    }
    .img-table-cell{
        text-align: center;
        width: 100%;
        display: table-cell;
        vertical-align: middle;
        padding-bottom: 60px;
        position: relative;
    }
    .img-table-cell img{
        max-width: 100%;
        max-height: 200px;
        margin: 0 auto;
    }
    .button {
          display: inline-block;
          padding: 10px;
          background: #ccc;
          cursor: pointer;
          border-radius: 5px;
          border: 1px solid #ccc;
        }
        .button:hover {
          background: #ddd;
        }
    #fileElem,.fileElem {
      display: none !important;
    }
    .warranty-upload--box{
        border: 2px dashed #ccc;
        border-radius: 20px;
        font-family: sans-serif;
        padding: 20px;
        text-align: center;
        /*height: 200px;*/
    }

    .workplace-upload--btn{
      display: block;
      color: rgba(158,158,158,1);
      text-transform: uppercase;
      font-size: 14px;
      line-height: 16px;
      text-align: left;
      padding-left: 20px;
      cursor: pointer;

    }

    .workplace-upload--btn i{
      position: absolute;
      left: 5px;
      font-size: 20px;
      top: 50%;
      margin-top: -10px;
    }
/*social media ends*/


@media (max-width: 1050px) {
  .modal-dialog.m{
    min-width: auto;
    width: auto;
  }
  .modal-dialog.xl{
    min-width: auto;
    width: auto;
  }
}
@media only screen and (min-width: 768px) {

  .table-filter{
    padding: 0;
  }
  .sticky-col {
    position: sticky;
    position: -webkit-sticky;
    background-color: #fff;

  }
  .second-col{
    /*box-shadow: 2px 0px 3px rgba(0,0,0,0.25);*/
  }
  .shadowborder{
    top: 0; position: absolute; right: 0; height: 100%; z-index: 10; background: linear-gradient(to right,rgba(0,0,0,.3),rgba(0,0,0,0)); width: 5px
  }
  .table-filter .nav{
    display: block
  }

  .table-filter select{
    display: none;
  }


  /*social media starts*/

  .gantt-page .social-media--item{
    height: 100px;
  }
  .social-media--item{
    height: 160px;
    
  }
  .sm-download--caption{
    height: 40px; padding: 5px 0 0 0; font-size: 14px; position: absolute; bottom: 0; background: rgba(245,246,247); width: 100%
  }
  .doc-icon{
    width: 100px; margin: 20px auto  0 auto
  }
  /*social media ends*/
}

/*popup*/
.main-quotation-item--table,.main-quotation-item--table td{
  font-size: 12px;
  line-height: 14px !important
}

.main-quotation-item--table td .pricing-qty--panel{
  position: relative;
  
  background: rgba(0, 0, 0, 0.04);
  display: inline-block;
  padding: 2px 30px 2px 0;
  /*color: #E5E5E5*/

}

.main-quotation-item--table td .pricing-qty--panel span{
  position: absolute;
  right:2px;
  top: 3px;
  font-size: 10px;
  width: 30px;
  text-align: left;
  color: rgba(0,0,0,0.4);
}
.main-quotation-item--table td .pricingQty:focus,.main-quotation-item--table td .pricingQty:active{
  outline: none
}
.main-quotation-item--table td .pricingQty{
  width: 50px;
  border: none;
  background: none;
  text-align: right
}

.inline-show{
  display: inline;
}

/*PMAC STYLING START HERE-----------------------*/
/*user_info styling start here--------------------*/
/*match with menubar width*/
#base 
{
    padding-left: 72px;
    background: #FFF;
}

#menubar
{
    width: 72px;
}

/*To include notification button and expand/collapse button*/
.menubar-visible #menubar 
{
    width: 264px;
}

/*expand/collapse button animation START*/
/*.menubar-fixed-panel:before{
    content: url(<?php echo base_url()?>assets/PMAC/images/arrowExpand.png);
    position: absolute;
    right: 5px;
    top: 25px;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
}*/

.menubar-visible .menubar-fixed-panel:before{
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    right: 10px;
    top: 20px;
}
/*expand/collapse button animation END*/

/*centrelize the content within div*/
.menubar--header--flex-content-center
{
    display         : flex;
    align-content   : center;
    align-items     : center;
    justify-content : center;
}

.menubar--header--center-bell
{
    display         : flex;
    justify-content : center;
}

/*To allow notification bar visible*/
.menubar-fixed-panel
{
    overflow: visible !important;
}

/*adjust menubar foot panel at the bottom of menubar*/
#menubar .menubar-foot-panel
{
    padding: 0px;
    bottom: 1%;
}

.menubar--foot-panel--username-styling
{
    font-family: DM Sans;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
    color: #FFFFFF;
}

.menubar--foot-panel--position-styling
{
    font-family: DM Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: left;
    color: #C0BFBB;
}

.header-nav.header-nav-profile .dropdown
{
    width: 100%;
    background: #383633 !important;
}

/*expand profile dropdown menu upward*/
#menubar .header-nav-profile .dropdown-menu {
    position: absolute;
    top: auto;
    bottom: 58px;
    left: 0;
    padding: 8px;
}

/* Circular profile image */
.menubar--footer--circular-profile-image
{
    left: 0px;
    top: 0px;

    border: 2px solid #FFFFFF;
    box-sizing: border-box;

    flex: none;
    order: 0;
    flex-grow: 0;
}

/*hide the profile info when collapse, show when expanded START*/
.profile-info {
    opacity: 0;
}

.menubar-visible .profile-info {
    opacity: 1;
}
/*hide the profile info when collapse, show when expanded END*/

.menubar--bell--red-dot
{
    position: absolute;
    right: 6px;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border: .125rem solid;
    display: inline-block;
    color: #EE4056;
    background-color: #EE4056;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

.menubar--logo--red-dot
{
    position: absolute;
    left: 35px;
    top: 16px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: .125rem solid;
    display: inline-block;
    color: #EE4056;
    background-color: #EE4056;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    z-index: 1000;
    border: solid 2px #FFD200;
}

.menubar--main-menu-notification-badge
{
    -webkit-border-radius: 32px !important;
    -moz-border-radius: 32px !important;
    border-radius: 32px !important;
}

.gui-controls .badge {
   font-size: 70%; 
}

section
{
    padding: 0px !important;
}

.section-header
{
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    padding: 14px 0px 14px 24px;
}

.section-body--card--text-styling-1
{
  font-family: DM Sans;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  color: #75716B;
}
/*user_info styling end here-----------------------*/

/*PMACProject stylying start here-----------------*/
.menubar-visible #base 
{
    /*padding-left: 264px !important;*/
}

/*standardized breadcrumb styling START*/
.breadcrumb > li {
    font-family: DM Sans;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0em;
    text-align: left;
}

.breadcrumb > .active {
    font-family: DM Sans;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0em;
    text-align: left;
    opacity: 1;
}

/*customize placeholder styling*/
#searchKey::placeholder 
{
    font-family: DM Sans;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(0, 0, 0, 0.24);
}

/* Overwrite plugin.css align at left side */
.dataTables_wrapper .dataTables_filter
{
    text-align: left;
}

/* make it single row */
.section-body--search-toolbar--flex
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.section-body--search-toolbar--input-padding-left
{
    padding-left: 24px;
}

.section-body--card--padding-bottom
{
    padding-bottom: 16px;
}

/*card body grid labelling*/
.section-body--card--text-styling-1
{
  font-family: DM Sans;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  color: #75716B;
}

.section-body--card--img-wrap
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-bottom: 0;
    outline: 0;
    position: relative;
    overflow: hidden;
    display: block;
    height: 100px;
}

.section-body--pagination--fixed-bottom-right
{
    position: fixed;
    bottom: 0;
    right: 0;
}

.section-body--pagination--styling
{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    padding: 24px;
}


@media only screen and (min-width: 1200px) 
{
    .menubar-pin #base 
    {
        padding-left: 260px !important;
    }
}
/*PMACProject stylying end here-------------------*/

/*PMACProject Detail Styling Start Here------------*/
.section-header--property-label--styling
{
    font-family: DM Sans;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0em;
    text-align: left;
    color: #000000;
    padding-left: 16px;
}

.section-body--content--column-flex
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100%;
}

.section-body--content--row-flex
{
    display: flex;
    flex: 2;
    flex-direction: row;
}

.section-body--left-content--flex
{
    box-shadow: 1px 0px 0px #E6E5E1;
    flex: 0 0 367px;
    min-height: 100%;
}

.section-body--right-content--flex
{
    flex: 1 1;
    min-height: 100%;
}

.section-body--left-content--img-wrap
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-bottom: 0;
    outline: 0;
    position: relative;
    overflow: hidden;
    display: block;
    height: 140px;
}

.section-body--left-content--image-filelabel 
{
    position: absolute;
    top: 16px;
    right: 16px;
    display: block;
    cursor: pointer;
    text-align: center;
    margin: 0;
}

#retakePhotoInput{
    display:none;
}

.section-body--left-content--owner-section
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 16px 24px 24px 16px;
}

.section-body--left-content--owner-detail
{
    display: flex;
    flex-direction: column;
    padding-left: 8px;
}

.section-body--left-contet--owner-label
{
    font-family: DM Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: left;
    color: #75716B;
}

.section-body--left-contet--owner-name
{
    font-family: DM Sans;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
    color: #000000;
}

.section-body--left-content--owner-contact-section
{
    display: flex;
    justify-content: flex-end;
    flex: 1;
}

.section-body--left-content--tab-section
{
    display: flex;
    flex-direction: column;
    flex: 1;
}

.nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus
{
    border-bottom: 2px solid #EFAC00;
}

.section-body--left-content--card-custom-styling
{
    margin-bottom: 0px;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

.section-body--left-content--profile-icon-truncated-text
{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 32px;
}

.section-body--left-content--user-listing-flex
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    margin-bottom: 24px;
}

.section-body--right-content--add-document-section
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.section-body--right-content--add-document-button
{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    width: 180px;
    height: 39px;
    border: 1px solid #000000;
    box-sizing: border-box;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

#addDocumentBtn
{
    opacity: 0;
    position: absolute;
    z-index: -1;
}

.section-body--right-content--document-list-section
{
    display: flex;
    flex-direction: row;
    padding: 0px 16px;
    flex-wrap: nowrap;
    align-items: center;
    background: #FFFFFF;
}

.section-body--right-content--document-list-section:hover
{
    background: #F5F5F5;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.section-body--right-content--document-list-left-section
{
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.section-body--right-content--document-list-right-section
{
    display: flex;
    flex: 1;
    justify-content: flex-end;
    padding-right: 16px;
}

.section-body--right-content--document-truncated-text
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.section-body--content--flex-fill-row
{
    flex: 2;
    display: flex;
    flex-direction: row;
}

.section-body--content--flex-fill-column
{
    flex: 2;
    display: flex;
    flex-direction: column;
}

.section-body--right-content--empty-workplace-flex
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    height: 100vh;
}

.section-body--right-content--workplace-label
{
    font-family: DM Sans;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0em;
    text-align: left;
    color: #000000;
    margin-bottom: 24px;
}

.section-body--card--progress-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-bottom: 0;
    outline: 0;
    position: relative;
    overflow: hidden;
    display: block;
    height: 77px;
}
/*PMACProjectDetail Styling End Here*/

/*PMACNPS Styling Start Here--------*/
.section-body--table--emoji-score-styling
{
    height: 18px;
    width: 18px;
    vertical-align: sub;
    margin-left: 8px;
}

.section-body--search-toolbar--row-flex
{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.section-body--search-toolbar--text-styling
{
    font-family: DM Sans;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
    color: #75716B;
}

.section-body--card--custom-styling
{
    -webkit-box-shadow: none; 
    box-shadow: none; 
}

.section-body--card--table-styling
{
    border: none;
}

.section-body--card--table-styling th, td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.section-body--card--table-styling > thead > tr > th:first-child
{   
    padding-left: 24px;
}

.section-body--card--table-styling > tbody > tr > td:first-child
{   
    padding-left: 24px;
}

.section-body--card--table-styling > tbody > tr:hover
{
    cursor: pointer;
    background: #F5F5F5;
}

.offcanvas .active
{
    transform: translate(-400px, 0px) !important;
}

.offcanvas--header--padding
{
    padding: 24px 16px;
}

.offcanvas--header--flex
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.offcanvas--header--label
{
    font-family: DM Sans;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0em;
    text-align: left;
    color: #000000;
}

.offcanvas--body--padding
{
    padding: 0px 16px;
}

.offcanvas--body--individual-section
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 24px;
}

.offcanvas--body--contact-available-section
{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    background: #383633;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

.offcanvas--body--contact-available-text
{
    font-family: DM Sans;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: 0em;
    text-align: left;
    color: #FFFFFF;
    padding-left: 16px;
}

.offcanvas--body--nps-section
{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}

.offcanvas--body--nps-illustraction-section
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0;
    flex-basis: 124px;
    flex-shrink: 0;
    padding: 16px;
    background: #E5E5E1;
    -webkit-border-top-left-radius: 12px;
    -webkit-border-bottom-left-radius: 12px;
    -moz-border-radius-topleft: 12px;
    -moz-border-radius-bottomleft: 12px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.offcanvas--body--nps-illustraction-score-styling
{
    font-family: Poppins;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: 51px;
    letter-spacing: 0em;
    text-align: center;
    color: #383633;
}

.offcanvas--body--nps-banner-section
{
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    justify-content: center;
    padding: 16px;
    background: #F5F5F5;
    -webkit-border-top-right-radius: 12px;
    -webkit-border-bottom-right-radius: 12px;
    -moz-border-radius-topright: 12px;
    -moz-border-radius-bottomright: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.offcanvas--body--nps-question-styling
{
    font-family: DM Sans;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
    color: #383633;
}

.offcanvas--body--nps-answer-styling
{
    font-family: DM Sans;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
    color: #EFAC00;
    margin-top: 8px;
}

.offcanvas--body--submission-date-styling
{
    font-family: DM Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: left;
    color: #75716B;
}

#base > .backdrop 
{
    background-color: rgba(12, 12, 12, 0.60);
}
/*PMACNPS Styling End Here----------*/

/*PMACProjectDetail Styling Start Here*/
.offcanvas-body-flex-card .info-box--step-indicator--container{
  overflow-wrap: anywhere;
}

.info-box--step-indicator--container
{
    padding: 16px !important;
}

.step-indicator 
{
    display: flex;
    align-items: center;
}

.step 
{
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.step-indicator .step-icon 
{
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #c2c2c2;
    font-size: 10px;
    text-align: center;
    color: #ffffff;
    position: relative;
    line-height: 50px;
    font-size: 20px;
}

.step-indicator .step-icon
{
    position: relative;
    width: 8px;
    height: 8px;
    border: 1px solid #000000;
    background: #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.step.done .step-icon 
{
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #000000;
    text-align: center;
}

.step.active
{
    background: rgba(255,210,0, 0.5);
    /*border: 0.5px solid #EFAC00;*/
    box-shadow: 0 0 0 4px rgba(255,210,0, 0.5), 0 0 0 9px rgba(255,210,0, 0.2);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    transform: translate(0px, 0px) !important;
}

.step.active .step-icon
{
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #FFD200;
    border: 0.5px solid #EFAC00;
}

.step p 
{
  text-align: center;
  position: absolute;
  bottom: -40px;
  color: #c2c2c2;
  font-size: 14px;
  font-weight: bold;
}

.step.active p 
{
  color: crimson;
}

.step.step2 p,
.step.step3 p 
{
  left: 50%;
  transform: translateX(-50%);
}

.indicator-line 
{
    height: 1.5px;
    flex: 1;
    margin: 0px 5px;
    background: #000000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.dotted-line
{
    background: #FFFFFF;
    border-style: dotted;
    border-width: 2px 0px;
    border-color: #000000;
    border-image-slice: 54% 0%;
    border-image-repeat: round;
}

/*.dotted-line{
    background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
    background-position: top;
    background-size: 3px 1px;
    background-repeat: repeat-x;

    float: left;
    background-color: #FFFFFF;
}*/

.info-box--step-indicator--selected-step-text
{
    font-family: DM Sans;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
    color: #75716B;
}

.offcanvas--step-progression--base
{
    overflow: hidden; 
    display: block; 
    height: 100%;
}

.offcanvas--body--image-retake-container
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    justify-content: center;
    position: relative;

    border-radius: 5px;
    background-color: transparent;
    color: black;
    background-image: linear-gradient(to right, #000000 60%, transparent 50%), linear-gradient(to right, #000000 60%, transparent 60%), linear-gradient(to bottom, #000000 60%, transparent 60%), linear-gradient(to bottom, #000000 60%, transparent 60%);
    background-position: left top, left bottom, left top, right top;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
}

.offcanvas--body--image-retake-style
{
    padding: 32px 0px;
    cursor: pointer;
}

.offcanvas--body--image-retake-remove
{
    position: absolute;
    top: -10px;
    right: -10px;
    display: block;
    cursor: pointer;
    text-align: center;
    margin: 0;
}

.offcanvas--body--image-retake-instruction-style
{
    font-family: DM Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: left;
    color: #75716B;
    margin-bottom: 24px;
}

.offcanvas--body--image-retake-submit-button
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 24px;

    border: none;
    background: #FFD200;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    font-family: DM Sans;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: 0em;
    text-align: center;
    color: #000000;
}

.offcanvas--body--step-progression-margin
{
    margin-bottom: 16px;
}

.offcanvas--body--milestone-selector-style
{
    background: #F5F5F5;
    border-radius: 4px 4px 0px 0px
}

.offcanvas--body--select-wrap 
{
    border-bottom: 1px solid #75716B;
    padding: 0 16px;
    position:relative;
    background: #F5F5F5;
    border-radius: 4px 4px 0px 0px;
    margin-bottom: 24px;
}

.offcanvas--body--select-wrap label
{
    position: absolute;
    top:8px;

    font-family: DM Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: left;
    color: #75716B;
}

.offcanvas--body--action-flex
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.offcanvas--body--message-scrollable
{
    height: calc(100% - 340px); 
    overflow-y: auto; 
    overflow-x: hidden;
    background: #F5F5F5;
}

.offcanvas--body--message-section-style
{
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    padding: 24px 16px 0px 16px;
    background: #F5F5F5;
}

.offcanvas--body--message-section-title-style
{
    font-family: DM Sans;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 15px;
}


.offcanvas--body--chatbox-input-holder
{
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #383633;
   color: white;
   text-align: center;
   padding: 16px 15px;
   display: none;
   z-index: 5;
}

.offcanvas-pane.active .offcanvas--body--chatbox-input-holder
{
    display: block;
}

.offcanvas--body--post-update-flex
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.offcanvas--body--textarea
{
    overflow: hidden;
    margin:  0;
    padding: 0;
    border:  0;
    outline: 0;
    resize: none;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: #F5F5F5;
    box-shadow: 0px 0.193708px 0.747159px rgba(0, 0, 0, 0.0140573);
    flex-grow: 0;
    margin: 0px 19px;
    padding: 8px 16px;

    font-family: DM Sans;
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0em;
    text-align: left;
    color: #000000;

    max-height: 116px;
}

.offcanvas--body--message-media-wrapper{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: 328px;
}

.tooltip-mouse-container {
    text-decoration:none;
    position:relative;
}
.tooltip-mouse-container span {
    display:none;
}
.tooltip-mouse-container:hover span {
    display:block;
    position:fixed;
    overflow:hidden;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px;
    background: #111111;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    width: 175px;
    display: inline;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow-wrap: break-word;

    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;

    z-index: 10;
}

.offcanvas--body--message-media-wrapper::-webkit-scrollbar{    
    /*display: none;*/
}

.offcanvas--body--message-media-list-container
{
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    margin: 16px 19px 0px 19px;
}

.offcanvas--body--message-media-item
{
    display: flex;
    /*flex: 1 0 21%;*/
    /*margin: 0 auto;*/
    position: relative;
    height: 60px;
    width: 60px;
    margin-right: 16px;
}

.offcanvas--body--image-remove-style
{
    position: absolute;
    top: -10px;
    right: -10px;
    display: block;
    cursor: pointer;
    text-align: center;
    margin: 0;
}

.offcanvas--edit-cancel-button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 24px;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    margin: 24px 0px 0px 16px;
    width: 120px;
    cursor: pointer;
}

.edit-cancel-text{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 17px;
    line-height: 23px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
}

.offcanvas--body--flex-0
{
    display: flex;
    flex: 0;
    margin-top: 8px;
}

.offcanvas--body--flex-1
{
    display: flex;
    flex-direction: column;
    flex: 1;
}

.offcanvas--body--message-borderline
{
    border: 1px solid #C0BFBB;
    width: 40px;
    margin: 0px 0px 16px 16px;
}

.offcanvas--body--action-bar-cointainer
{
    display: flex;
    flex-direction: row;
    padding: 0px 16px 16px 16px;
}

.offcanvas--body--action-date-time
{
    display: flex;
    flex: 1;

    font-family: DM Sans;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
    color: #75716B;
}

.offcanvas-body-action-edit-padding
{
    padding-right: 24px;
}

.offcanvas--body--yellow
{
   background-color: #FFD200;
}

.offcanvas--body--edit-input-style
{
    border-bottom: 1px solid #75716B;
    padding: 0 16px;
    position: relative;
    border-radius: 4px 4px 0px 0px;
    margin-bottom: 20px;
    background-color: #383633;
    background: rgba(0, 0, 0, 0.04);
}

.offcanvas--body--edit-input-style label
{
    position: absolute;
    top:8px;

    font-family: DM Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: left;
    color: #75716B;
}

.offcanvas--body--edit-milestone-button-style
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 24px;
    border: none;
    background: #FFFFFF;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-family: DM Sans;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: 0em;
    text-align: center;
    color: #000000;
    margin-bottom: 16px;
    width: 100%;
}

.offcanvas--body--workplace-media-text-style
{
    font-family: DM Sans;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
    color: #000000;
    margin-bottom: 16px;
}

.offcanvas--body--workplace-media-instruction-style 
{
    font-family: DM Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: left;
    color: #000000;
    margin-bottom: 24px;
}

.offcanvas--body--media-list-container
{
    display: flex;
    flex-wrap: wrap;
    background: #000000;
    margin-bottom: 16px;
    border-left: 1px solid black;
    border-top: 1px solid black;
}

.offcanvas--body--media-item
{
    display: flex;
    flex: 1 0 21%;
    height: 60px;
    position: relative;
    margin-right: 1px;
    margin-bottom: 1px;
}

.offcanvas--body--play-button-style
{
    position: absolute;
    border-radius: 50%;
    /*color: #fff;*/
    /*background-color: #fff;*/
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -20px;
    z-index: 5;
    /*opacity: 0.7;*/
}

.offcanvas--body--pagination-container
{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    position: relative;
    margin-bottom: 24px;
}

.offcanvas--body--pagination-apps
{
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    z-index:1;
    transform: translate(-50%,-50%);
}

.offcanvas--body--pagination-button
{
    width: 6px;
    height: 6px;
    float: left;
    margin-right: 20px;
    background-color: #fff;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.3s ease width;
}

.offcanvas--body--pagination-button:last-child
{
    margin-right: 0;
}

.offcanvas--body--pagination-button.selected
{
    width: 20px;
    cursor: auto;
}


#ytd-url {
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  margin: 20px;
  color: #fff;
  font-family: Arial;
  font-size: 14px;
  text-decoration: none;
  background-color: #2c2c2c;
  border-radius: 4px;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
  z-index: 125;
}

.offcanvas--body--workplace-media-remove
{
    position: absolute;
    top: -10px;
    right: -10px;
    display: block;
    cursor: pointer;
    text-align: center;
    margin: 0;
}

.offcanvas-body-delete-media
{
    cursor: pointer;
}

.offcanvas--body--media-item.with-media:hover
{
    cursor: pointer;
    opacity: 0.5;
}

.offcanvas--body--video-media
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.offcanvas-body-flex-card {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: relative;
}

.offcanvas--body--message-media-item .document-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px;
    background: #000000;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    flex: 1;
    position: relative;
}

.play-icon-wrapper{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    pointer-events: none;
    z-index: 50;
    background: #FFD200;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
    opacity: 0.7;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.play-icon{
    content: url(../images/play-icon.svg);
    width: 16px;
    height: 16px;
}

.tooltip-container{
  position: relative;
  display: inline-block;

  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 15px;
  color: #75716B;
}

.tooltip-container .tooltip-text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px;
  width: 126px;
  background: #111111;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  position: absolute;
  z-index: 1;
  left: 50%;
  margin-left: -60px;
  visibility: hidden;

  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: #FFFFFF;
}

.tooltip-container .tooltip-text.tooltip-arrow-bottom{
  bottom: 150%;
}

.tooltip-container .tooltip-text.tooltip-arrow-top{
  top: 200%;
}

.tooltip-container .tooltip-text.tooltip-arrow-media{
  bottom: 0;
  left: 16px;
  width: unset;
}

.tooltip-container .tooltip-text.tooltip-arrow-bottom::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: #111111 transparent transparent transparent;
}

.tooltip-container .tooltip-text.tooltip-arrow-top::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #111111 transparent;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
}

.dropdown .btn-default{
  background: unset;
  border: unset;
}

.aligned-row 
{
  display: flex;
  flex-flow: row wrap;
}

.aligned-row&::before 
{
  display: block;
}

.card--content--flex{
  display: flex;
}

.card-content--image-container{
  height: 170px; 
  width: 128px; 
  margin-right: 16px; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.card-content--image-container > img{
  max-width: 128px; 
  max-height: 100%;
}

.card-content--description{
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  margin-right: 24px;
  flex: 1;
}

.promotion-status-container{
  display: flex; 
  align-items: center; 
  align-content: center; 
  justify-content: center;
}

.promotion-status-circle{
  height:8px; 
  width: 8px; 
  -webkit-border-radius: 6px; 
  -moz-border-radius: 6px; 
  border-radius: 6px;
}

.horizontal-flex{
  display: flex;
  flex-direction: row;
}

.vertical-flex{
  display: flex;
  flex-direction: column;
}

.mini-bold-text{
  font-family: DM Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 15px;
  line-height: 19px;
}

/* Mini Mini (Regular) */
.mini-mini-regular{
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 15px;
}

.primary-black{
  color: #000000;
}

.grey-4{
  color: #75716B;
}

.black-high-emphasis{
  color: rgba(0, 0, 0, 0.87);
}

.background-secondary-red{
  background: #EE4056;
}

.background-secondary-green{
  background: #64C085;
}

.offcanvas--body--select-wrap-input.date-wrapper
{
  margin-bottom: 8px;
}

.flex.space-between
{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex.space-between.margin-top
{
  margin-top: 12px;
}

.text-mini-bold-black
{
  font-family: 'DM Sans',sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 15px;
  line-height: 19px;
  color: #000000;
}

.checkbox-round-container{
  display: flex; 
  align-items: center; 
  margin-bottom: 16px;
}

.checkbox-round {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
  border: 1.5px solid #000000;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}

.checkbox-round:focus{
  outline: 0 !important;
  box-shadow:none !important;
}

.checkbox-round:checked {
  background: #EFAC00;
  border: none;
  content: url('/assets/PMAC/images/checkbox-tick.svg');
}

.offcanvas--body--select-wrap-input
{
    padding-top: 20px;
    height: 48px;
}

.card-body .select2-container-multi .select2-choices .select2-search-choice{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 24px 6px 8px;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  box-sizing: border-box;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;

  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 19px;
  color: #000000;
  opacity: 0.87;
}

.card-body .select2-search-choice-close{
  left: unset !important;
  top: 2px;
  float: right;
  content: url('/assets/PMAC/images/select-close-button.svg');
}

.card-body .select2-search-choice-close:hover {
  background: unset;
  text-decoration: none;
}

.milestone-media-container .wrapper,
.flex{
  display: flex;
  flex: 1;
  position: relative;
}

.milestone-media-container{
  display: flex;
  flex-direction: column;
}

.milestone-media-container .wrapper .child-wrapper{
  height: 204px;
}

.milestone-media-container .wrapper .child-wrapper:first-child{
  margin-right: 2px;
}

.milestone-media-container .wrapper .child-wrapper:nth-child(2){
  margin-left: 2px;
}

.milestone-media-container .wrapper .child-wrapper:only-child{
  margin: 0;
}

.milestone-media-container .left-wrapper{
    display: flex; 
    flex: 1;
}

.milestone-media-container .right-wrapper{
    display: flex; 
    flex-direction: column; 
    flex: 1;
}

.milestone-media-container .left-wrapper img,
.milestone-media-container .right-wrapper img{
  width: 100%;
  background-size: cover; 
  object-fit: cover; 
  background-color: #F5F5F5;
}

.milestone-media-container .right-wrapper .last-media{
  position: relative;
}

.milestone-media-container .right-wrapper .last-media a{
  height: calc(100% - 4px);
}

.milestone-media-container .wrapper .right-wrapper .media-wrapper{
  height: 50%;
}

.milestone-media-container .wrapper .right-wrapper .media-wrapper:first-child{
  margin-bottom: 4px;
}

.milestone-media-container .wrapper .right-wrapper .media-wrapper:only-child{
  margin: 0px;
  height: 100%;
}

.more-media-overlay {
    position: absolute;
    width: 100%;
    height: calc(100% - 4px);
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    padding-top: 25px;
    cursor: pointer;
}

.more-media-overlay-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}

.milestone-document-container{
    display: flex;
    flex-direction: column;
    padding: 0px 16px;
    width: 100%;
}

.milestone-document-container a{
  margin-right: auto;
  text-decoration: none;
  width: 100%;
}

.milestone-document-container .wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;

    border: 1px solid #383633;
    box-sizing: border-box;
    border-radius: 500px;

    margin-bottom: 8px;
    margin-right: auto;
}

.milestone-document-container .wrapper:last-child{
    margin-bottom: 16px;
}

.milestone-document-container .more-document-wrapper{
    text-decoration: underline;
    margin-bottom: 24px;
}

.yellow-document-icon{
    margin-right: 8px;
    content: url('/assets/PMAC/images/yellow-document.svg');
}

.multi-line-ellipsis {
    width: 100%;
    display: inline;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow-wrap: break-word;
}
/*PMACProjectDetail Styling END Here*/