@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,300i,400,500,500i,700,700i,800,900&display=swap');
  
  * {outline:none !important;}
  
  html {max-height:100%; height:100%}
  body {
      --c-main :#000;
      color: #000;
      font-size: 15px;
      font-family: "Montserrat";
      margin: 0;
      font-weight: 400;
      height:100%;
      max-height:100%
  }
  
  
  ::-webkit-input-placeholder { /* Edge */
      color: #000;
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: #000;
  }
  
  ::placeholder {
      color: #000;
  }
  
  .btn {box-shadow:none !important;}
  .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {background: none !important; border: none !important;}
  #page .li-content .dropdown-menu { 
      top: 47px !important;
  }
  #page .li-content .dropdown-menu::before {
      right: 24px;
  }
  #page .dropdown-menu {transform: none !important;right: -10px;left: auto !important;min-width: 210px;padding: 0;margin: 0;top: 55px !important;font-size: 12px;border: none;padding: 8px 0;box-shadow: 0 0 20px rgb(0 0 0 / 10%);border-radius: 10px;font-family: 'Montserrat';font-weight: 400;}
  #page .up + .dropdown-menu {top: auto !important;bottom: 44px;}
  #page .dropdown-menu::before {content:"";width: 0;height: 0;border-width: 0 10px 10px 10px;border-color: transparent transparent #fff transparent;border-style: solid;position: absolute;top: -7px;right: 20px;}
  #page .up + .dropdown-menu::before {width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #fff transparent transparent transparent;top: auto;bottom: -7px;}
  #page .dropdown-menu .dropdown-item {padding: 0;height: auto;min-height: auto !important;color: #000;vertical-align: top;display: block;float: none;padding: 9px 15px;line-height: 1;}
  #page .dropdown-menu .dropdown-item img {
      width: 24px;
      height: 24px;
      max-width: 24px;
      margin: 0 6px 0 0;
      border: solid 1px #eee;
      padding: 2px;
      margin: -2px 6px -2px 0;
  border-radius: 50%;}
  #page .dropdown-menu .dropdown-item.active {background:none;font-weight: 600;}
  #page .dropdown-menu .dropdown-item.active img {
      border: solid 1px #000;
  }
  #page .dropdown-menu .dropdown-item:hover {background:#f4f4f4;}
  #page .dropdown-menu .dropdown-divider {
      margin: 0;
  }
  
  #page {
      /* max-width: 1300px; */
      margin: 0 auto;
      padding: 0 30px;
      font-size: 14px;
      height: 100%;
  }
  
  
  .grid {display: grid;grid-template-columns: repeat(4 , 1fr);grid-gap: 30px;/* padding: 0 30px; */height: 100%;max-height: 100%;transition: all 0.3s;}
  .grid .grid-item {
      padding: 30px 0 30px 0;
      border-radius: 20px;
      background: #f4f4f4;
      max-height: calc(100vh - 60px);
      margin: 30px 0;
      height: calc(100vh - 60px);
      display: flex;
      flex-direction: column;
  }
  .grid .grid-item {
      transition: all 0.3s;
  }
  .grid .grid-item:nth-child(3) {grid-column: span 2;}
  
  .grid.collapsed {
      grid-template-columns: 24px 1fr 1fr 1fr;
  }
  .grid.collapsed .grid-item:nth-child(1) {
      background: none;
  }
  .grid.collapsed .grid-item:nth-child(1) h2.section-name {font-size:0;padding: 0;}
  .grid.collapsed .grid-item:nth-child(1) button {display:none}
  .grid.collapsed .grid-item:nth-child(1) .grid-item-content {display:none}
  
  input::-moz-selection { /* Code for Firefox */
    color: #000;
    background: none;
}

input::selection {
    color: #000;
    background: none;
}

.edit {margin:0;flex: 1;padding: 0 20px 0 0;}
.edit form {}
.edit form input {border:none; width:100% !important;background:none; background:none !important; height:21px !important; padding:0 !important; font-weight:500;}
.edit form textarea {border:none; width:100% !important;background:none !important; padding:0 !important;height: auto !important;min-height: unset !important;resize: none;vertical-align: top;}
.edit .autogrow-textarea-mirror {}
.edit form button {display: none;}



