@brand-primary: #F343A0;
@brand-friend: #27b6f6;
@color-success: #61ce70; //green
@color-complianz: #29b6f6;
@color-error: #d7263d;
@light-text-color: #3c3c3c;
@border-color: #DEDEDE;
@color_open: #FBC43D;


.rsssl-text-input {
  width: 336px;
}

.rsssl-result ul .rsssl_error {
  color: @color-error;
}

.rsssl-result {
  margin-top: 15px;
}

.button-default.rsssl, .button-primary.rsssl {
  margin: 5px;
}

.rsssl-icons {
  margin-right: 5px;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    opacity: 100%;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}

/*CSS for templates/item_html.php*/

.rsssl-main-container {
  max-width: 1500px;
  max-height: 500px;
}

.rsssl-main {
  width: 95%;
  float: left;
}

.rsssl-icon {
  width: 30px;
  height: 30px;
  margin: 5px;
}

.rsssl-btn {
  height: 35px;
  width: 105px;
  float: right;
  margin-left: 4px;
}
@import "../bootstrap/css/bootstrap-theme.less";
@import "../bootstrap/css/bootstrap.less";
.modal {
  z-index: 99999;
  top: 100px !important;

  .modal-dialog {
    position: absolute;
    left: 300px;
    top: 50px;

    #details-modal-description {
      padding-bottom: 10px;
    }

    .modal-footer {
      text-align: left;
      padding: 15px;
      .button {
        margin-left: 10px;
      }
    }
  }

  .close {
    margin: 20px;
  }

  #rsssl-alert .close {
    margin: 0;
  }
}
.rsssl-scan-container {
  .button {
    margin-left: 9px;
  }

  #rsssl-scan-list {
    padding-top: 15px;
  }

  .rsssl-buttons .btn-warning {
    font-weight: 700;
  }

  .alert {
    max-width: 1000px;
    max-height: 75px;
    margin-bottom: 15px;
    margin-top: 15px;
  }

  .rsssl-buttons {
    float: right;
    padding-top: 18px;

    a {
      color: #fff;
    }
  }

  .panel-body {
    background-color: #E4E4E4;
    padding: 5px 5px 5px 15px;
  }

  .rsssl-files {
    max-width: 1920px;
    min-height: 60px;
    background-color: #F8F8F8;
    padding: 5px 25px 10px 5px;
    margin: 0px 3px 2px 0px;
    float: left;
    width: 100%;

    img {
      position: absolute;
      block-size: 1em;
      padding-right: 0;
    }
  }

  img {
    float: left;
    padding-right: 7px;
    margin-top: 3px;

    &.rsssl-icons {
      block-size: 1em;
    }
  }

  .panel-title {
    background-color: #DBDBDB;
    font-size: 14px;
    color: inherit;
  }

  .panel-body {
    display: none;
  }

  .panel-heading {
    background-color: #DBDBDB;
    padding: 5px 5px;
    border-bottom: 1px solid transparent;
    display: inline-block;
    vertical-align: middle;
  }

  .blockedurls {
    background-color: #DBDBDB;
  }

  #edit-files-blocked {
    display: none;
  }

  #resultsblock {
    padding-bottom: 10px;
  }

  .rsssl-description {
    float: left;
    margin-left: 18px;
  }

  .rsssl-scan-more-options {
    display: block;
    text-indent: 0.7em;
    max-width: 350px;
    margin-top: 10px;
    padding-bottom: 10px;
    background-color: #E4E4E4;
    padding-left: 5px;

    h3 {
      padding: 10px 0 0 2px;
    }
  }

  .panel {
    margin-bottom: 10px;
    background-color: #E4E4E4;
  }

  .panel-results {
    background-color: #E4E4E4;
    padding-top: 10px;
  }

  .rsssl-scan-more-options {
    display: none;
    margin-bottom: 15px;
  }

  .form-table th {
    width: 260px !important;
  }

  .rsssl-btn-group {
    padding-top: 5px;
  }

  .rsssl-tips {
    list-style-type: disc;
    margin-left: 18px;
  }

  .rsssl.bar.progress-bar {
    text-align: left;
  }

  .dataTables_filter {
    display: none;
  }

  .rsssl progress {
    margin-top: 20px;
  }

  #rsssl-scan-results_info {
    position: absolute;
    bottom: 65px;
    width: 200px;
    left: 370px;
  }

  #rsssl-scan-pagination {
    z-index: 9999;
  }

  //width: 100%;
  //text-align: left;

  th {

    padding-left: 5px;
  }

  td {
    word-break: break-all;
    padding: 3px 0;

    &:first-child {
      font-size: 12px;
    }
  }

  td, th {
    &:first-child {
      min-width: 100px;

      &.dataTables_empty {
        padding: 10px;
        width: 100%;
      }

      .rsssl-progress-status {
        padding: 0;
      }
    }

    &:nth-child(2) {
      min-width: 200px;
    }

    &:nth-child(3) {
      width: 100%;
    }

    &:nth-child(4) {
      min-width: 120px;
    }
  }

  .rsssl-blocked-url {
    padding-right: 10px;
  }

  .rsssl-scan-status {
    width: 100px;
  }

  .rsssl-progress-status {
    width: 60px;
  }

  .button {
    //margin-right: 5px;
    margin-left: 10px;
    float: right;
  }

  tr td .button {
    min-width: 40px;
    padding: 4px 6px;
    line-height: 8px;
    min-height: 20px;
    text-align: center;
  }

  .rsssl-grid-item-footer {
    .rsssl-scan-options {
      flex-grow: 1;

      .rsssl-buttons-scan {
        .rsssl-btn-group-scan {
          display: flex;
          align-items: center;

          span {
            input {
              margin-right: 5px;
              margin-left: 10px;
            }
          }

          button {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
/*
    cool checkbox sliders
*/
.rsssl-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 21px;

  input {
    display: none;
  }
}

.rsssl-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.rsssl-slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.rsssl-slider.rsssl-round {
  border-radius: 20px;
}

.rsssl-slider.rsssl-round:before {
  border-radius: 50%;
}

input:checked + .rsssl-slider {
  background-color: #2DAAE1;
}

input:checked + .rsssl-slider:before {
  -webkit-transform: translateX(17px);
  -ms-transform: translateX(17px);
  transform: translateX(17px);
}

input:disabled + .rsssl-slider {
  background-color: #b3e0f4;
}

input:focus + .rsssl-slider {
  box-shadow: 0 0 1px #2DAAE1;
}

/*loader*/
.rsssl-loader {
  margin: 0;
  width: 78px;
  height: 15px;
  text-align: center;
  font-size: 10px;

  > div {
    margin: 1px;
    background-color: #444;
    height: 100%;
    width: 3px;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
  }

  .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }

  .rect3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
  }

  .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }

  .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }
}


