.ffolder {
    position: relative;
    display: inline-block;
    text-align: left;
    cursor:pointer;
}

    .ffolder:after, .ffolder:before {
        content: '';
        display: block;
        position: absolute;
    }

    .ffolder.small {
        margin-top: 8px;
        width: 88px;
        height: 61px;
        border-radius: 0 6px 6px;
    }

    .ffolder.medium {
        margin-top: 6px;
        width: 165px;
       height: 135px;
        border-radius: 0 10px 10px;
    }

    .ffolder.big {
      
        width: 130px;
        height: 143px;
        border-radius: 0 14px 14px;
    }

    .ffolder:after {
        width: 0;
        height: 0;
    }

    .ffolder.small:before {
        top: -8px;
        left: 0;
        width: 32px;
        height: 8px;
        border-radius: 6px 0 0;
    }

    .ffolder.small:after {
        top: -16px;
        left: 24px;
        border: 8px solid transparent;
    }

    .ffolder.medium:before {
        top: -16px;
        left: 0;
        width: 64px;
        height: 16px;
        border-radius: 10px 0 0;
    }

    .ffolder.medium:after {
        top: -32px;
        left: 48px;
        border: 16px solid transparent;
    }

    .ffolder.big:before {
        top: -24px;
        left: 0;
        width: 96px;
        height: 24px;
        border-radius: 14px 0 0;
    }

    .ffolder.big:after {
        top: -48px;
        left: 72px;
        border: 24px solid transparent;
    }

    .ffolder i, .ffolder span {
        position: absolute;
       top: 77%;
    left: 81%;
        transform: translate(-50%,-50%);
    }

    .ffolder span {
        font-size: 16px;
        padding: 2px 8px;
        border-radius: 15px;
        white-space: nowrap;
    }

    .ffolder.small i {
        font-size: 37px;
    }

    .ffolder.big i, .ffolder.medium i {
        font-size: 53px;
    }

    .ffolder.cyan {
        background-color: #23CBF4;
    }

        .ffolder.cyan span, .ffolder.cyan:before {
            background-color: #06BAEE;
        }

        .ffolder.cyan:after {
            border-bottom-color: #06BAEE;
        }

        .ffolder.cyan span {
            color: #FFF;
        }

        .ffolder.cyan i {
            color: #06BAEE;
        }

    .ffolder.yellow {
        background-color:#fde445;
    }

        .ffolder.yellow span, .ffolder.yellow:before {
            background-color:#fde445;
        }

        .ffolder.yellow:after {
            border-bottom-color:#fde445;
        }

        .ffolder.yellow span {
            color: #FFF;
        }

        .ffolder.yellow i {
            color: #F1A402;
        }
        
    .ffolder.fileP {
         width: 140px;
        height: 155px;
        /*background-color:#cb0606;*/
        background: url('../images/fileimage.png')no-repeat;
        background-size:cover;
    }

        /*.ffolder.file span, .ffolder.file:before {
             width: 130px;
                height: 143px;
          background: url('../images/fileimage.png')no-repeat;
           background-size:cover;
        }*/

        .ffolder.fileP:after {
          
        }

        .ffolder.fileP span {
            color: #FFF;
        }

        .ffolder.fileP i {
            color: #FF5E6E;
        }
 .ffolder.fileX {
         width: 140px;
        height: 155px;
        /*background-color:#cb0606;*/
        background: url('../images/fileimagex.png')no-repeat;
        background-size:cover;
    }

        /*.ffolder.file span, .ffolder.file:before {
             width: 130px;
                height: 143px;
          background: url('../images/fileimage.png')no-repeat;
           background-size:cover;
        }*/

        .ffolder.fileX:after {
          
        }

        .ffolder.fileX span {
            color: #FFF;
        }

        .ffolder.fileX i {
            color: #FF5E6E;
        }
        .ffolder.fileD {
         width: 140px;
        height: 155px;
        /*background-color:#cb0606;*/
        background: url('../images/fileimaged.png')no-repeat;
        background-size:cover;
    }

        /*.ffolder.file span, .ffolder.file:before {
             width: 130px;
                height: 143px;
          background: url('../images/fileimage.png')no-repeat;
           background-size:cover;
        }*/

        .ffolder.fileD:after {
          
        }

        .ffolder.fileD span {
            color: #FFF;
        }

        .ffolder.fileD i {
            color: #FF5E6E;
        }


    .ffolder.green {
        background-color: #62DE82;
    }

        .ffolder.green span, .ffolder.green:before {
            background-color: #66CA7F;
        }

        .ffolder.green:after {
            border-bottom-color: #66CA7F;
        }

        .ffolder.green span {
            background-color: transparent;
        }

        .ffolder.green i {
            color: #54C170;
        }

    .ffolder.gray {
        background-color: #829aa8;
    }

        .ffolder.gray span, .ffolder.gray:before {
            background-color: #687F8C;
        }

        .ffolder.gray:after {
            border-bottom-color: #687F8C;
        }

        .ffolder.gray span {
            background-color: transparent;
        }

        .ffolder.gray i {
            color: #687F8C;
        }
