#leads {
  .order__options {
    font-size: 12px;
    color: #808080;
  }

  .leftMenu {
    padding-right: 5%;
    min-height: 114vh;

    
    .search {
      input[type="search"] {
        width: 100%;
        box-sizing: unset;
        border-width: 0px;
        border-radius: 5px;
        padding: 10px 0px;
        // padding-left: 0px;
        text-indent: 35px;
        background: url("../../imgs/icon_search.svg") no-repeat;
        background-size: 15px;
        background-position-y: center;
        background-position-x: 12px;
        background-color: #fff;
        font-weight: normal;
        font-size: $font-size-normal;
      }

      input[type="search"]:focus {
        outline: unset;
      }
    }

    .showfilter {
      text-align: right;
      font-size: $font-size-normal;
      text-decoration: underline;
      cursor: pointer;
      margin-top: 20px;
    }

    .filter {
      margin-top: 20px;

      &__campaign {
        margin-bottom: 20px;

        .filter-option {
          padding-right: 0;
        }

        .dropdown {
          width: 100%;
          
          button {
            width: 100%;
            background-color: #fff;
            border: none;
            border-radius: 4px;
            padding: 10px 12px;
            padding-right: 25px;
            font-size: $font-size-normal;
            font-weight: 400;
            color: #333;
            text-align: left;
          }

          span.caret {
            position: absolute;
            right: 10px;
            top: 18px;
          }

          .dropdown-menu {
            width: 100%;
            padding: 0;

            a[role="option"] {
              padding: 12px 20px;

              .glyphicon.glyphicon-ok.check-mark {
                display: none !important;
              }
            }

            a.selected {
              background: #004f9c;
              color: #fff;
            }

            a[role="option"]:hover {
              background: #e7f3fb;
              color: #000;
            }
          }
        }

      }

      .managestatus {
        text-align: center;
        padding: 12px 0.8em;
        background: #03a9f4;
        color: #fff;
        border-radius: 0.2em;
        font-size: $font-size-small;
      }

      .dropdown {
        .btn {
          font-size: $font-size-normal;
        }

        .btn-default {
          width: 100%;
          padding: 10px 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .dropdown-menu {
          width: 100%;
          font-size: 16px;
          padding: 0;

          li a {
            padding: 12px 20px;
          }
        }
      }

      &__title {
        font-weight: bold;
        font-size: $font-size-mid-large;
        margin-bottom: 15px;
      }

      input[type="filter-date"] {
        width: 100%;
        box-sizing: unset;
        border-width: 0px;
        border-radius: 5px;
        padding: 10px 0px;
        text-indent: 12px;
        background: url("../../imgs/icon_calendar.svg") no-repeat;
        background-size: 15px;
        background-position: center right 12px;
        background-color: #fff;
        cursor: pointer;

        font-weight: normal;
        font-size: $font-size-normal;
      }

      input[type="filter-date"]:focus {
        outline: unset;
      }

      &__status {
        &--choice {
          padding: 0;
          margin-bottom: 10px;

          &-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 120px;
          }
        }
      }
      &__branch {
        &--choice {
          padding: 0;
          margin-bottom: 10px;

          &-text {
            max-width: calc(100% - 40px);
          }
        }
      }
    }

    .ads {
      position: absolute;
      bottom: 20px;
      width: 90%;
    }
  }

  .content {
    overflow-y: inherit;
    position: relative;

    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
    }

    &__title {
      font-size: $font-size-mid-large;
      padding: 0 20px;

      &--export {
        padding: 12px 1.5em;
        border: 1px solid #04c3c4;
        border-radius: 3px;
        color: #04c3c4;
        cursor: pointer;
        float: right;
        margin-right: 20px;
        background-color: transparent;
        font-size: $font-size-small;
        font-weight: bold;
      }
    }
  }

  .statusColor {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .lead_data {
    cursor: pointer;
  }

  .delete {
    &__icon {
      height: 16px;
    }
	}
	
	#checkbox_tool {
		background-color: #f2f2f2;
    position: fixed;
    bottom: -60px;
    width: 100%;
		border: 1px solid #ddd;
		padding: 8px;
		display: flex;
    align-items: center;
    z-index: 1;
    
    .lead_check_all {
      label {
        margin-bottom: 0;
      }
      .styled-checkbox:indeterminate+label:after {
        top: 9px;
        left: 5px;
      }
    }

		.lead_delete_all {
			display: flex;
			align-items: center;
			border: 1px solid #ddd;
			border-radius: 5px;
			padding: 7px 20px;
			margin-left: 10px;
			cursor: pointer;

			&--icon {
				height: 14px;
				margin-right: 10px;
			}
    }
    
    .checkbox_tool--close {
      position: absolute;
      right: 5px;
      top: 15px;
    }
	}

  .lead_action_container {
    display: flex;
    align-items: center;
    margin: 20px 30px;
    font-size: $font-size-normal;
    position: absolute;
    top: 60px;
    z-index: 1;
    // z-index: 0;

		.lead_check_all {
			padding: 9px 0px;
		}

		.lead_delete_all {
			display: flex;
			align-items: center;
			border: 1px solid #ddd;
			border-radius: 5px;
			padding: 7px 20px;
			margin-left: 40px;
			cursor: pointer;

			&--icon {
				height: 14px;
				margin-right: 10px;
			}
		}
	}
	

  .content {
    .styled-checkbox {
      & + label {
        margin-bottom: 0;
        font-size: 15px;
      }

      & + label:before {
        border: 1px solid #888;
        width: 17px;
        height: 17px;
      }

      &:checked + label:after {
        left: 3px;
        top: unset;
      }
    }
  }

  .dataTables_length {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;

    label {
      font-weight: lighter;
    }

    select {
      border-radius: 0.2em;
      text-indent: 0.2em;
      min-width: 60px;
    }
  }


  #reg_table_wrapper {
    .top {
      height: 50px;
    }

    .paging_simple_numbers {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 20px 0;
    }

    .paginate_button {
      line-height: 1em;
      font-weight: normal;
      border: 1px solid;
      border-color: transparent;
      font-size: $font-size-small;
    }

    .paginate_button:hover {
      background: transparent;
      color: #000 !important;
      border-color: transparent;
      font-weight: bold;
    }

    .paginate_button.current {
      background: transparent;
      border-color: #000;
      font-weight: bold;
    }

    .paginate_button.disabled:hover {
      color: #666 !important;
    }

    .dataTable {
      border-bottom: 1px solid #f3f3f3;
      border-collapse: collapse;
      margin: 0 20px;
      width: calc(100% - 40px) !important;
      font-weight: normal !important;
      // font-size: $font-size-normal;
      font-size: $font-size-very-small;

      tr.lead_data {
        border: 1px solid #f3f3f3;
        border-width: 1px 0px;
      }

      td {
        padding: 12px 10px;
        vertical-align: baseline;
      }

      td.short {
        width: 10px !important;
        padding: 0 0 0 10px !important;

        label {
          top: 3px;
        }
      }

      td.name {
        min-width: 150px;
        font-size: $font-size-normal;
        .name {
          &__subtitle {
            font-size: $font-size-very-small;
            font-weight: lighter;
          }
        }
        div {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 150px;
        }
      }

      td.mobile {
        min-width: 70px;
      }

      td.date {
        min-width: 70px;
      }

      td.time {
        min-width: 30px;
      }

      td.gray {
        color: #cacaca;
      }

      td.text_left {
        text-align: left;
      }

      td.text_center {
        text-align: center;
      }

      td.text_right {
        text-align: right;
      }
    }
  }

  #modal_manage_status {
    font-size: $font-size-normal;
    .modal {
      &-title {
        font-size: $font-size-mid-large;
      }
    }
    .modal-body {
      background: #f2f2f2;
    }

    #status_sortable {
      padding-left: 0;
      margin: 0 auto;
      max-width: 100%;

      .manage_status-list {
        display: flex;
        border: 0px solid #e5e5e5;
        border-radius: 4px;
        line-height: 2.5em;
        padding: 0 1em;
        margin-bottom: 0.8em;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
        background: #fff;

        .content-left {
          width: 34%;
          border-right: 1px solid #e5e5e5;
          padding: 1rem 0px;
        }

        .content-right {
          width: 66%;
          display: flex;
          justify-content: space-around;
          // padding: 1rem 0px;
          padding: 1rem 0rem 1rem 1rem;
        }

        cursor: pointer;

        span.no {
          color: #999;
          margin-right: 0.5em;
        }

        .title {
          font-weight: 400;
          border-radius: 4px;
          border: #e5e5e5 1px solid;
          width: 80%;
          text-indent: 1rem;
        }

        .subtitle {
          font-size: 10px;
        }

        .dot {
          background: #dd0000;
          display: inline-flex;
          width: 20px;
          height: 20px;
          border-radius: 50px;
          line-height: 0.7em;
          margin-right: 0.5em;
          vertical-align: middle;
        }

        input.jscolor {
          border-radius: 4px;
          border: none;
          width: 10rem;
          text-align: center;
          background: #fff !important;
          border: 1px solid #e5e5e5 !important;
          color: #000 !important;
        }

        .status-delete {
          img {
            height: 20px;
          }
        }
      }

      .ui-state-disabled {
        input.jscolor,
        input.title {
          background: #e5e5e5 !important;
        }
      }
    }

    .btn {
      font-size: 14px;
      padding: 12px 0.8em;
      font-weight: bold;
      min-width: 80px;
    }

    .status-add {
      float: left;
      color: #03a9f4;
			background-color: transparent;
			border: 1px solid #03a9f4;
    }
 
    .status-close {
      font-weight: lighter;
      background-color: #ddd;
    }

    .status-submit {
      color: #fff;
      background-color: #03a9f4;
    }
  }

  @media only screen and (max-width: 992px) {
    .leftMenu {
      padding: 0 20px 20px;
      min-height: unset;

      #filter {
        display: none;
        padding-left: 0;

        form {
          display: inline-block;
          margin-bottom: 10px;
        }

        .filter__status--choice {
          padding: 12px 0;
          margin-bottom: 0px;
        }
      }
    }

    .ads {
      padding: 20px;
    }

    .dataTables_length {
      padding-left: 0;

      select {
        background-color: transparent;
      }
    }

    .lead_action_container {
      justify-content: space-between;
      // margin-top: 60px;

      .lead_delete_all {
        font-size: 12px;
        margin: 0;
      }
    }

    .content {
      &__header {
        margin-top: 0px;
        padding-top: 20px;
      }

      .styled-checkbox {
        & + label {
          font-size: 12px;
        }
      }
    }

    #reg_table_wrapper {
      .top {
        height: 50px;
      }
      .dataTable {
        margin: 0 20px;

        td{
          &.short {
            padding: 0px !important;
          }
          &.name {
            min-width: 70px;
            max-width: 220px;
            div {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }

        td.delete {
          text-align: right;
        }
      }
    }

    #modal_manage_status {
      #status_sortable {
        .dot {
          background: #dd0000;
          position: absolute;
          top: 0;
          left: -1em;
          border-radius: 0.2em 0 0 0.2em !important;
          width: 1em !important;
          height: 100% !important;
        }
        input.jscolor {
          width: 100% !important;
        }
        .content-left {
					position: relative;
					padding: 1rem 10px !important;
        }
				.content-right { 
					justify-content: space-between !important;
				}
      }
    }
  }
}