body .vebko-bg {
  position: fixed;
  top: 0px;
  opacity: 0.05;
  width: 100%;
  z-index: -6;
  width: max-content; }

body .nav-tabs > li {
  float: left; }
  body .nav-tabs > li a {
    font-family: Tahoma; }

body .instructionsDetail .inp-src {
  display: flex;
  direction: ltr;
  justify-content: center;
  position: relative; }
  @media only screen and (max-width: 399px) {
    body .instructionsDetail .inp-src {
      margin-top: 15px;
      padding: 20px; } }
  @media only screen and (min-width: 400px) {
    body .instructionsDetail .inp-src {
      margin-top: 15px;
      padding: 20px; } }
  @media only screen and (min-width: 481px) {
    body .instructionsDetail .inp-src {
      margin-top: 0px;
      padding: 20px; } }
  @media only screen and (min-width: 768px) {
    body .instructionsDetail .inp-src {
      margin-top: -37px; } }
  @media only screen and (min-width: 1024px) {
    body .instructionsDetail .inp-src {
      margin-top: -37px; } }
  @media only screen and (min-width: 1440px) {
    body .instructionsDetail .inp-src {
      margin-top: -37px; } }
  @media only screen and (min-width: 1921px) {
    body .instructionsDetail .inp-src {
      margin-top: -37px; } }
  body .instructionsDetail .inp-src input[type=search] {
    direction: ltr;
    text-align: left !important;
    padding: 5px;
    border: 1px solid #ddd;
    font-size: 21px;
    border-radius: 6px 0px 0px 6px;
    border-right: 0px;
    padding-left: 20px;
    z-index: 35; }
    @media only screen and (max-width: 399px) {
      body .instructionsDetail .inp-src input[type=search] {
        width: 100%; } }
    @media only screen and (min-width: 400px) {
      body .instructionsDetail .inp-src input[type=search] {
        width: 100%; } }
    @media only screen and (min-width: 481px) {
      body .instructionsDetail .inp-src input[type=search] {
        width: 100%; } }
    @media only screen and (min-width: 768px) {
      body .instructionsDetail .inp-src input[type=search] {
        width: 35%; } }
    @media only screen and (min-width: 1024px) {
      body .instructionsDetail .inp-src input[type=search] {
        width: 35%; } }
    @media only screen and (min-width: 1440px) {
      body .instructionsDetail .inp-src input[type=search] {
        width: 35%; } }
    @media only screen and (min-width: 1921px) {
      body .instructionsDetail .inp-src input[type=search] {
        width: 35%; } }
  body .instructionsDetail .inp-src .form-control {
    text-align: left !important; }
  body .instructionsDetail .inp-src button {
    border-radius: 0px 6px 6px 0px;
    border: 1px solid #ddd; }
  body .instructionsDetail .inp-src .listsearch {
    position: absolute;
    display: none;
    max-height: 200px;
    background-color: white;
    z-index: 10;
    overflow: hidden;
    margin-top: 42px;
    border: 1px solid #ededed;
    list-style: none;
    overflow-y: auto;
    padding: 0px;
    padding-top: 10px; }
    @media only screen and (max-width: 399px) {
      body .instructionsDetail .inp-src .listsearch {
        width: 100%; } }
    @media only screen and (min-width: 400px) {
      body .instructionsDetail .inp-src .listsearch {
        width: 100%; } }
    @media only screen and (min-width: 481px) {
      body .instructionsDetail .inp-src .listsearch {
        width: 100%; } }
    @media only screen and (min-width: 768px) {
      body .instructionsDetail .inp-src .listsearch {
        width: 40%; } }
    @media only screen and (min-width: 1024px) {
      body .instructionsDetail .inp-src .listsearch {
        width: 40%; } }
    @media only screen and (min-width: 1440px) {
      body .instructionsDetail .inp-src .listsearch {
        width: 40%; } }
    @media only screen and (min-width: 1921px) {
      body .instructionsDetail .inp-src .listsearch {
        width: 40%; } }
    body .instructionsDetail .inp-src .listsearch li {
      padding: 5px;
      padding-left: 18px; }
      body .instructionsDetail .inp-src .listsearch li:hover {
        background-color: cornsilk;
        cursor: pointer; }

body .PanelInstructions {
  display: grid;
  grid-template-columns: max-content auto;
  direction: ltr; }

body div[id^=PanelInstructions] {
  direction: ltr;
  /* display: grid;*/ }
  body div[id^=PanelInstructions] .categories {
    padding: 18px;
    direction: ltr;
    gap: 10px;
    background-color: #f1f1f1;
    height: 1200px;
    overflow: auto;
    border: 1px solid #9cc2bd;
    border-top: 0px;
    position: relative; }
    @media only screen and (max-width: 399px) {
      body div[id^=PanelInstructions] .categories {
        padding: 0px; } }
    body div[id^=PanelInstructions] .categories .active {
      background-color: #80debf !important;
      border-bottom: 4px solid #3a74a7 !important; }
    body div[id^=PanelInstructions] .categories .category {
      padding: 5px;
      display: grid;
      text-align: left;
      background-color: #fff;
      border: 1px solid #dfe6e5;
      border-bottom: 4px solid #e7e7e7;
      place-content: flex-start;
      place-items: center;
      min-width: 290px; }
      @media only screen and (max-width: 399px) {
        body div[id^=PanelInstructions] .categories .category {
          grid-template-columns: auto;
          min-width: auto; } }
      @media only screen and (min-width: 400px) {
        body div[id^=PanelInstructions] .categories .category {
          grid-template-columns: auto;
          min-width: auto; } }
      @media only screen and (min-width: 481px) {
        body div[id^=PanelInstructions] .categories .category {
          grid-template-columns: auto;
          min-width: auto; } }
      @media only screen and (min-width: 768px) {
        body div[id^=PanelInstructions] .categories .category {
          grid-template-columns: max-content auto;
          min-width: 290px; } }
      @media only screen and (min-width: 1024px) {
        body div[id^=PanelInstructions] .categories .category {
          grid-template-columns: max-content auto;
          min-width: 290px; } }
      @media only screen and (min-width: 1440px) {
        body div[id^=PanelInstructions] .categories .category {
          grid-template-columns: max-content auto;
          min-width: 290px; } }
      @media only screen and (min-width: 1921px) {
        body div[id^=PanelInstructions] .categories .category {
          grid-template-columns: max-content auto;
          min-width: 290px; } }
      body div[id^=PanelInstructions] .categories .category img {
        width: 40px;
        padding: 5px; }
      body div[id^=PanelInstructions] .categories .category:hover {
        cursor: pointer;
        border-radius: 5px;
        background-color: #80debf; }
        body div[id^=PanelInstructions] .categories .category:hover h1 {
          color: #0722ff; }
      body div[id^=PanelInstructions] .categories .category h1 {
        font-size: 15px;
        margin: 0px;
        padding: 0px; }
        @media only screen and (max-width: 399px) {
          body div[id^=PanelInstructions] .categories .category h1 {
            display: none; } }
        @media only screen and (min-width: 400px) {
          body div[id^=PanelInstructions] .categories .category h1 {
            display: none; } }
        @media only screen and (min-width: 481px) {
          body div[id^=PanelInstructions] .categories .category h1 {
            display: none; } }
        @media only screen and (min-width: 768px) {
          body div[id^=PanelInstructions] .categories .category h1 {
            display: block; } }
        @media only screen and (min-width: 1024px) {
          body div[id^=PanelInstructions] .categories .category h1 {
            display: block; } }
        @media only screen and (min-width: 1440px) {
          body div[id^=PanelInstructions] .categories .category h1 {
            display: block; } }
        @media only screen and (min-width: 1921px) {
          body div[id^=PanelInstructions] .categories .category h1 {
            display: block; } }
    body div[id^=PanelInstructions] .categories .category.hide {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .4s ease,transform .4s ease;
      visibility: hidden; }
    body div[id^=PanelInstructions] .categories .category.show {
      opacity: 1;
      transform: translateX(0);
      visibility: visible; }
    @media only screen and (max-width: 399px) {
      body div[id^=PanelInstructions] .categories .category:last-child {
        margin-bottom: 1000px; } }
    @media only screen and (min-width: 400px) {
      body div[id^=PanelInstructions] .categories .category:last-child {
        margin-bottom: 1000px; } }
    @media only screen and (min-width: 481px) {
      body div[id^=PanelInstructions] .categories .category:last-child {
        margin-bottom: 1000px; } }
    @media only screen and (min-width: 768px) {
      body div[id^=PanelInstructions] .categories .category:last-child {
        margin-bottom: 500px; } }
    @media only screen and (min-width: 1024px) {
      body div[id^=PanelInstructions] .categories .category:last-child {
        margin-bottom: 500px; } }
    @media only screen and (min-width: 1440px) {
      body div[id^=PanelInstructions] .categories .category:last-child {
        margin-bottom: 500px; } }
    @media only screen and (min-width: 1921px) {
      body div[id^=PanelInstructions] .categories .category:last-child {
        margin-bottom: 500px; } }

body div[id^=PanelInstructions][id$=Detail] .title {
  display: flex;
  justify-content: left;
  align-items: center; }
  @media only screen and (max-width: 399px) {
    body div[id^=PanelInstructions][id$=Detail] .title {
      margin-left: 27px;
      margin-right: 27px; } }
  @media only screen and (min-width: 400px) {
    body div[id^=PanelInstructions][id$=Detail] .title {
      margin-left: 27px;
      margin-right: 27px; } }
  @media only screen and (min-width: 481px) {
    body div[id^=PanelInstructions][id$=Detail] .title {
      margin-left: 27px;
      margin-right: 27px; } }
  @media only screen and (min-width: 768px) {
    body div[id^=PanelInstructions][id$=Detail] .title {
      margin-left: 50px;
      margin-right: 50px; } }
  @media only screen and (min-width: 1024px) {
    body div[id^=PanelInstructions][id$=Detail] .title {
      margin-left: 50px;
      margin-right: 50px; } }
  @media only screen and (min-width: 1440px) {
    body div[id^=PanelInstructions][id$=Detail] .title {
      margin-left: 50px;
      margin-right: 50px; } }
  @media only screen and (min-width: 1921px) {
    body div[id^=PanelInstructions][id$=Detail] .title {
      margin-left: 50px;
      margin-right: 50px; } }
  body div[id^=PanelInstructions][id$=Detail] .title h1 {
    font-weight: bold; }
    @media only screen and (max-width: 399px) {
      body div[id^=PanelInstructions][id$=Detail] .title h1 {
        font-size: 18px; } }
    @media only screen and (min-width: 400px) {
      body div[id^=PanelInstructions][id$=Detail] .title h1 {
        font-size: 25px; } }
    @media only screen and (min-width: 481px) {
      body div[id^=PanelInstructions][id$=Detail] .title h1 {
        font-size: 25px; } }
    @media only screen and (min-width: 768px) {
      body div[id^=PanelInstructions][id$=Detail] .title h1 {
        font-size: 36px; } }
    @media only screen and (min-width: 1024px) {
      body div[id^=PanelInstructions][id$=Detail] .title h1 {
        font-size: 36px; } }
    @media only screen and (min-width: 1440px) {
      body div[id^=PanelInstructions][id$=Detail] .title h1 {
        font-size: 36px; } }
    @media only screen and (min-width: 1921px) {
      body div[id^=PanelInstructions][id$=Detail] .title h1 {
        font-size: 36px; } }
  body div[id^=PanelInstructions][id$=Detail] .title .iconoption {
    margin-left: auto;
    margin-right: 0px;
    display: flex; }
    body div[id^=PanelInstructions][id$=Detail] .title .iconoption button {
      border: 1px solid #e4e4e4;
      background-color: #f5f5f5;
      border-radius: 4px; }
      body div[id^=PanelInstructions][id$=Detail] .title .iconoption button:hover {
        background-color: #ebebeb; }
    body div[id^=PanelInstructions][id$=Detail] .title .iconoption .pagenumber {
      display: flex;
      justify-content: center;
      margin-right: 15px;
      align-items: center; }
      body div[id^=PanelInstructions][id$=Detail] .title .iconoption .pagenumber strong {
        color: #064544; }
      body div[id^=PanelInstructions][id$=Detail] .title .iconoption .pagenumber .active {
        background-color: green !important; }
      body div[id^=PanelInstructions][id$=Detail] .title .iconoption .pagenumber input[type=button] {
        width: 3rem;
        height: 3rem;
        text-align: center;
        border: 1px solid #eaeaea;
        background-color: #666;
        color: white;
        font-weight: bold;
        border-radius: 4px;
        margin: 1px; }
        body div[id^=PanelInstructions][id$=Detail] .title .iconoption .pagenumber input[type=button]:hover {
          background-color: green; }
  body div[id^=PanelInstructions][id$=Detail] .title .tools {
    position: relative; }
    body div[id^=PanelInstructions][id$=Detail] .title .tools ul {
      position: absolute;
      background-color: #fff;
      border: 1px solid #e9e9e9;
      direction: ltr;
      right: 0px;
      list-style: none;
      line-height: 30px;
      padding: 0px;
      width: max-content;
      z-index: 1; }
      body div[id^=PanelInstructions][id$=Detail] .title .tools ul li {
        padding: 4px;
        padding-left: 20px;
        padding-right: 20px; }
        body div[id^=PanelInstructions][id$=Detail] .title .tools ul li:hover {
          cursor: pointer;
          background-color: #ade5e4; }

body div[id^=PanelInstructions][id$=Detail] .videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  margin-top: 25px;
  direction: ltr;
  gap: 20px; }
  @media only screen and (max-width: 399px) {
    body div[id^=PanelInstructions][id$=Detail] .videos {
      margin: 0px;
      gap: 0px;
      overflow: auto;
      max-height: 700px; } }
  @media only screen and (min-width: 400px) {
    body div[id^=PanelInstructions][id$=Detail] .videos {
      margin: 17px; } }
  @media only screen and (min-width: 481px) {
    body div[id^=PanelInstructions][id$=Detail] .videos {
      margin: 17px; } }
  @media only screen and (min-width: 768px) {
    body div[id^=PanelInstructions][id$=Detail] .videos {
      margin: 50px; } }
  @media only screen and (min-width: 1024px) {
    body div[id^=PanelInstructions][id$=Detail] .videos {
      margin: 50px; } }
  @media only screen and (min-width: 1440px) {
    body div[id^=PanelInstructions][id$=Detail] .videos {
      margin: 50px; } }
  @media only screen and (min-width: 1921px) {
    body div[id^=PanelInstructions][id$=Detail] .videos {
      margin: 50px; } }
  body div[id^=PanelInstructions][id$=Detail] .videos .collapse {
    visibility: collapse; }
  body div[id^=PanelInstructions][id$=Detail] .videos .video {
    width: 100%;
    display: grid;
    border-radius: 7px;
    position: relative;
    opacity: 0;
    transition: opacity .4s ease; }
    @media only screen and (max-width: 399px) {
      body div[id^=PanelInstructions][id$=Detail] .videos .video {
        padding: 12px; } }
    body div[id^=PanelInstructions][id$=Detail] .videos .video a {
      position: relative; }
      body div[id^=PanelInstructions][id$=Detail] .videos .video a svg {
        position: absolute;
        z-index: 1;
        left: 38%;
        top: 38%;
        display: none; }
    body div[id^=PanelInstructions][id$=Detail] .videos .video img {
      width: 100%;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px; }
    body div[id^=PanelInstructions][id$=Detail] .videos .video .tools {
      display: flex;
      position: relative;
      border-bottom: 1px solid silver;
      border-top: 8px solid #0d8786; }
      body div[id^=PanelInstructions][id$=Detail] .videos .video .tools button {
        border-right: 0px;
        border-top: 0px;
        border-bottom: 0px;
        background-color: #fefefe;
        border-left: 1px solid #fefefe;
        color: #587adf; }
        body div[id^=PanelInstructions][id$=Detail] .videos .video .tools button:hover {
          background-color: #f1f1f1; }
      body div[id^=PanelInstructions][id$=Detail] .videos .video .tools h1 {
        font-size: 15px;
        margin: 0px;
        background-color: #feffff;
        padding: 15px;
        word-break: break-word;
        flex: 1;
        height: 4.8em;
        /* margin-right: 6px;*/ }
      body div[id^=PanelInstructions][id$=Detail] .videos .video .tools .dlddocs {
        position: absolute;
        width: max-content;
        top: 0px;
        right: 31px;
        padding: 20px;
        background-color: #fff;
        border: 1px solid #e9e7e7;
        z-index: 9; }
        body div[id^=PanelInstructions][id$=Detail] .videos .video .tools .dlddocs .options {
          display: grid;
          grid-template-columns: auto auto; }
          body div[id^=PanelInstructions][id$=Detail] .videos .video .tools .dlddocs .options select {
            text-align: center; }
          body div[id^=PanelInstructions][id$=Detail] .videos .video .tools .dlddocs .options span {
            margin-right: 10px; }
        body div[id^=PanelInstructions][id$=Detail] .videos .video .tools .dlddocs > span {
          border: 1px solid #ebebeb;
          display: block;
          padding: 5px; }
        body div[id^=PanelInstructions][id$=Detail] .videos .video .tools .dlddocs .docs {
          display: grid; }
          body div[id^=PanelInstructions][id$=Detail] .videos .video .tools .dlddocs .docs .format {
            padding: 5px; }
            body div[id^=PanelInstructions][id$=Detail] .videos .video .tools .dlddocs .docs .format a {
              display: block; }
            body div[id^=PanelInstructions][id$=Detail] .videos .video .tools .dlddocs .docs .format:hover {
              background-color: whitesmoke; }
            body div[id^=PanelInstructions][id$=Detail] .videos .video .tools .dlddocs .docs .format ul {
              list-style: none;
              padding: 0px;
              display: none; }
    body div[id^=PanelInstructions][id$=Detail] .videos .video:hover {
      cursor: pointer; }
      body div[id^=PanelInstructions][id$=Detail] .videos .video:hover svg {
        display: block; }
  body div[id^=PanelInstructions][id$=Detail] .videos .video.shw {
    opacity: 1; }