/*iphone-6-7-8plus*/
@wide-screen-down: ~'(min-width: 414px) and (max-width:736px)';
/*Iphone-6-7-8*/
@iphone-six-seven-eight: ~'(min-width: 375px) and (max-width:667px)';
/*Ipad*/
@ipad: ~'(min-width: 768px) and (max-width:1024px)';
/*Screen 768px*/
@screen-768: ~'(max-width:768px)';
/*Screen 790px*/
@screen-790: ~'(max-width:789px)';
/*Screen 605px*/
@screen-605: ~'(max-width:605px)';
/*Mobile S*/
@mobiles: ~'(min-width: 320px) and (max-width:413px)';

.dashboard-woo {
  background: #f2f3f8;

    .wrapper-wpbooking-hotel-view-admin {
    background-color: #F2F3F8;
    box-shadow: none;
      .toolbar {
        .wrapper-toolbar{
          background-color: unset;
        }

      }
    .view-db-appointments-dashboard {

      .title {
        margin-top: -15px;
        margin-bottom: 45px;
        color: #b11111;
        i {
          font-size: 40px;
          padding-right: 10px;
          color: seagreen;
        }
      }
      .total-order {
        -webkit-box-shadow: 0 1px 15px 1px rgba(69, 65, 78, .08);
        box-shadow: 0 1px 15px 1px rgba(69, 65, 78, .08);
        background-color: #FFFFFF;

        h3 {
          background-color: #FAFAFA;
          padding: 20px 22px 20px 22px;
          color: #53505f;
          font-weight: 500;
          border-bottom: 1px solid #e5e9ec;
        }

        canvas {
          padding: 0px 20px;
        }
      }
      .new-customer,.list-category {
          overflow-x:auto;
        }

      .new-customer {
        h3 {
          -webkit-box-shadow: 0 1px 15px 1px rgba(69, 65, 78, .08);
          box-shadow: 0 1px 15px 1px rgba(69, 65, 78, .08);
          padding: 21px 22px 18px 22px;
          font-weight: 600;
          margin-top: 17px;
          margin-bottom: 0px;
          border-bottom: 1px solid #EBEDF2;
          font-size: 17px;
          line-height: 23px;
          text-transform: capitalize;
          color: #575962;
          background-color: #FAFAFA;

        }
        table {
          color: #53505f;
          margin-bottom: 0px;
          background: #fff;
          display: table;
          thead {
            tr {
              th {
                border-bottom: none;
              }
            }
          }
          tbody {
            tr {
              border-bottom: 0.07rem dashed #ebedf2;

              td.user {
                i.icon-account {
                  background-color: #F2F3F8;
                  display: inline-block;
                  border-radius: 60px;
                  padding: 0.6em 0.6em;
                }
              }

              td {
                height: 75px;
                vertical-align: inherit;
                padding-left: 10px;
                border-top: none;

                .icon-account:before {
                  opacity: 0.3;
                  font-size: 20px;
                }
              }

              td.name {
                h4 {
                  margin-block-start: 10px;
                  margin-block-end: 0px;
                  margin-top: 0px;
                }

                .email {
                  font-style: normal;
                  font-weight: normal;
                  font-size: 13px;
                  line-height: 17px;
                  color: #575962;
                }
              }

              td.created-date {
                font-style: normal;
                font-weight: normal;
                font-size: 13px;
                line-height: 17px;
                color: #5867DD;
              }

            }
          }

        }
        .dataTables_wrapper{
          .dataTables_length{
            display: none;
          }
          .dataTables_filter{
            display: none;
          }
          .dataTables_scroll{
            .dataTables_scrollBody{
              border-bottom: unset;
            }
          }
          .dataTables_info{
            display: none;
          }
          .dataTables_paginate{
            a.previous{
              transform: rotate(180deg);
            }
            a.paginate_button{
              font-size: 16px;
              padding: 8px 7px;
              background: transparent;
              border: none;
              &:hover {
                background: transparent;
                border: none;
                color: #575962!important;
              }
              &.previous {
                transform: rotate(180deg);
              }
              &.disabled {
                display: none;
              }
              &.current {
                border: none;
                background-color: transparent;
                background: none;
                font-weight: 600;
                line-height: 17px;
              }
            }
          }
        }
      }
      .monthly-profits {
        -webkit-box-shadow: 0 1px 15px 1px rgba(69, 65, 78, .08);
        box-shadow: 0 1px 15px 1px rgba(69, 65, 78, .08);
        background-color: #FFFFFF;
        margin-top: 20px;

        h3 {
          background-color: #FAFAFA;
          padding: 20px 22px 20px 22px;
          color: #53505f;
          font-weight: 500;
          border-bottom: 1px solid #e5e9ec;
        }

        canvas {
          padding: 0px 20px;
        }
      }
      .list-hotel {

        margin-top: 5px;

        h3 {
          margin: 15px 0 0 0;
          padding: 21px 22px 18px 22px;
          color: #575962;
          font-weight: 500;
          border: 1px solid #FAFAFA;
          border-bottom: 1px solid #EBEDF2;
          background-color: #FAFAFA;
        }

        img {
          width: 45px;
          height: 45px;
          border-radius: 50%;
        }

        table {
          color: #53505f;
          margin-bottom: 0px;
          background: #FFFFFF;

          thead {
            tr {
              th {
                background-color: #FFFFFF;
                padding-left: 30px;
                color: #A6A7C1;
                border-bottom: none;
              }
            }
          }

          tbody {
            tr {
              border-bottom: .07rem dashed #ebedf2;

              td {
                border-top: 0px;
                padding-left: 30px;
                height: 63px;
                line-height: 3;
              }

              td.name {
                font-weight: bold;
                font-size: 13px;
                line-height: 17px;
                color: #5867DD;
              }
            }
          }

        }
        .dataTables_wrapper{
          .dataTables_length{
            display: none;
          }
          .dataTables_filter{
            display: none;
          }
          .dataTables_scroll{
            .dataTables_scrollBody{
              border-bottom: unset;
            }
          }
          .dataTables_info{
            display: none;
          }
          .dataTables_paginate{
            a.previous{
              transform: rotate(180deg);
            }
            a.paginate_button{
              font-size: 16px;
              padding: 8px 7px;
              background: transparent;
              border: none;
              &:hover {
                background: transparent;
                border: none;
                color: #575962!important;
              }
              &.previous {
                transform: rotate(180deg);
              }
              &.disabled {
                display: none;
              }
              &.current {
                border: none;
                background-color: transparent;
                background: none;
                font-weight: 600;
                line-height: 17px;
              }
            }
          }
        }
      }

      .block-item-widget {
        -webkit-box-shadow: 0 1px 15px 1px rgba(69, 65, 78, .08);
        box-shadow: 0 1px 15px 1px rgba(69, 65, 78, .08);
        height: 132px;
        border-right: 1px solid #F4F3F8;
        background-color: #FFFFFF !important;
        border-radius: 0 !important;
        float: left;
        width: 25%;

        @media @mobiles {
          width: 50%;
        }
        @media @screen-605 {
          width: 50%;
        }

        .number-right {
          width: 100%;
          span.number-1{
            color: #716aca;
          }
          span.number-2{
            color: #36a3f7;
          }
          span.number-3{
            color: #f4516c;
          }
          span.number-4{
            color:#34bfa3;
          }

        }

      }
      .block-item-widget {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 20px;
        margin-bottom: 30px;

        @media @mobiles {
          padding: 15px;
          align-items: end;
        }
        @media @ipad {
          align-items: end;
        }
        @media @screen-768 {
          align-items: end;
        }

        @media @iphone-six-seven-eight {
          padding: 10px;
          align-items: end;
        }

        @media @wide-screen-down {
          align-items: end;
          padding: 20px;
        }

        &:nth-child(2) {
          background-color: #36a2f5;
        }

        &:nth-child(3) {
          background-color: #eac459;
        }

        &:nth-child(4) {
          background-color: #ff518a;
        }

        .icon-block {
          margin-right: 20px;
          color: #ffffff;
          font-size: 30px;

          @media @mobiles {
            margin-right: 0px;
          }
          @media @ipad {
            margin-right: 0px;
          }
        }

        @media @iphone-six-seven-eight {
          .icon-block {
            margin-right: 0px;
          }
        }
        @media @wide-screen-down {
          .icon-block {
            margin-right: 0px;
          }
        }

        .content-block {
          width: 100%;

          h4 {
            font-weight: bold;
            font-size: 14px;
            line-height: 19px;
            color: #575962;
          }

          .text-left {

            float: left;
            @media @ipad {
              height: 30px;
              width: 100%;
            }
            @media @screen-768 {
              height: 30px;
            }
            @media @screen-768 {
              width: 100%;
            }
          }

          .number-right {
            font-weight: bold;
            font-size: 23px;

            float: right;

          }

          p {
            font-weight: normal;
            font-size: 14px;
            line-height: 19px;

            color: #575962;
          }
        }

      }
    }
  }
}
