body {
  margin: 0;
  /* min-width:950px; */
  background: #e5e5e5;
  font-family: sans-serif;
  position: relative;
}
div.content.index {
  padding: 1px 0px;
  position: relative;
  /* min-height: 100%; */
}
ul#navmobile {
  overflow: visible !important;
}
.swal-button {
  padding: 7px 19px;
  border-radius: 2px;
  background-color: #01a6ca;
  font-size: 12px;
  border: 1px solid #009abb;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}
.swal-button--danger:not([disabled]):hover,
.swal-button--cancel:not([disabled]):hover {
  background-color: #008cac;
}
.swal-button--cancel {
  color: #ffffff;
}
.center{
  text-align: center;
}
.right{
  float: right;
}
.cursur-pointer li a{
  cursor: pointer;
}
.contentOptions{
  cursor: pointer;
}
.contentOptions:hover{
  background: #F2F2F2
}
#footer_au2mate{
  width: 10%;
  /* height: 10%; */
  text-align: center;
  margin: auto;
}
/* .glyphicon{
  line-height: inherit;
} */
.btn-primary{
  background-color: #01a6ca;
  border-color: #009abb;
}

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}

.btn-secondary:focus, .btn-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}
.list-group-item.node-treeview{
  /* background-color: #e5e5e5; */
  color: #000000;
}
.node-selected{
	background-color: #01a6ca;
}
#addComment{
  margin-top: 10px;
}
#commentDescription{
  width: -webkit-fill-available;
}
.left{
  text-align: left;
}
._imageDiv, .relative, ._videoFrame{
  position: relative;
}
._documentFrame{
  padding-bottom: 20px;
}
._videoFrame{
  margin-bottom: 39px;
  padding-right: 5px;
  padding-left: 5px;
}
#videoframedesc{
  text-align: center; 
  margin-top: 0px;
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}
#videoframedesc:hover{
  text-overflow: clip;
  white-space: normal;
  word-break: break-all;
}
video{
  max-width: 100%;
}
._imageDiv{
  padding: 0 5px;
}
div .col-sm-3:hover > ._documentIconTrash,
div .col-sm-3:hover > ._documentIconEdit,
._videoFrame:hover > ._videoIconEdit,
._videoFrame:hover > ._videoIconTrash,
._commentFrame:hover > ._commentIconEdit,
._commentFrame:hover > ._commentIconTrash{
  opacity: 1;
}
._documentIconEdit, ._documentIconTrash,
._videoIconEdit, ._videoIconTrash,
._commentIconEdit, ._commentIconTrash{
  position: absolute;
  font-size: 23px; 
  transform: translate(0%, 50%);
  cursor: pointer;
  opacity: 0;
  transition: 0.3s;
}
._documentIconEdit{
  left: 0px;
  top: 5%;
}
._documentIconTrash{
  right: 0px;
  top: 5%;
}
._videoIconEdit{
  bottom: -108%;
  left: 5%;
}
._videoIconTrash{
  bottom: -108%;
  right: 5%;
}

#table_video_wrapper .row .col-sm-6 #table_video_length label{
  float: left;
}
#_vidTabNav li a{
  background: #ddd;
}
#_vidTabNav li.active a{
  background: #FFF;
}
._commentIconTrash{
  right: 25%;
  bottom: -68%;
  transform: translate(-50%, 50%);
}
._commentIconEdit{
  left: 25%;
  bottom: -68%;
  transform: translate(-50%, 50%);
}
._commenth5{
  margin-bottom: 30px;
}
.imageIcon{
  position: absolute;
  left: 50%;
  top:0%;
  transform: translate(-50%, 50%);
  font-size: 23px;
  color:rgb(0, 0, 0);
  opacity: 0;
  transition: 0.3s;
  cursor: pointer;
  padding:10px;
  padding-right: 11px;
  padding-top: 11.3px;
  z-index: 20;
}
.imageBG{
  left: 50%;
  top:0%;
  transform: translate(-50%, 50%);
  height: 44px;
  width: 44px;
  border-radius: 20px;
  position: absolute;
  transition: opacity 1s;
  opacity: 0;
}
._imageDiv:hover > .imageBG{
  border-radius: 20px;
  opacity: .5;
  filter:blur(2px);
}
._imageDiv:hover > a > img{
  background:#000;
  opacity: .2;
  transition: .1s;
}
._horizontalline{
  border: 1px solid black;
  /* margin-top: 0; 
  margin-bottom: 0; */
}
/* Undo Modal */

th i.fa{
  cursor: pointer;
  color: #337ab7;
}
th i.fa:hover{
  color: #ff0000;
}

/* Undo Modal */

