$sharedIconPath: '../../../assets/common/images/icons/';
@import '../../_shared/styles/main';
@import '../../vendors/jquery-contextmenu/styles/jquery.contextmenu';
@import '../../_shared/styles/jquery-ui/dark-hive';

$reportBackgroundColor: #212121; //#F6F2F1;
$reportImagesPath: '../images/';
@import './jquery-ui/report-detailed';

$mainMenuBackgroundColor: #3b3b3b;
$mainMenuBottomBorder: none;
$mainMenuLinkColor: #b1b1b1;
$mainMenuLinkHoverColor: #FFFFFF;
$mainMenuLinkActiveColor: #FFFFFF;
$select-color: #000;
$select-background: #FFFFFF;
$select-width: 330px;
$select-height: 26px;
// $mainMenuMarginBottom: 30px;
@import '../../_shared/styles/main-menu';

/* Report layout */
#mainContent {
  background-color: $reportBackgroundColor;
}
.report_wrapper {
  padding-bottom: 24px;
  #form-container {
    width: 860px;
    margin: 0 auto;
    padding-top: 10px;
    .report_heading {
      font-size: 30px;
      color: #fff;
      padding: 5px 0;
    }
    #mainTabs {
      background-color: #565656;
      padding: 0;
      border: 0 none;
      #navigation {
        padding: 0;
        .navigation_tab {
          width: 33.3333%;
          margin: 0;
          border: 0 none;
          border-radius: 0;
          background: transparent;
          overflow: hidden;
          &:first-child a {
            border-top-left-radius: 5px;
          }
          &:last-child a {
            box-shadow: none;
            border-top-right-radius: 6px;
          }
          a {
            background: #565656;
            font-size: 16px;
            color: #cbcbcb;
            text-align: center;
            display: block;
            float: none;
            padding: 6px 16px;
            box-shadow: inset -1px 0 0 #000;
             &:hover {
              background-color: #444444;
              color: #f4f4f4;
            }
            &:focus {
              outline: none !important;
            }
          }
        }
        .navigation_tab.ui-state-active {
          z-index: 1;
          a {
            background: #bfbfbf;
            color: #000;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);
            &:hover {
              background-color: #bfbfbf;
              color: #000;
            }
          }
        }
      }
      .inside-container {
        padding: 0;
        form.form {
          margin: 0;
        }
        .form_content.form2 .select-styled:after {
          background-color: #666666;
        }
        .form_content {
          position: relative;
          padding: 16px 27px 10px;
          .form_titre {
            font-size: 22px;
            padding-bottom: 20px;
          }
          .control-group {
            display: inline-block;
            margin-right: 24px;
            margin-bottom: 6px;
            label {
              display: inline;
              margin-right: 2px;
            }
            .input-prepend {
              margin: 0;

              .dmin, .dmax {
                border: 0 none;
                height: 16px;
                border-radius: 0 6px 6px 0;
              }
              .add-on {
                border: 0 none;
                width: 16px;
                height: 16px;
                line-height: 16px;
                border-radius: 6px 0 0 6px;
                background: #727272 url('/assets/common/images/icons/calendar-white.png') no-repeat center/16px;
              }
              .add-on.disabled_image {
                background-image: url('/assets/common/images/icons/calendar-grey.png');
                background-color: #d8d8d8;
              }
            }
          }
          .collist {
            .collist_buttons {
              position: absolute;
              right: 60px;
              top: 20px;
              button {
                background: #3f3f3f;
                border: 0 none;
                color: #fff;
                text-shadow: none;
                height: 22px;
                border-radius: 12px;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
                min-width: 94px;
                margin-left: 26px;
                font-size: 11px;
                font-weight: 500;
                padding: 0 10px;
                &:hover {
                  background: #ddd;
                  color: #000;
                }
                &:focus {
                  outline: none;
                }
              }
            }
            ul {
              margin: 0;
              li {
                display: table;
              }
            }
            .custom_checkbox_label {
              position: relative;
              margin-bottom: 0;
              padding-bottom: 3px;
              &:last-child {
                padding-bottom: 0;
              }
              input {
                opacity: 0;
                cursor: pointer;
              }
              .custom_checkbox {
                position: absolute;
                top: 5px;
                left: 0;
                height: 11px;
                width: 11px;
                background: transparent url('/assets/common/images/icons/unchecked.png') no-repeat;
              }
              input:checked ~ .custom_checkbox {
                background-image: url('/assets/common/images/icons/checked.png')
              }
            }
          }
          // custom select
          .select-hidden {
            display: none;
            visibility: hidden;
            padding-right: 10px;
          }
          .custom_select {
            cursor: pointer;
            display: inline-block;
            position: relative;
            font-size: 16px;
            color: $select-color;
            width: $select-width;
            height: $select-height;
          }
          .select-styled {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            font-size: 14px;
            line-height: 16px;
            padding: 5px 10px;
            background-color: $select-background;
            border-radius: 5px;
            transition: all 0.2s ease-in;
            &:after {
              content:"";
              width: 26px;
              height: 26px;
              position: absolute;
              top: 0;
              right: -2px;
              background: #404040 url(/assets/common/images/icons/double-arrow-white.png) no-repeat center/9px;
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
            }
            &:hover {
              background-color: darken($select-background, 2);
            }
            &:active, &.active {
              background-color: darken($select-background, 5);
            }
          }

          .select-options {
            display: none;
            position: absolute;
            top: 12px;
            right: -12px;
            left: 12px;
            z-index: 9;
            margin: 0;
            padding: 0;
            list-style: none;
            background-color: darken($select-background, 5);
            border-radius: 5px;
            opacity: .93;
            overflow: hidden;
            li {
              margin: 0;
              line-height: 26px;
              text-indent: 15px;
              font-size: 14px;
              border-top: 1px solid darken($select-background, 10);
              transition: all 0.15s ease-in;
              &:first-child {
                border: 0 none;
              }
              &:hover {
                color: $select-background;
                background: #5b5b5b;
              }
              &[rel="hide"] {
                display: none;
              }
            }
          }
          // custom select end
        }
        .form_content.form1 {
          background-color: #343434;
        }
        .form_submit {
          position: relative;
          height: 90px;
          background-color: #b5b5b5;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
          button {
            position: relative;
            top: 50%;
            left: 50%;
            font-size: 15px;
            color: #fff;
            padding: 5px 62px;
            display: block;
            background-color: #4f4f4f;
            border: 0 none;
            border-radius: 15px;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
            -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);

            &:hover {
              background-color: #2c2c2c;
            }
          }
          button.disabled {
            background: #656565;
            cursor: default;
            &:hover {
              background: #656565;
            }
          }
        }
      }
      #report-connections {
        .form2 {
          background-color: #414141;
        }
        .form3 {
          background-color: #6b6b6b;
        }
      }
      #report-downloads {
        .form_content:nth-child(2) {
          background-color: #414141;
        }
        .form_content:nth-child(3) {
          background-color: #4f4f4f;
        }
        .form3 {
          background-color: #6b6b6b;
        }
      }
      #report-records {
        .form_content:nth-child(3) {
          background-color: #4f4f4f;
        }
        .form_content:nth-child(2) {
          background-color: #414141;
        }
        .form3 {
          background-color: #5c5c5c;
        }
      }
    }
  }
}