@-webkit-keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}

@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}

/*CSP table*/
#rsssl-csp-table {
  display: table;

  td:nth-child(2) {
    width: 550px;
  }
}

// Need to be outside wrapper
.dataTables_paginate, #rsssl-scan-results_paginate {
  //display: contents is needed to display it nicely in case of over 100 pages.
  display:contents;
  flex: 1;
  cursor: pointer;

  .paginate_button {
    color: black;
    font-size: 11px;
    padding: 8px 13px;
    box-sizing: border-box;
    border: 1px solid @border-color;
    box-shadow: 0 1px 1px @border-color;

    &.previous {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }

    &.next {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }

    &.disabled {
      color: @light-text-color;
    }

    &.current {
      color: black;
      //because of display:contents on the paginate_button, we need a 3px border to get the height of the buttons the same.
      border: 3px solid @color_open;
      background-color: @color_open;
    }
  }
}

.dataTables_wrapper {
  width: 100% !important;

  table.dataTable.no-footer {
    border-bottom: 0 !important;

    th {
      border: 0
    }
  }

  .dataTables_length {
    display: none;
  }

  .dataTables_info {
    padding-right: 15px;
  }
}

.rsssl-item {
  .dataTables_filter {
    input {
      width: 220px;
      border-color: @border-color
    }
  }
  .dataTables_info {
    color: #c6c6c6;
  }

}

.rsssl-datatables {

  table.dataTable {
    width: 100%;
    margin-left: -15px;
    margin-right: -15px;

    tr {
      padding: 0 !important;
    }

    thead {
      text-align: left;

      .sorting, .sorting_asc, .sorting_desc {
        background-image: initial;
      }

      th {
        text-align: left;
        border-bottom: 0 !important;
        width: 200px;
        border-bottom: 0;
      }
    }

    td {
      width: 200px;
      padding: 8px 5px 8px 20px;

      button {
        padding: 0;
        line-height: 8px;
        min-width: inherit;
        min-height: 20px;
        float: right;
      }
    }
  }
}


.rsssl-permissions-policy {
  .dataTables_filter {
    display: none;
  }

  td {
    width: 185px;
  }

}

.rsssl-content-security-policy {
  #rsssl-csp-entries {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    color: @light-text-color;
    margin-right: 20px;
  }

  #rsssl-csp-table {
    td {
      word-break: break-all;
    }

    td:nth-child(1) {
      word-break: break-word;
    }

    .rsssl-csp-table_info {
      padding-right: 15px !important;
    }
  }
}

.rsssl_sites_overview {
  &.networkwide th.sorting {
    visibility: hidden;
  }
  .dataTables_length {
    display: none;
  }

  #rsssl_sites_overview {
    button.button-default {
      padding: 0 5px;
      line-height: 6px;
      min-height: 20px;
    }

    thead {
      th {
        padding-left: 0;
        text-align: left;

        &:first-child {
          width: 25px;
        }

        &:nth-child(3) {
          width: 25px;
        }
      }
    }

    tbody tr td {
      .rsssl-progress-status {
        padding: 1px;
      }

      &:first-child {
        font-size: 12px;
      }

      &:nth-child(3) {
        text-align: right;
      }

      padding: 8px 17px 8px 0;
    }
  }
}

.rsssl-locked{
  position: absolute;
  top:0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  .rsssl-locked-overlay{
    z-index:99;
    .rsssl-open {
      float: left;
      margin-right:12px;
    }
    .rsssl-progress-status {
      float:left;
      margin-right:20px;
    }
    position:absolute;
    width: calc(100% - 65px);
    bottom: 0;
    background-color: #fff;
    padding: 20px;
    margin:12px;
    box-shadow: 0 0 5px 5px rgba(223,222,222,0.4);
  }
}