/* Navbar */
        ul.sidenav {
          list-style-type: none;
          margin: 0;
          padding: 0;
          width: 100%;
          background-color: #f1f1f1;
          /* background: linear-gradient(to bottom, rgba(242,242,242,1) 0%, rgba(242,242,242,1) 92%, rgb(172, 172, 172) 96%, rgba(172, 172, 172,1) 60%); */
          position: fixed;
          height: auto;
          top: 0;
          overflow: auto;
          z-index: 500
        }
        ul.sidenav#pcnavbar{
          overflow: visible !important;
        }
        ul.sidenav#pcnavbar li a#options {
          float: right;
        }
        ul#pcnavbar li.dropdown ul.dropdown-menu{
          left: auto;
          right: 0;
          top: calc(100% + 36px);
          padding: 0;
          margin: 0;
        }
        ul#pcnavbar li.dropdown ul.dropdown-menu li a{
          float: inherit;
          width: -webkit-fill-available;
        }
        ul#pcnavbar li.dropdown ul.dropdown-menu li#login{
          float: left;
          width: -webkit-fill-available;
        }
        ul#pcnavbar li.dropdown ul.dropdown-menu li#separatorPc_options_1{
          margin: 0;
        }
        ul.sidenav li a {
          float: left;
          display: block;
          color: #000;
          padding: 8px 12px;
          text-decoration: none;
        }
        ul.sidenav li a.active {
          background-color: #00a6ca;
          /* background: linear-gradient(to bottom, #00a6ca 0%, #00a6ca 92%, rgb(172, 172, 172) 96%, rgba(172, 172, 172,1) 60%); */
          color: white;
          /* width: 38px; */
          overflow: hidden;
          white-space: nowrap;
        }
        ul.sidenav li a#index {
          transition: width .2s;
          width: 38px;
          overflow: hidden;
          white-space: nowrap;
        }
        ul.sidenav li a#index.active {
          width: 195px;
        }
        ul.sidenav li a:hover:not(.active) {
          background-color: #555;
          color: white;
        }
        ul.sidenav li a#manual {
          float: right;
        }

/* adminside */
        select._adminside {
          width: 75%;
          max-width: 500px;
          background: none;
          border: 1px solid #fff;
          border-radius: 3px;
          padding: 6px 20px;
          box-sizing: border-box;
          margin-bottom: 20px;
          font-size: 16px;
          color: #000;
          background-color: white;
          text-align-last: center;
        }
        table{
          background-color: #f1f1f1;
        }
        tbody{
          background-color: white;
        }
        p{
          margin: 0px 0px;
        }
        ._form-add p input{
          text-align: center
        }
/* Content */
        div.content {
          margin-left: 0;
          margin-top: 35px;
          padding: 1px 16px;
          height: -webkit-fill-available;
        }
/* Document Explore */
        #exp_videos a{
          margin-left: 15px
        }
/* Index */
        div.content.index {
          padding: 1px 0px;
        }
        div.container{
          width: auto;
        }
        div.container-fluid.index{
          padding-left: 0px;
          padding-right: 0px;
        }
        div.col-sm-4.index{
          min-width: 275px;
          /* width: 275px; */
          width: 25%;
          height: 100%;
          position:fixed;
        }
        /* div.col-sm-8.index{
          margin-left: 25%;
        } */
        #startimg{
          text-align: center;
          display: block;
          margin-left: auto;
          margin-right: auto;
          width: auto;
          height: 100%;
          max-height: 450px;
        }
        #startbox{
          margin:0 0 25px;
          overflow:hidden;
          padding:10px;
          /* background-color:#ffffff; */
          background: linear-gradient(90deg, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 99%, rgba(229,229,229,1) 100%);
        }
        #image, #files, #videos, #comments, #MMmanual{
          margin:0 0 25px;
          overflow:hidden;
          padding:10px;
          /* background-color:#ffffff; */
          background: linear-gradient(90deg, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 99%, rgba(229,229,229,1) 100%);
          width: auto;
        }
        #tagnamePropertyvalue{
          margin-bottom: 0;
        }
        input#guid, input#type,
        input#manufacture, input#model,
        input#description{
          margin-left: 0px;
        }
        input#guiddocumentfile{
          /* max-width: 566px; */
          width: calc(100% - 77.47px);
          text-align: center;
        }
/*-------------------MODAL CENTER-------------------*/
        .modal {
          text-align: center;
          padding: 0!important;
        }
        .modal:before {
          content: '';
          display: inline-block;
          height: 100%;
          vertical-align: middle;
          margin-right: -4px;
        }
        .modal-dialog {
          display: inline-block;
          text-align: left;
          vertical-align: middle;
        }
/*-------------------MODAL CENTER-------------------*/
/* Index Menu Content*/
        /* .container #menu{
          display: inline-block;
          cursor: pointer;
          float: right;
        } */

          /* .bar1, .bar2, .bar3 {
          width: 35px;
          height: 5px;
          background-color: #333;
          margin: 6px 0;
          transition: 0.4s;
        }

          .change .bar1 {
          -webkit-transform: rotate(-45deg) translate(-9px, 6px);
          transform: rotate(-45deg) translate(-9px, 6px);
        }

          .change .bar2 {opacity: 0;}

          .change .bar3 {
          -webkit-transform: rotate(45deg) translate(-8px, -8px);
          transform: rotate(45deg) translate(-8px, -8px);
        } */