#report-activite,
#report-telechargement,
#report-connexions {
  background-color: #555555;
}
.ui-widget-content a {
  &.btn {
    color: #333;
  }
}
.ui-modal {
  background-color: #212121;
  &.ui-widget-content{
    background-color: #212121;
  }
}

#mainMenu li .context-menu-item-inner a:hover {
  color: #000;
}

.ui-dialog-titlebar-close {
  text-indent: -9999999px;
}


/*Help menu*/
.contextMenu.helpcontextmenu {
  display: none;
  &.shown {
    display: block;
    position: absolute;
    z-index: 101;
  }
}
.help-trigger {
  display:inline-block;
  cursor:pointer;
  padding: 0 4px;
  border:none;
  margin-left: -12px;
}

.phraseanet_logo {
  background: url(../../common/images/logo_phraseanet.png) no-repeat center center /contain;
  height: 75px;
  width: 230px;
  display: inline-block;
}

.phraseanet_version {
  font-size: 15px;
  font-family: Roboto;
  font-weight: 500;
  color: #b7b7b7;
  padding-left: 58px;
  a {
    color: #b7b7b7;
    &:hover {
      color: #FFFFFF;
    }
  }
}

.phraseanet_about_top {
  background: #4e4e4e;
  padding: 30px 20px;
}
.phraseanet_about_bottom {
  padding: 25px 20px;
  min-height: 150px;
  background: #c8c8c8;
  a {
    font-family: Roboto;
    line-height: 1.2;
    font-size: 15px!important;
    font-weight: 500;
    color: #000000!important;
    text-decoration: underline;
  }

}
.phraseanet_gpl {
  img {
    position: absolute;
    width: 84px;
  }
  span {
    padding-top: 26px;
    display: inline-block;
    padding-left: 100px;
    padding-bottom: 20px;
    text-decoration: underline;
  }
  a {
    text-decoration: underline;
  }

}

.ui-icon, .ui-widget-content .ui-icon {
  background-image: url(/assets/vendors/jquery-ui/images/ui-lightness/ui-icons_222222_256x240.png)!important;
}