.grid .grid-item .icon-list {
  font-size: 19px;
  height: 40px;
  line-height: 40px;
  margin: 0 20px 0 auto;
}
.grid .grid-item h2.section-name .icon-list + button {
  margin: 0;
}
.grid .grid-item h2.section-name {display: flex;font-weight: 700;position: relative;font-size: 19px;/* align-items: center; */margin: 0 0 20px 0;line-height: 1.1;padding: 0 30px;}
.grid .grid-item h2.section-name .edit {margin:0;flex: 1;padding: 0 20px 0 0;align-self: center;}
.grid .grid-item h2.section-name form {width: 100%;margin:0; display: block; /* align-items: center; */}
.grid .grid-item h2.section-name .edit form input {border:none; width:100%;background:none;}
.grid .grid-item h2.section-name form textarea {border:none; width:100% !important;background:none;padding: 0 20px 0 0 !important;/* height: auto !important; */min-height: unset!important;font-weight: 700;
    resize: none;
    vertical-align:top;margin: 10px 0 0 0;}
    .grid .grid-item h2.section-name button {margin: 0 0 0 auto;border-radius: 50%;padding: 0;width: 40px;height: 40px;line-height: 40px;background: #000;border: none;font-size: 17px;}
    .grid .grid-item h2.section-name .btn-secondary {margin: 0 0 0 auto;border-radius: 50%;padding: 0;width: 40px;height: 40px;line-height: 40px;background: none;border: none;font-size: 17px;position: relative;}
    .grid .grid-item h2.section-name .btn-secondary img {border-radius: 50%; width: 40px; height: 40px; margin: 0;/* box-shadow: 0 0 0 4px #f4f4f4; */vertical-align: top;}
.grid .grid-item h2.section-name .btn-secondary img:last-child {margin: 0;}
.grid .grid-item h2.section-name .btn-secondary .count {position: absolute;top: 0;left: 0;background: rgb(0 0 0 / 40%);width: 40px;height: 40px;line-height: 39px;display: block;border-radius: 50%;font-size: 13px;font-weight: 500;}
.grid .grid-item h2.section-name .dropdown-menu {right: 19px !important;}
    .grid .grid-item .grid-item-content {overflow-y:auto;margin: 0 0 0px 0;padding: 0 12px 0 0;}
    .grid .grid-item .grid-item-content h3 {font-weight: 700; font-size: 14px; margin: 30px 0px 12px 0; }
    .grid .grid-item .grid-item-content .subtask-content {padding: 0 0 0 30px;}
    
    
    .grid .grid-item .grid-item-content .task-details {background: #fff; padding: 20px; border-radius: 10px; margin: 0 0 20px 0; }
    .grid .grid-item .grid-item-content .task-details >*:last-child {margin:0}
    
    
    #sortable-list {min-height: calc(100% - 60px);}
    #sortable-list, #sortable {padding: 0;list-style: none;/* overflow-x: auto; */margin: 0 0 0 0px;position: relative;}
    #sortable-list li, #sortable li {margin: 0 0 5px 0px;display: flex;align-items: center;font-size: 13px;position: relative;min-height: 44.4px;}
    #sortable-list li .li-content, #sortable li .li-content {background: #fff; display: flex; flex: 1; padding: 10px 15px; align-items: center; border-radius: 10px; }
    #sortable-list li a, #sortablet li a {color: #000; text-decoration: none; font-weight: 400; flex: 1;line-height: 1.3;padding: 0 10px 0 0;}
    #sortable-list li > i.handle, #sortable li > i.handle {margin: 0;color: #000;padding: 0;cursor: move;width: 30px;text-align: center;visibility: hidden;}
    #sortable-list li:hover > i.handle,#sortable li:hover > i.handle {visibility:visible}
    #sortable-list li > i.handle::before, #sortable li > i.handle::before {content: "\e93a";font-family: 'icomoon' !important;font-weight: 300;}
    #sortable-list li a.btn, #sortable li a.btn {margin: 0 0 0 auto; background: none; color: #000; border: none; padding: 0; flex: none;position:relative}
    #sortable-list li a.btn img, #sortable li a.btn img {max-width: 25px;border-radius: 50%;margin: 0;box-shadow: 0 0 0 2px #fff;vertical-align: top;}
#sortable-list li a.btn .count, #sortable li a.btn .count {position: absolute;top: 0;left: 0;background: rgb(0 0 0 / 40%);width: 25px;height: 25px;line-height: 25px;display: block;border-radius: 50%;font-size: 10px;font-weight: 500;color: #fff;}
#sortable li a.btn img {box-shadow: 0 0 0 2px #f4f4f4;}
#sortable-list li a.btn img:last-child, #sortable li a.btn img:last-child {margin: 0;}
    
    #sortable-list li input[type="checkbox"], #sortable li input[type="checkbox"] {display: none;}
    #sortable-list li input[type="checkbox"] + label, #sortable li input[type="checkbox"] + label {margin: 0 8px 0 0;position: relative;}
    #sortable-list li input[type="checkbox"] + label::before, #sortable li input[type="checkbox"] + label::before {content:"";display: block;width: 16px;height: 16px;border: solid 1px #ddd;border-radius: 3px;background: #fff;}
    #sortable-list li input[type="checkbox"]:checked + label::before, #sortable li input[type="checkbox"]:checked + label::before {background: #000;border: solid 1px #000;}
    #sortable-list li input[type="checkbox"]:checked + label::after, #sortable li input[type="checkbox"]:checked + label::after {content: "\e900";font-family: 'icomoon';color: #fff;position: absolute;left: 0;top: 0;font-size: 9px;width: 16px;height: 16px;line-height: 16px;text-align: center;}
    
    #sortable-list li.subtask, #sortable li.subtask {align-items: flex-start; }
    #sortable-list li.subtask > i.handle, #sortable li.subtask > i.handle {margin: -1px 0 0 0px; }
    #sortable-list li.subtask .li-content, #sortable li.subtask .li-content {padding: 0;background: none;margin: 0 0 6px 0;padding: 0 0 6px 0;align-items: flex-start;border-bottom: solid 1px #ddd;border-radius: 0;}
    #sortable-list li input[type="checkbox"] + label, #sortable li input[type="checkbox"] + label {margin: 2px 8px 0 0; }
    #sortable-list li.subtask input[type="checkbox"] + label::before, #sortable li.subtask input[type="checkbox"] + label::before {border: none;}
    
    
    ul {padding: 0;margin: 0;list-style: none;}
    ul li.next-step {color: #000;/* top: -40px; */position: relative;font-weight: 500;text-decoration: none;font-size: 13px;padding: 0 0 0 30px;margin: 0 0 20px 0;position: relative;}
    ul li.next-step::after {content:"\e910";font-family: icomoon;width: 16px;display: inline-block;text-align: center;margin: 0 8px 0 0;vertical-align: top;position: absolute;left: 30px;top: 6px;pointer-events: none;}
    ul li.next-step textarea {background: none;border: none;font-weight: 400;padding: 6px 0 0 25px;height: 30px;/* max-height: 50px; */width: 100%;}
    
    /* #sortable-list li.next-step input:focus + span::after {content: ""; display: block; width: 16px; height: 16px; border: solid 1px #ddd; border-radius: 3px; background: #fff; border: none; } */
    
    
    .company-list {list-style: none;padding: 0;margin: 0;padding: 0 0 0 30px;}
    .company-list li {}
    .company-list li a {color: #000; padding: 4px 0; display: block; text-decoration: none; }
    .company-list li a:hover {color:var(--c-main); font-weight:600;}
    
    
    .tab-selector {display: flex;font-weight: 700;font-size: 19px;align-items: center;margin: 0 0 20px 0;line-height: 1.1;padding: 0 30px;position: relative;}
    .tab-selector > span {display: block;flex: 0 1 100%;cursor: pointer;}
    .tab-selector > span::after {content:"\e934";position: absolute;top: 0;right: 30px;font-family: icomoon;font-weight: 300;}
    .tab-selector > ul {display: none;}
    .tab-selector span.active + ul {display: block;position: absolute;top: 30px;left: 30px;right: 30px;padding: 0;list-style: none;padding: 20px;background: #fff;z-index: 30;font-size: 14px;margin: 0;box-shadow: 0 0 10px rgb(0 0 0 / 10%);}
    .tab-selector > ul li {margin: 0 0 12px 0;}
    .tab-selector > ul li:last-child {margin:0}
    .tab-selector > ul li a {color: #000;font-weight: 400;text-decoration: none;}
    .tab-selector > ul li a:hover {font-weight:600;}
    .tab-selector > ul li a.active {font-weight:700;}
    
    .grid .grid-item .grid-item-content.tab {display:none; height: 100%;}
    .grid .grid-item .grid-item-content.tab.active {display:block}