/* Index Modal styling */
        ._tagname{
          position: relative;
        }
        ._tagname:hover > ._tagnameedit,
        ._header:hover > ._menu,
        ._imageedit:hover > ._imageediticon,
        ._documentationedit:hover > ._documentationediticon,
        ._videosedit:hover > ._videoseditediticon,
        ._imageDiv:hover > .imageIcon,
        ._commentadd:hover> ._commentaddicon
        {
          opacity: 1;
        }
        ._tagnameedit, ._imageediticon, 
        ._documentationediticon, ._videoseditediticon,
        ._commentaddicon{
          position: absolute;
        }
        ._menu, ._tagnameedit, ._imageediticon, 
        ._documentationediticon, ._videoseditediticon,
        ._commentaddicon{
          color: #000000;
          right: 1%;
          opacity: 0;
          transition: 0.3s;
          cursor: pointer;
          font-size: 24px
        }
        /*iOS*/
                /* ._tagname_iOS:hover > ._tagnameedit_iOS,
                ._header_iOS:hover > ._menu_iOS,
                ._imageedit_iOS:hover > ._imageediticon_iOS,
                ._documentationedit_iOS:hover > ._documentationediticon_iOS,
                ._videosedit_iOS:hover > ._videoseditediticon_iOS,
                ._imageDiv_iOS:hover > .imageIcon_iOS,
                ._commentadd_iOS:hover> ._commentaddicon_iOS
                {
                  opacity: 1;
                } */
                ._tagnameedit_iOS, ._imageediticon_iOS, 
                ._documentationediticon_iOS, ._videoseditediticon_iOS,
                ._commentaddicon_iOS{
                  position: absolute;
                }
                ._menu_iOS, ._tagnameedit_iOS, ._imageediticon_iOS, 
                ._documentationediticon_iOS, ._videoseditediticon_iOS,
                ._commentaddicon_iOS{
                  color: #000000;
                  right: 1%;
                  opacity: 1;
                  transition: 0.3s;
                  cursor: pointer;
                  font-size: 24px
                }
                .imageIcon_iOS{
                  position: absolute;
                  left: 90%;
                  top: -4%;
                  transform: translate(-50%, 50%);
                  font-size: 23px;
                  color:rgb(0, 0, 0);
                  opacity: 1;
                  transition: 0.3s;
                  cursor: pointer;
                  padding:10px;
                  padding-right: 11px;
                  padding-top: 11.3px;
                  z-index: 20;
                }
                ._menu_iOS{
                  float: right;
                }
                ._documentIconEdit_iOS, ._documentIconTrash_iOS,
                ._videoIconEdit_iOS, ._videoIconTrash_iOS,
                ._commentIconEdit_iOS, ._commentIconTrash_iOS{
                  float: right;
                  font-size: 20px;
                  cursor: pointer;
                }
                ._documentIconEdit_iOS{
                  right: 15%;
                }
                /* ._documentIconTrash_iOS{
                } */
                ._videoIconTrash_iOS{
                  top: 5px;
                  right: 0px;
                  position: absolute;
                }
                ._videoIconEdit_iOS{
                    top: 5px;
                    right: 40px;
                    position: absolute;
                }
                ._videoFrame_iOS{
                  width: 100%;
                  position: relative;
                }
                ._commentIconEdit_iOS{
                  top: 5px;
                  right: 40px;
                  position: absolute;
                }
                ._commentIconTrash_iOS{
                  top: 5px;
                  right: 0px;
                  position: absolute;
                }

                


        /*iOS*/
        .container ._menu{
          /* display: inline-block; */
          cursor: pointer;
          float: right;
          z-index: 10;
        }
        ._centerlabel{
          transform: translate(0, 33%);
        }
        #hr_header, .hr_header{
          border: 0;
          height: 1px;
          background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        }
        ._headerinput{
          max-width: 100%;
          width: 100%;
        }
        .row._headerModal,
        ._center{
          text-align: -webkit-center;
        }
        .row._headerModal{
          padding: 5px 0;
        }
        #description {
          resize: vertical;
        }
        #deleteHeader{
          float: left;
        }
        button#explore{
          vertical-align: 0;
        }
        /*------------------Video------------------*/
                    #editVideoBody .col-sm-2{
                      padding: 0;
                    }
                    #videoDescription{
                      margin: 0;
                    }
                    #videodiv-16_9{
                      width: 100%;
                      padding-top: 56.25%;
                      position: relative;
                    }
                    #videodiv-16_9 video{
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                    }
                    div#editVideos div div div.modal-body._center{
                      padding: 0;
                    }
                    #editVideoBody{
                      padding: 10px 15px;
                      margin-right: 0; 
                      margin-left: 0;
                    }
                    div#editVideos div.modal-dialog{
                      width: 75vw;
                    }
                    #editVideoBody div div.col-sm-10{
                      padding: 5px 0;
                    }
                    #editVideoBody div div.col-sm-10 input{
                      min-width: 0;
                      max-width: 100%;
                      width: 100%
                    }
                    #editVideoBody div label.col-sm-2{
                      padding: 5px 0;
                      margin-bottom: 0;
                      margin-top: 7px;
                      text-align: left;
                    }
                    /* div.tab-content div#videotab1, div.tab-content div#videotab2{
                      padding: 0 10px
                    } */
                    div.tab-content div#videotab1{
                      padding: 0 50px
                    }
                    #table_video_wrapper .row{
                      margin-left: 0;
                      margin-right: 0;
                    }
                    #links{
                      padding-right: 0px;
                      padding-left: 0px;
                    }
                    
        /*------------------Video------------------*/

        /*--------------Image Gallery--------------*/
                    div.imageContainer{
                      background: lightgrey; 
                      max-width: 190px; 
                      max-height: 290px; 
                      margin-bottom: 10px; 
                      display: block; 
                      float: left; 
                      margin-right: 15px;
                    }
                    div.imageContainer.index{
                      margin-top: 5px;
                    }
                    i.editImage{
                      margin-top: 5px; 
                      margin-left: 5px;
                    }
                    i.deleteImage{
                      float: right; 
                      margin-top: 5px; 
                      margin-right: 5px;
                    }
                    div.imageContainer img{
                      margin-right:20px; 
                      /* width: 150px;  */
                      height: 212px;  
                      /* object-fit: cover; */
                      margin-left:20px; 
                      margin-bottom:0px; 
                      width: 150px;
                    }
                    div.imageContainer.index img{
                      margin-top: 20px;
                    }
                    div.imageContainer h5.nr1{
                      padding-left:20px;
                    }
                    div.imageContainer h5.nr2{
                      padding-left:20px; 
                      text-overflow: ellipsis;  
                      white-space: nowrap; 
                      overflow: hidden; 
                    } 
                    .imageSelect{
                      transition: all .05s;
                      outline-width: 3px;
                      outline-color: #00a6ca;
                      outline-style: solid;
                    }
        /*--------------Image Gallery--------------*/

        /*--------------Comment Modal--------------*/

                    div.form-group._commentPropertyvalue div.col-sm-10{
                      padding-bottom: 10px;
                    }

        /*--------------Comment Modal--------------*/
        
        