.filesize {
color:white;
font-size:11px;
z-index:100000;
        }
        .filetype {
color:white;
font-size:11px;
        }
       .foldername{
    color:black;
    text-transform:uppercase;
    font-weight:bold;
    font-size:12px;
     margin-top:4%;
     height:51px;
         word-wrap: break-word;

}
        .foldername1{
    color:white;
    text-transform:uppercase;
    font-weight:bold;
    font-size:12px;
     margin-top:4%;
     height:51px;
         word-wrap: break-word;

}
        .foldercreatedby {
            display:none;
 font-weight:bold;
  text-transform:uppercase;
  font-size:12px;

        }
        .foldercreatedon {
font-weight:bold;
  text-transform:uppercase;
  font-size:12px;
  color:#306dca;
        }
        .numberoffiles {

        }
        .numberoffiles, .numberoffiles:before {
            /*background-color: #F1A402;*/
        }

        .numberoffiles:after {
            border-bottom-color: #F1A402;
        }

        .numberoffiles {
            color: #000;
            font-size: 11px;
    font-weight: bold;
        }
.Contentchk {
    padding-top:12%;
    margin-top:6%;
    display: block;
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.Contentchk input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #dcdde5;
}

/* On mouse-over, add a grey background color */
.Contentchk:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.Contentchk input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.Contentchk input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.Contentchk .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

        .inner-addon { 
    position: relative; 
}
        .inner-addon .glyphicon {
  position: absolute;
  padding: 12px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  35px;padding-top:10px; }
.right-addon input { padding-right: 30px; }

   .btnstyle{
    /*border:solid 1px #fde445;*/
    background-color:#fde445;
    display: block;
    color: green;
    font-size: 17px;
    margin-top: -12.5%;
    margin-left: 78%;
    border:none;
}
    .btnstyle.focus, .btnstyle:focus{
border:none;
outline:none;
    }
.textboxcreate {
    width:75%;
    margin-left:3%;
}
#creatediv {
    padding-top:4px;
}
#deleteoption {
    border-radius: 50%;
    color: #fbfbfb;
    display: block;
    width: 22px;
    height: 22px;
    font-size: 14px;
    margin-top: 5px;
    background: #cc334a;
    padding-top: 4px;
    padding-left: 4px;
}
#viewoption {
    border-radius: 50%;
    color: #fbfbfb;
    display: block;
    width: 22px;
    height: 22px;
    font-size: 14px;
    margin-top: 5px;
    background: rgb(0, 132, 72);
    padding-top: 4px;
    padding-left: 4px;
}
#undooption {
    border-radius: 50%;
    color: #fbfbfb;
    display: block;
    width: 22px;
    height: 22px;
    font-size: 14px;
    margin-top: 5px;
     padding-top: 4px;
    padding-left: 5px;
    font-weight:bold;
    background: #4c6ef5;
  
}
.folderhead {
    color:white!important;
    font-size:16px!important;
    padding-top:10px;
        font-weight: 800;
        padding:10px;
  
}
.folderviewdetails {
    color: #014d54!important;
     /*font-weight: 800;*/
     cursor:pointer!important;
    padding:10px;
}