body {
            font-family: Arial, sans-serif;
            background-color: #111111;
            color: #ffffff;
            margin: 0;
            padding: 0;
        }
        .header {
            padding: 40px 0 20px 0;
           display: flex;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
        }
        .header img {
            height: 30px;
            vertical-align: middle;
        }
        .header h1 {
            display: inline;
            font-size: 1.5em;
            color: white;
            margin-left: 15px;
            vertical-align: middle;
        }
        .breadcrumb {
            font-size: 24px;
    font-weight: 700;
    line-height: 35px;
    text-transform: capitalize;
            color: white;
           margin: 0 auto;
    width: 100%;
    max-width: 1170px; padding: 20px 0;
        }
        .breadcrumb span, .breadcrumb a {
            color: #f0ad4e;
        }
        .container {
            display: grid;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 1170px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
        }
        .folder, .file {
            background-color: #4b4b4b;
    padding: 0.3em;
    margin: 0;
    border-radius: 3px;

            cursor: pointer;
            text-decoration: none;
            color: #ffffff;
            transition: 0.3s background-color;
        }
        
        a.folder,  a.file {display: flex; align-items: center; text-align: left; padding: 25px; gap: 15px;}
        .iconDetails {text-align: left;}
        .iconDetails h6 {font-size: 15px; font-weight: 700; line-height: 20px; margin: 0;}
        .iconDetails small {color: #b6c1c9;
    font-size: 13px;
    font-weight: 400;}
        .folder:hover, .file:hover {
            background-color: #111111;
        }
        .folder-icon, .file-icon {
            display: block;
            margin: 0 auto;
            width: 64px;
            height: 64px;
        }
        .file-name {
            margin-top: 10px;
            
        }
        .container a > div{word-break: break-word;}
        .footer {
            color: white;
            text-align: center;
            padding: 20px;
            position: fixed;
            width: 100%;
            bottom: 0;
        }
      /* Pop-up */
.pshow {position: fixed;    z-index: 99999; display: none;}
.pshow .overlay {width: 100%; height: 100%; background: rgba(0,0,0,0.75); position: fixed; top: 0; left: 0;}
.pshow .img-show {max-width: 1028px; width: 90%; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); overflow: hidden;}
.pshow video{ max-height: 60vh;}
.pshow p{width:100%;text-align:right;}
.downloadbtn{background:#000;color:#fff;display:inline-block;padding:10px 20px;border-radious:3px;text-decoration:none;}
#close {position: absolute; top: 0px; right: 0px; z-index: 99; cursor: pointer; color: #333; background-color: #ffffff; border-radius: 0; padding: 2px 10px; outline: none; font-weight: 100; font-size: 22px;}
	.pop-wrap{background: #fff; padding: 20px;}
	.tmp-wrap iframe { height: 15vw; max-height: 222px !important;}  
	
    
    @media only screen and (max-width: 1200px) {
        
        .header {padding: 40px 20px 20px 20px; width: 50%; margin: 0}
        .breadcrumb {padding: 0 20px 20px 20px; width: 100%; max-width: calc(100% - 40px);}
        .container {padding: 0 20px; width: 100%; max-width: calc(100% - 40px);}
        .footer {position: relative; padding: 30px 0; font-size: 14px;}
        
    }
    
     @media only screen and (max-width:1024px) {
         .container {grid-template-columns: 1fr 1fr;}
         .breadcrumb {font-size: 16px;}
     }
     
      @media only screen and (max-width:767px) {
         
         .container {grid-template-columns: 1fr;}
     }