/* Index Image gallery */
        #gallery {
          scroll-snap-type: x mandatory;
          position: relative;
          overflow-x: auto;
          display: flex;
          margin-right: 5px;
        }
        #gallery img {
          /* scroll-snap-align: center; */
          height: 450px;
          width: auto;
          /* padding: 0px 5px; */
        }
        ._imageedit, ._documentationedit, 
        ._videosedit, ._commentadd{
          position: relative;
          text-align: -webkit-center;
        }
/* Index files */
        div.col-sm-3{
          text-align: center;
        }
        div.col-sm-3 > a > #pdf{
          width: auto;
          height: 100px;
        }
        

/* Login */
        h1{
          text-align: center;
          color: black;
          font-weight: normal;
          margin-bottom: 20px;
        }
        input#username,
        input#password{
          text-align: center;
        }
        input._adminside{
          /* text-align: left; */
          width: 75%;
          max-width: 500px;
          background-color: #FFF;
          /* border: 1px solid #fff; */
          border-radius: 3px;
          padding: 6px 20px;
          box-sizing: border-box;
          margin-bottom: 20px;
          font-size: 16px;
          color: black;
        }
        input[type="submit"],input[type="button"]{
          background: #00a6ca;
          border: 0;
          cursor: pointer;
          color: #fff;
          font-weight: bold;
        }
        input[type="submit"]:hover,input[type="button"]:hover{
          background: #0595B0;
          transition: .6s;
        }
        div.content.error-msg{
          text-align: center;
          margin-top: 175px;
        }
        div #rowLoging{
          text-align: center;
        }
        #a2m{
          width: 500px;
        }
/*QRSCAN*/
        video.qrscan{
          width: auto;
          height: 80vh;
        }
/*FOOTER*/

        #contentMenu div div.modal-content{
          width: 354px;
          font-size: 20px;
        }
        .index_footer{
          transition: margin-left .5s, width .5s;
        }
        /* .col-sm-8.index.index_footer{
          width: 100%;
        } */

        .popup {
          position: relative;
          display: inline-block;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          }
          
          /* The actual popup */
          .popup .popuptext {
          visibility: hidden;
          width: 160px;
          background-color: #555;
          color: #fff;
          text-align: center;
          border-radius: 6px;
          padding: 8px 0;
          position: absolute;
          z-index: 1;
          bottom: 125%;
          left: 50%;
          margin-left: -80px;
          }
          
          /* Popup arrow */
          .popup .popuptext::after {
          content: "";
          position: absolute;
          top: 100%;
          left: 50%;
          margin-left: -5px;
          border-width: 5px;
          border-style: solid;
          border-color: #555 transparent transparent transparent;
          }
          
          /* Toggle this class - hide and show the popup */
          .popup .show {
          visibility: visible;
          -webkit-animation: fadeIn 1s;
          animation: fadeIn 1s;
          }
          
          /* Add animation (fade in the popup) */
          @-webkit-keyframes fadeIn {
          from {opacity: 0;}
          to {opacity: 1;}
          }
          
          @keyframes fadeIn {
          from {opacity: 0;}
          to {opacity:1 ;}
          }

