/*
*** Global styles
*/
a {
  text-decoration: none !important; }

/*
/**
*** Tasks page styles
*/
main.tasks {
  background-color: #FBFBFD; }
  main.tasks .tasks-top {
    margin-top: 50px; }
    @media (max-width: 991.99px) {
      main.tasks .tasks-top .left::after {
        content: "";
        position: absolute;
        right: 25%;
        bottom: 0;
        width: 2px;
        height: 65%;
        background-color: #ddd; } }
  @media (max-width: 991.99px) and (max-width: 767.99px) {
    main.tasks .tasks-top .left::after {
      right: 0%; } }
    main.tasks .tasks-top .left .wrapper {
      position: relative; }
      @media (max-width: 991.99px) {
        main.tasks .tasks-top .left .wrapper {
          display: block !important; } }
    main.tasks .tasks-top .left h2 {
      color: #181D5F;
      display: inline-block;
      margin: 0 1em; }
      @media (max-width: 991.99px) {
        main.tasks .tasks-top .left h2 {
          display: block !important;
          margin: 0 0 .8em 1.8em;
          font-size: 20px; } }
    main.tasks .tasks-top .left button.newTask {
      background-color: #ff72aa;
      color: #fff;
      border-radius: 20px;
      font-size: 16px;
      vertical-align: unset; }
      @media (max-width: 991.99px) {
        main.tasks .tasks-top .left button.newTask {
          display: block !important;
          margin: 0 0 .5em 2em;
          padding: 1em 1em 0.5em 1em !important;
          box-shadow: 0 0.5rem 0.2rem rgba(255, 114, 170, 0.4);
          font-size: 14px; } }
      @media (max-width: 991.99px) {
        main.tasks .tasks-top .left button.newTask i {
          display: block;
          font-size: 1.5em;
          padding: 7px 0; } }
  @media (max-width: 991.99px) and (max-width: 991.98px) {
    main.tasks .tasks-top .left button.newTask i {
      font-size: 1.1em; } }
    main.tasks .tasks-top .right .wrapper {
      background-color: #fff;
      width: 20em;
      margin-left: 7em;
      padding-left: 1em;
      padding-bottom: 8px;
      border-radius: 10px;
      padding-top: 2em; }
      main.tasks .tasks-top .right .wrapper.wrapper-web {
        position: relative;
        overflow: hidden; }
        main.tasks .tasks-top .right .wrapper.wrapper-web img.bg-circ {
          position: absolute;
          left: -50px;
          top: -100px;
          width: 10em;
          height: 10em; }
        @media (max-width: 991.99px) {
          main.tasks .tasks-top .right .wrapper.wrapper-web {
            display: none !important; } }
      main.tasks .tasks-top .right .wrapper.wrapper-mob {
        background-color: #FAD270;
        box-shadow: 0 0.5rem 0.2rem rgba(250, 210, 112, 0.5) !important; }
        @media (min-width: 992px) {
          main.tasks .tasks-top .right .wrapper.wrapper-mob {
            display: none !important; } }
        @media (max-width: 991.99px) {
          main.tasks .tasks-top .right .wrapper.wrapper-mob {
            margin-left: 0;
            height: auto !important;
            width: 100% !important;
            padding: 0;
            margin-top: 2.5em; } }
        @media (min-width: 768px) and (max-width: 991.98px) {
          main.tasks .tasks-top .right .wrapper.wrapper-mob {
            width: 80% !important;
            margin-left: 20%; } }
        @media (max-width: 991.99px) {
          main.tasks .tasks-top .right .wrapper.wrapper-mob {
            margin-left: 8%;
            width: 85% !important; } }
        main.tasks .tasks-top .right .wrapper.wrapper-mob button img {
          float: right;
          margin-left: 1.2em; }
    main.tasks .tasks-top .right button {
      padding: 0;
      background-color: transparent;
      color: #181D5F;
      font-size: 18px;
      margin-right: 25px; }
      @media (max-width: 991.99px) {
        main.tasks .tasks-top .right button {
          width: 100%;
          height: 100%;
          text-align: left;
          color: #181d5fba;
          font-weight: 600;
          padding-top: 10px;
          margin: 1em; } }
      @media (min-width: 768px) and (max-width: 991.98px) {
        main.tasks .tasks-top .right button {
          padding-right: 2em !important; } }
      main.tasks .tasks-top .right button:active, main.tasks .tasks-top .right button:visited, main.tasks .tasks-top .right button:focus {
        box-shadow: none;
        outline: none; }
      main.tasks .tasks-top .right button img {
        width: 1.2em;
        height: 1.2em;
        margin-right: 3px; }

main.tasks .table-wrapper {
  padding: 0;
  margin-left: 30px;
  max-height: 550px;
  /**
        **** bottom scroll bar style
        ***/ }
  @media (max-width: 991.99px) {
    main.tasks .table-wrapper {
      margin: 0;
      overflow-x: hidden; } }
  @media (max-width: 991.99px) {
    main.tasks .table-wrapper table.table-web {
      display: none !important; } }
  main.tasks .table-wrapper table.table-web thead {
    border-bottom: 1px solid #d0d0d0; }
    main.tasks .table-wrapper table.table-web thead tr {
      color: #181D5F; }
  main.tasks .table-wrapper table.table-web tbody tr {
    color: #80868F; }
    main.tasks .table-wrapper table.table-web tbody tr:hover {
      background-color: #fff;
      cursor: pointer; }
      main.tasks .table-wrapper table.table-web tbody tr:hover td:last-child .normal {
        display: none !important; }
      main.tasks .table-wrapper table.table-web tbody tr:hover td:last-child .act {
        display: block !important; }
    main.tasks .table-wrapper table.table-web tbody tr td:last-child img {
      height: 1.5em;
      width: 1.5em; }
      main.tasks .table-wrapper table.table-web tbody tr td:last-child img:not(:last-child) {
        margin-right: 1em; }
  main.tasks .table-wrapper .simplebar-track {
    top: 10%; }
    main.tasks .table-wrapper .simplebar-track .simplebar-scrollbar::before {
      height: 90%;
      opacity: 1;
      background: #FF72AA; }

main.tasks .table-lower {
  margin-top: 2em;
  padding-bottom: 30%; }
  @media (max-width: 991.99px) {
    main.tasks .table-lower {
      padding-bottom: 500px; } }
  main.tasks .table-lower .wrapper {
    background-color: #FACB58;
    border-radius: 20px;
    padding: 0px 18px;
    box-shadow: 0 0.5rem 1rem rgba(250, 203, 88, 0.5) !important; }
    main.tasks .table-lower .wrapper .btn {
      background-color: transparent;
      color: #181D5F; }
      main.tasks .table-lower .wrapper .btn:active, main.tasks .table-lower .wrapper .btn:visited, main.tasks .table-lower .wrapper .btn:focus {
        box-shadow: none;
        outline: none; }
      main.tasks .table-lower .wrapper .btn img {
        width: 1.1em;
        height: 1.1em;
        margin-right: 5px;
        margin-bottom: 4px; }

@media (max-width: 991.98px) {
  main.tasks {
    padding: 0 !important; } }

@media (min-width: 992px) {
  main.tasks .table-wrapper .table-mob {
    display: none !important; } }

main.tasks .table-wrapper .table-mob .table-mob-row {
  border-bottom: 1px solid #ddd;
  padding-top: 2em; }
  main.tasks .table-wrapper .table-mob .table-mob-row .left p:first-child {
    color: #181D5F; }
  main.tasks .table-wrapper .table-mob .table-mob-row .left p:last-child {
    color: rgba(24, 29, 95, 0.6);
    font-weight: 600;
    padding-top: 1em; }
  main.tasks .table-wrapper .table-mob .table-mob-row .left p span {
    display: inline-block; }
    main.tasks .table-wrapper .table-mob .table-mob-row .left p span.order {
      font-size: 20px;
      margin-left: .5em; }
      @media (max-width: 991.98px) {
        main.tasks .table-wrapper .table-mob .table-mob-row .left p span.order {
          font-size: 16px; } }
    main.tasks .table-wrapper .table-mob .table-mob-row .left p span.site {
      font-size: 20px;
      margin-left: .5em; }
      @media (max-width: 991.98px) {
        main.tasks .table-wrapper .table-mob .table-mob-row .left p span.site {
          font-size: 18px; } }
    main.tasks .table-wrapper .table-mob .table-mob-row .left p span.size {
      margin-left: 3em; }
      @media (max-width: 991.98px) {
        main.tasks .table-wrapper .table-mob .table-mob-row .left p span.size {
          margin-left: 2em; } }
    main.tasks .table-wrapper .table-mob .table-mob-row .left p span.color {
      margin-left: 2.2em; }
  main.tasks .table-wrapper .table-mob .table-mob-row .right {
    padding-right: 2em; }
    main.tasks .table-wrapper .table-mob .table-mob-row .right p {
      text-align: right; }
      main.tasks .table-wrapper .table-mob .table-mob-row .right p:first-child {
        padding-top: 3px; }
        main.tasks .table-wrapper .table-mob .table-mob-row .right p:first-child img {
          width: 1.2em;
          height: 1.2em; }
          main.tasks .table-wrapper .table-mob .table-mob-row .right p:first-child img:not(:first-child) {
            margin-left: 1.5em; }
          main.tasks .table-wrapper .table-mob .table-mob-row .right p:first-child img:hover {
            cursor: pointer; }
      main.tasks .table-wrapper .table-mob .table-mob-row .right p:last-child {
        color: rgba(24, 29, 95, 0.6);
        font-size: 20px;
        margin-right: 1.5em; }
        @media (max-width: 991.98px) {
          main.tasks .table-wrapper .table-mob .table-mob-row .right p:last-child {
            font-size: 18px; } }

.newTaskModel {
  /**
    **Modal Footer
    ***/ }
  @media (min-width: 576px) {
    .newTaskModel .modal-dialog {
      min-width: 700px; } }
  .newTaskModel .modal-dialog .modal-content {
    padding: .5em 2em;
    border-top: 10px solid #FF72AA;
    border-radius: 10px; }
    .newTaskModel .modal-dialog .modal-content .modal-header {
      color: #181D5F; }
      @media (min-width: 992px) {
        .newTaskModel .modal-dialog .modal-content .modal-header .tabs {
          display: none; } }
      .newTaskModel .modal-dialog .modal-content .modal-header .tabs > span {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        border: 1px solid #FAD270;
        color: #FAD270;
        cursor: pointer; }
        .newTaskModel .modal-dialog .modal-content .modal-header .tabs > span span {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center; }
        .newTaskModel .modal-dialog .modal-content .modal-header .tabs > span.one {
          margin-right: 1em; }
        .newTaskModel .modal-dialog .modal-content .modal-header .tabs > span.active {
          color: #000;
          background-color: #FAD270; }
  .newTaskModel .modal-body div.row.first {
    position: relative; }
    @media (min-width: 992px) {
      .newTaskModel .modal-body div.row.first::after {
        content: "";
        position: absolute;
        left: 3%;
        bottom: 0;
        width: 95%;
        height: 1px;
        background-color: #979797; } }
  .newTaskModel .modal-body div.row.second {
    /* Customize the label (the container) */ }
    @media (max-width: 991.98px) {
      .newTaskModel .modal-body div.row.second {
        display: none; } }
    .newTaskModel .modal-body div.row.second h5 {
      color: #181D5F;
      margin: 0 0 2em 0; }
    .newTaskModel .modal-body div.row.second .left {
      padding-bottom: 2em;
      position: relative; }
      @media (max-width: 991.98px) {
        .newTaskModel .modal-body div.row.second .left::after {
          content: "";
          position: absolute;
          left: 5%;
          bottom: 10%;
          width: 90%;
          height: 2px;
          background-color: #979797; } }
      @media (min-width: 992px) {
        .newTaskModel .modal-body div.row.second .left::after {
          content: "";
          position: absolute;
          right: 5%;
          top: 0;
          height: 90%;
          width: 1px;
          background-color: #979797; } }
    .newTaskModel .modal-body div.row.second .opt-container {
      display: block;
      position: relative;
      padding-left: 35px;
      margin-bottom: 12px;
      cursor: pointer;
      font-size: 22px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      font-size: 18px; }
      .newTaskModel .modal-body div.row.second .opt-container:hover input ~ .checkmark {
        background-color: #fff; }
      .newTaskModel .modal-body div.row.second .opt-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0; }
        .newTaskModel .modal-body div.row.second .opt-container input:checked ~ .checkmark {
          background-color: #FF72AA;
          border-color: #FF72AA; }
          .newTaskModel .modal-body div.row.second .opt-container input:checked ~ .checkmark:after {
            display: block; }
        .newTaskModel .modal-body div.row.second .opt-container input:checked ~ .custom-drop-inp {
          display: block !important;
          margin: 1rem 0; }
      .newTaskModel .modal-body div.row.second .opt-container .checkmark {
        position: absolute;
        top: 5px;
        left: 0;
        height: 23px;
        width: 23px;
        background-color: #fff;
        border-radius: 50%;
        border: 3px solid #ddd; }
        .newTaskModel .modal-body div.row.second .opt-container .checkmark:after {
          content: "";
          position: absolute;
          display: none; }
        .newTaskModel .modal-body div.row.second .opt-container .checkmark:after {
          left: 5px;
          top: 1px;
          width: 7px;
          height: 13px;
          border: solid white;
          border-width: 0 3px 3px 0;
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg); }
  .newTaskModel .modal-body div.row .form-group {
    position: relative; }
    .newTaskModel .modal-body div.row .form-group.has-data label {
      font-size: 12px;
      line-height: 1.75;
      font-weight: 500;
      letter-spacing: -.01em;
      top: 8px !important;
      color: #FF72AA; }
    .newTaskModel .modal-body div.row .form-group.has-data .custom-border {
      left: 0;
      width: 100%; }
    .newTaskModel .modal-body div.row .form-group.has-data input, .newTaskModel .modal-body div.row .form-group.has-data .custom-drop-inp-btn, .newTaskModel .modal-body div.row .form-group.has-data textarea {
      background-color: #F5F5F5; }
    .newTaskModel .modal-body div.row .form-group input, .newTaskModel .modal-body div.row .form-group .custom-drop-inp-btn {
      outline: none;
      border: none;
      box-shadow: none;
      font-size: 16px;
      line-height: 1.23543;
      font-weight: 400;
      letter-spacing: -.022em;
      height: 3.8em;
      margin-bottom: 14px;
      padding-top: 18px;
      padding-left: 16px;
      padding-right: 16px;
      background-color: #F0F0F0;
      border-radius: 0.25rem !important;
      cursor: pointer; }
      .newTaskModel .modal-body div.row .form-group input + label, .newTaskModel .modal-body div.row .form-group .custom-drop-inp-btn + label {
        position: absolute;
        top: 1.2em;
        left: 17px;
        color: #A6A6A6;
        pointer-events: none;
        padding: 0;
        z-index: 1;
        transition-timing-function: ease-in;
        transition-duration: .125s; }
      .newTaskModel .modal-body div.row .form-group input ~ .custom-border, .newTaskModel .modal-body div.row .form-group .custom-drop-inp-btn ~ .custom-border {
        position: absolute;
        bottom: 0;
        left: 50%;
        background-color: #FF72AA;
        height: 2px;
        width: 0;
        transition: .4s; }
      .newTaskModel .modal-body div.row .form-group input:focus, .newTaskModel .modal-body div.row .form-group .custom-drop-inp-btn:focus {
        background-color: #F5F5F5; }
        .newTaskModel .modal-body div.row .form-group input:focus ~ .custom-border, .newTaskModel .modal-body div.row .form-group .custom-drop-inp-btn:focus ~ .custom-border {
          left: 0;
          width: 100%; }
        .newTaskModel .modal-body div.row .form-group input:focus + label, .newTaskModel .modal-body div.row .form-group .custom-drop-inp-btn:focus + label {
          font-size: 12px;
          line-height: 1.75;
          font-weight: 400;
          letter-spacing: -.01em;
          top: 8px !important;
          color: #FF72AA; }
    .newTaskModel .modal-body div.row .form-group.custom-drop-inp .custom-drop-inp-btn {
      background-color: #F0F0F0;
      position: relative;
      color: #A6A6A6;
      padding-bottom: 1em; }
      .newTaskModel .modal-body div.row .form-group.custom-drop-inp .custom-drop-inp-btn:after {
        position: absolute;
        right: 1em;
        top: 2em;
        border-top-color: #A6A6A6; }
    .newTaskModel .modal-body div.row .form-group.custom-drop-inp .dropdown-menu a:hover, .newTaskModel .modal-body div.row .form-group.custom-drop-inp .dropdown-menu a:active {
      color: #ffffff;
      background-color: #FF72AA; }
  .newTaskModel .modal-footer {
    border-top: none; }
    .newTaskModel .modal-footer .btn-close {
      background-color: transparent; }
    .newTaskModel .modal-footer .btn-next {
      background-color: transparent;
      color: #FF72AA;
      margin-left: 1em;
      padding: 0; }
      @media (min-width: 992px) {
        .newTaskModel .modal-footer .btn-next {
          display: none; } }
    .newTaskModel .modal-footer .num-actions {
      display: inline-block;
      background-color: #ddd;
      padding: 5px;
      border-radius: 20px; }
      @media (max-width: 991.98px) {
        .newTaskModel .modal-footer .num-actions {
          display: none; } }
      .newTaskModel .modal-footer .num-actions i {
        font-size: 16px;
        color: #9B9B9B;
        margin: 0 12px;
        cursor: pointer; }
    .newTaskModel .modal-footer .createTask-btn {
      background-color: #ff72aa;
      color: #fff;
      border-radius: 20px;
      font-size: 16px;
      vertical-align: unset; }
      @media (max-width: 991.98px) {
        .newTaskModel .modal-footer .createTask-btn {
          display: none; } }