/* Desktop Styles */
@media only screen and (min-width: 1199px) {
  a._NavTreeview{
    display: none;
  }
  .modal-content .modal-body#_imageEditBody div.row{
    margin-right: 0;
    margin-left: 0;
  }
  #editImageBody.row div.col-md-3{
    padding-right: 0;
    padding-left: 0;
  }
  #searchImages{
    max-width: 100%;
    width: 100%;
  }
  .imageContainer.index{
    margin: 0 0 10px 0;
  }
  #editImageBody div.col-md-3{
    padding-right: 5px;
    padding-left: 5px;
    width: 25%;
    height: 300px;
    float: left;
    position: relative;
  }
  #editImageBody div.col-md-3 div.imageContainer.index{
    position: absolute;
    right: 50%;
    transform: translateX(50%);
  }
}
@media only screen and (max-width: 1199px) {
  div.col-sm-4.index{
    min-width: 275px;
    /* width: 275px; */
    width: 50%;
    height: 100%;
    position:fixed;
  }
  div.col-sm-8.index.index_footer{
    /* width: 50%;
    margin-left: 50%; */
  }
}
@media only screen and (min-width: 901px) {
  /* Navbar */
  .col-sm-8.index.index_footer{
    width: 100%;
  }
  #login {
    float:right;
  }

  /* Login */
          div.form-wrap{
            width: 100%;
            /* max-width: -webkit-calc(100% - 175px); */
            height: 100%;
            background: #e5e5e5;
            padding: 40px 20px;
            box-sizing: border-box;
            text-align: center;
            /* position: fixed; */
            /* left: 175px; */
            top: 0;
          }
  /*MODAL INDEX*/
          .modal-content .modal-body#_imageEditBody{
            max-height: 80vh;
          }
          .modal-content .modal-body#_imageEditBody div.row{
            margin-right: 0px;
            margin-left: 0px;
          }
          .modal-content .modal-body{
            max-height: 83.5vh;
            overflow: auto;
          }
}
/*Normal iPad*/
@media only screen and (max-width: 1030px) {
  .col-sm-3.relative._documentFrame{
    width: 33%;
  }
  .modal-content .modal-body{
    overflow: auto;
  }
  /*---------------------Image--------------------*/
  .modal-content .modal-body#_imageEditBody div.row{
    margin-right: 0;
    margin-left: 0;
  }
  div#editImage div.modal-dialog.modal-lg{
    width: 94vw;
    height: 94vh;
  }
  #editImageBody div.col-md-3{
    padding-right: 5px;
    padding-left: 5px;
    width: 25%;
    height: 300px;
    float: left;
    position: relative;
  }
  #editImageBody div.col-md-3 div.imageContainer.index{
    position: absolute;
    right: 50%;
    transform: translateX(50%);
  }
  #searchImages{
    max-width: 100%;
    width: 100%;
  }
  .imageContainer.index{
    margin: 0 0 10px 0;
  }
  #editImageBody{
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  #_imageEditBody{
    margin-right: 0;
    margin-left: 0;
  }
/*---------------------Image--------------------*/
}
@media only screen and (max-width: 980px) {
  .col-sm-3.relative._documentFrame{
    width: 33%;
  }
}
@media only screen and (max-width: 900px) {
  .col-sm-3.relative._documentFrame{
    width: 33%;
  }
}
/* Tablet Styles */
@media only screen and (max-width: 900px) {

  /* #videos .col-sm-12 .contentborder .col-sm-4{
            width: 100%;
          } */
          
  /* Navbar */
          ul.sidenav {
            width: 100%;
            height: auto;
            position: fixed;
            top: 0;
          }
          /* ul.sidenav li a {
            float: left;
            padding: 15px;
          } */
  /* Login */
          div.form-wrap {
            width: 100%;
            max-width: 100%;
            height: 100%;
            background: #e5e5e5;
            padding: 40px 20px;
            box-sizing: border-box;
            /* position: fixed; */
            left: 0px;
          }
          input {
            width: 50%;
            min-width: 300px;
          }
          #a2m {
            width: 50%;
            min-width: 300px;
          }
  /* Content */
          div.content {
            margin-left: 0;
            margin-top: 59px;
          }
  /* QRSCAN */
          video.qrscan {
            width: 100%;
            height: auto;
          }
  /* Index */
          div.col-sm-8.index{
            margin-left: 275px;
            width: auto;
          }
          #startimg{
            text-align: center;
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: auto;
            height: auto;
            max-height: 500px;
          }
          div.col-sm-6.start{
            width: 100%
          }
          /* .col-sm-1, .col-sm-10, .col-sm-11,
          .col-sm-12, .col-sm-2,
          .col-sm-4, .col-sm-5, .col-sm-6,
          .col-sm-7, .col-sm-8, .col-sm-9 {
            float: none;
          } */
          div.col-sm-4{
            float: left;
          }
          #login {
            float:right;
          }
          
          
          #editImage .modal-dialog{
            width: 85vw;
            
          }
          .modal-body.image-modal-body{
            overflow: auto;
            height: 80vh;
          }
          /* Modal sized for mobile */
          .modal-dialog.modal-dialog-centered,
          .modal-dialog.modal-lg{
            width: 75vw;
            margin: 0;
            max-height: 100vh;
          }
          /* .col-sm-10 {
            width: 100%;
          } */
          /* .col-sm-10 input{
            max-width: 100%;
          } */
          div.form-group{
            margin: 0;
          }
          /* .modal-body{
            padding: 0;
          } */
          /* button#cancelTagname{
            float: left;
          } */
          .row._headerModal{
            text-align: -webkit-center;
            margin: 0;
          }
          input#guiddocumentfile{
          
            /* max-width: 67vw; */
            text-align: center;
          }
          
          .end-col{
            margin-bottom: 10px;
          }
          /*------------------Data Table------------------*/
                        #table_Documentation, 
                        #table_video{
                          overflow: auto;
                          width: 100vw;
                        }
                        #table_Documentation_wrapper input,
                        #table_video_wrapper input{
                          margin-bottom: 0px;
                        }
                        #table_Documentation_wrapper label,
                        #table_video_wrapper label{
                          padding-top: 15px;
                        }
                        #table_Documentation_wrapper select,
                        #table_video_wrapper select{
                          margin-bottom: 5px;
                        }
                        #table_Documentation_filter label,
                        #table_video_filter label{
                          padding-top: 0px;
                        }
                        #table_Documentation_wrapper .col-sm-12,
                        #table_video_wrapper .col-sm-12{
                          overflow: auto;
                          padding: 0;
                        }
                        #table_Documentation_wrapper .row,
                        #table_video_wrapper .row{
                          margin: 0;
                        }
                        #table_Documentation_wrapper .row .row,
                        #table_video_wrapper .row .row{
                          margin: 0;
                        }
                        #document-datatable,
                        #video-datatable{
                          max-height: 85vh;
                          overflow-x: scroll;
                        }
          /*------------------Data Table------------------*/

          /*-------------------Dropzone-------------------*/
                        #dropzone-container-doc{
                          padding: 15px 15px 0 15px;
                        }
          /*-------------------Dropzone-------------------*/

          /*---------------------Video--------------------*/
                        #editVideoBody, #videoPropertyvalue{
                          margin: 0;
                        }
                        #editVideos .modal-dialog{
                          width: 93vw;
                        } 
                        #editVideoBody .col-sm-2{
                          padding: 0;
                        }
                        #editVideoBody .form-group{
                          padding: 10px 0;
                        }
                        #videoDescription{
                          margin: 0;
                        }
                        #cancelVideo{
                          float: left;
                        }
                        .col-sm-6._videoFrame{
                          width: 100%;
                        }
          /*---------------------Video--------------------*/

          /*---------------------Image--------------------*/
                        .modal-content .modal-body#_imageEditBody div.row{
                          margin-right: 0;
                          margin-left: 0;
                        }
                        #editImageBody div.col-md-3{
                          padding-right: 5px;
                          padding-left: 5px;
                          width: 25%;
                          height: 300px;
                          float: left;
                          position: relative;
                        }
                        #editImageBody div.col-md-3 div.imageContainer.index{
                          position: absolute;
                          right: 50%;
                          transform: translateX(50%);
                        }
                        #searchImages{
                          max-width: 100%;
                          width: 100%;
                        }
                        .imageContainer.index{
                          margin: 0 0 10px 0;
                        }
                        #editImageBody{
                          height: 100%;
                          width: 100%;
                          overflow: hidden;
                        }
                        #_imageEditBody{
                          margin-right: 0;
                          margin-left: 0;
                        }
          /*---------------------Image--------------------*/
          #_vidTabNav.nav.nav-tabs{
            margin: 0;
          }
          #editVideoBody .form-group{
            padding: 0;
          }
          #editVideoBody{
            padding: 10px 15px;
          }
          #editVideoBody div div.col-sm-10{
            padding: 5px 0;
          }
          #editVideoBody div div.col-sm-10 input{
            min-width: 0;
            max-width: 100%;
            width: 100%
          }
          #editVideoBody div label.col-sm-2{
            padding: 5px 0;
            margin-bottom: 0;
            margin-top: 7px;
            text-align: left;
          }
          

  /* Modal sized for mobile */
}
@media only screen and (max-width: 820px) {
  input#guiddocumentfile{
    /* width: 40vw; */
    width: calc(100% - 77.47px);
  }
  #editImageBody .col-md-3 {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 0px;
  }
  .modal-body.image-modal-body{
    margin: 0 10px;
  }
  #searchImages{
    width: 100%;
    max-width: 100%;
  }
  #editImage .modal-dialog{
    width: 98vw;
  }
  div.imageContainer.index img {
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
  }
  #table_Documentation_wrapper label, #table_video_wrapper label {
    padding-top: 0px;
  }
  #table_Documentation_wrapper input, #table_video_wrapper input {
    margin-bottom: 0px;
    min-width: 0;
  }
  div.tab-content div#videotab2 {
    overflow: auto;
    height: 66vh;
  }
  div.tab-content div#videotab1 {
    padding: 0;
  }
  div#editVideos div.modal-dialog{
    margin: 0;
  }
  #cancelVideo{
    float: none;
  }
}
@media only screen and (max-width: 769px) {
  .col-sm-3.relative._documentFrame{
    width: 50%;
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  /* div.form-group{
     padding: 15px 0; 
  } */
  ._headerModalGuidFile div input{
    width: 80.5%;
  }
  .end-col{
    margin-bottom: 0;
  }
  #header_modalBody{
    padding: 15px 0;
  }
  #uploadfile div div.modal-body{
    padding: 15px;
  }
  #editImageBody .col-md-3{
    width: 33.3333333%;
    /* padding: 0 5px; */
    float: left;
  }
  #_imageEditBody div.row{
    margin-left: 0;
    margin-right: 0;
  }
  #_DocumentationModal{
    width:95vw;
  }
  #document-datatable{
    padding: 0 5px;
  }
  #table_Documentation_filter label{
    padding-top: 15px;
  }
  #table_Documentation_filter label input{
    min-width: 0;
  }
  #_vidTabNav.nav.nav-tabs{
    margin: 0;
  }
  #editVideoBody .form-group{
    padding: 0;
  }
  #editVideoBody{
    padding: 10px 15px;
  }
  #editVideoBody div div.col-sm-10{
    padding: 5px 0;
  }
  #editVideoBody div div.col-sm-10 input{
    min-width: 0;
    max-width: 100%;
    width: 100%
  }
  #editVideoBody div label.col-sm-2{
    padding: 5px 0;
    margin-bottom: 0;
    margin-top: 7px;
    text-align: left;
  }
  #cancelVideo{
    margin-left: 0;
    float: none;
  }
  div.tab-content div#videotab1{
    padding: 0;
  }
  /*------------------Data Table------------------*/
  #table_Documentation, 
  #table_video{
    overflow: auto;
    width: 100vw;
  }
  #table_Documentation_wrapper input,
  #table_video_wrapper input{
    margin-bottom: 0px;
    min-width: 0;
  }
  #table_Documentation_wrapper label,
  #table_video_wrapper label{
    padding-top: 0px;
  }
  #table_Documentation_wrapper select,
  #table_video_wrapper select{
    margin-bottom: 5px;
  }
  #table_Documentation_filter label,
  #table_video_filter label{
    padding-top: 0px;
  }
  #table_Documentation_wrapper .col-sm-12,
  #table_video_wrapper .col-sm-12{
    overflow: auto;
    padding: 0;
  }
  #table_Documentation_wrapper .row,
  #table_video_wrapper .row{
    margin: 0;
  }
  #table_Documentation_wrapper .row .row,
  #table_video_wrapper .row .row{
    margin: 0;
  }
  #document-datatable,
  #video-datatable{
    max-height: 85vh;
    overflow-x: scroll;
  }
  #document-datatable{
    padding-top: 10px; 
  }
/*------------------Data Table------------------*/


}
/* Mobile Styles */
@media only screen and (min-width: 570px) {
  ul#pcnavbar{
    display: block;
  }
  ul#navmobile{
    display: none;
  }
}
@media only screen and (max-width: 570px) {
  /* Navbar */
          ul.sidenav{
            border-bottom: 0px;
            position: relative;
          }
          ul.sidenav li a {
            text-align: center;
            float: none;
          }
          ul.sidenav li a#manual {
            text-align: center;
            float: none;
          }
          ul.sidenav li a.active {
            background-color: #00a6ca;
            color: white;
            width: auto;
            overflow: hidden;
            white-space: nowrap;
          }
          ul.sidenav li a:hover:not(.active){
            background-color: #f1f1f1;
            color: #000;
          }
          ul.sidenav#navmobile{
            border-bottom: 0px;
            /* position: relative; */
            position: sticky;
          }
          ul.sidenav#navmobile li a {
            float: left;
          }
          ul.sidenav#navmobile li a#manual {
            float: left;
          }
          ul.sidenav#navmobile li a#options {
            float: right;
          }
          ul#pcnavbar{
            display: none;
          }
          ul#navmobile{
            height: 41px;
          }
          ul#navmobile li a i{
            font-size: 20px;
          }
          ul#navmobile li.dropdown ul.dropdown-menu{
            left: auto;
            right: 0;
            top: calc(100% + 40px);
          }
          ul#navmobile li.dropdown ul.dropdown-menu li a{
            float: inherit;
          }
          ul#navmobile li.dropdown ul.dropdown-menu li a#manual{
            float: inherit;
          }

  /* Treeview */
          div.col-sm-4.index.indextreeview{
            padding-top: 0px;
          }
          div.content.index{
            margin-top: 0px;
          }
          div.content.index div.container{
            padding-right: 0px;
            padding-left: 0px;
          }
          a._NavTreeview{
            display: none;
          }
          .mobileview_foldtreeview{
            height: 40px;
            width: 100%;
            display: none;
            position: relative;
            cursor: pointer;
          }
          .mobileview_foldtreeview span{
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, 0);
          }
          /* Treeview navbar fix for mobile*/
                    /* #allcontentonindex{
                      margin-left: 0;
                      width: 100%
                    }           */
  /* Login */
          h1{
            text-align: center;
          }
          input {
            width: 100%;
            min-width: 0px;
          }
          #a2m {
            width: 95%;
            min-width: 0px;
          }
  /* QRSCAN */
          video.qrscan{
            width: 100%;
            height: auto;
          }
  /* Content */
          div.content {
            margin-top: 18px;
          }
  /* Index */
          .col-sm-3.relative._documentFrame{
            width: 100%;
          }
          div.col-sm-4.index{
            width: 100%;
            height: auto;
            position: unset;
          }
          div.col-sm-8.index{
            margin-left: 0px;
            height: 100%;
            width: auto;
            position: unset;
          }
          #startimg{
            text-align: center;
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: auto;
            height: auto;
            max-height: 450px;
            border: 1px solid black;
          }
          #login {
            float:none;
          }
          #footer_au2mate{
            width: 55vw;
            height: auto;
            text-align: center;
            margin: auto;
          }
          div.col-sm-4{
            float: none;
          }
          ._videoFrame{
            padding: 0 0;
          }
          /* #allcontentonindex{
            z-index: 0;
          }
          div.container-fluid.index{
            z-index: -1;
          }
          div.col-sm-4.index{
            z-index: 1;
          }
          .treeview{
            z-index: 2;
          } */
  /* Modal sized for mobile */
          .modal-dialog.modal-dialog-centered,
          .modal-dialog.modal-lg{
            width: 98vw;
            margin: 0;
            max-height: 100vh;
          }
          div.form-group{
            margin: 0;
          }
          div.form-group#tagname_form-group{
            margin: 0;
            padding-bottom: 20px;
          }
          .modal-body{
            padding: 0;
            margin: 0 10px;
          }
          button#cancelTagname{
            float: none;
          }
          .row._headerModal{
            text-align: -webkit-center;
            margin: 0;
          }
          input#guiddocumentfile{
            /* max-width: 67vw; */
            text-align: center;
          }
          
          .end-col{
            margin-bottom: 10px;
          }
          /*------------------Data Table------------------*/
                        #table_Documentation{
                          overflow: auto;
                          width: 100vw;
                        }
                        #table_Documentation_wrapper input{
                          margin-bottom: 0px;
                        }
                        #table_Documentation_wrapper label{
                          padding-top: 15px;
                        }
                        #table_Documentation_wrapper select{
                          margin-bottom: 5px;
                        }
                        #table_Documentation_filter label{
                          padding-top: 0px;
                        }
                        #table_Documentation_wrapper .col-sm-12{
                          overflow: auto;
                          padding: 0;
                        }
                        #table_Documentation_wrapper .row{
                          margin: 0;
                        }
                        #table_Documentation_wrapper .row .row{
                          margin: 0;
                        }
                        #document-datatable{
                          max-height: 85vh;
                          overflow-x: scroll;
                        }
          /*------------------Data Table------------------*/

          /*-------------------Dropzone-------------------*/
                        #dropzone-container-doc{
                          padding: 15px 15px 0 15px;
                        }
          /*-------------------Dropzone-------------------*/

          /*---------------------Video--------------------*/
                        #editVideoBody, #videoPropertyvalue{
                          margin: 0;
                        }
                        #editVideos .modal-dialog{
                          width: 93vw;
                        } 
                        #editVideoBody .col-sm-2{
                          padding: 0;
                        }
                        #editVideoBody .form-group{
                          padding: 10px 0;
                        }
                        #videoDescription{
                          margin: 0;
                        }
                        #cancelVideo{
                          float: none;
                        }
          /*---------------------Video--------------------*/

          /*---------------------Image--------------------*/
                        #editImageBody .col-md-3{
                          width:50%;
                          padding-right: 0px; 
                          padding-left: 0px;
                        }
                        div.imageContainer{
                          /* max-width: 100%;
                          width: 100%; */
                          margin-right: 0;
                          margin: 0 5.5%;
                        }
                        #_imageEditBody div.row{
                          padding-left: 0;
                          padding-right: 0;
                        }
                        #_imageEditBody div.row input{
                          margin: 5px 5px 0 5px;
                          width: calc(100% - 10px);
                        }
                        #editImage .modal-dialog {
                          width: 98vw;
                        }
                        div.imageContainer.index img {
                          margin-top: 7px;
                        }
                        div.imageContainer img {
                          margin-right: 7px;
                          margin-left: 7px;
                          margin-bottom: 0px;
                        }
                        #editImageBody div.col-md-3{
                          padding-right: 5px;
                          padding-left: 5px;
                          width: 50%;
                          height: 300px;
                          float: left;
                          position: relative;
                        }
                        #editImageBody div.col-md-3 div.imageContainer.index{
                          position: absolute;
                          right: 50%;
                          transform: translateX(50%);
                        }
                      }
                      
          /*---------------------Image--------------------*/