.folder-container
{
    position:relative;
}

.blade .folder-container {
    padding:1rem;
    background:white;
    border-radius:1rem;
    border:.1rem solid #ececec;
}
.folder-item {
    border-radius:1rem;
    display:inline-block;
    width: 32.5%;
    min-width: 15rem;
    margin: .2rem;
    cursor:pointer;
    position: relative;
    border: .2rem solid #ebebeb;
    /* background: #fdfdfd; */
}
.folder-item.folder {
    border-radius:1rem;
    display:inline-block;
    width: 13rem;
    margin: .2rem;
    cursor:pointer;
    position: relative;
    border: .2rem solid #ebebeb;
    /* background: #fdfdfd; */
}

.folder-item.selected {
    background: #E8F6FE;
    border: .2rem solid #e4f2fa;
}
.folder-favourite {
    position:absolute;
    z-index:1;
    left:.5rem;
    top:.5rem;
    width: 1.5rem;
    height: 1.5rem;
    visibility: hidden;
    line-height:1rem;
}

.folder-shared {
    position:absolute;
    z-index:1;
    left:.5rem;
    top:.8rem;
    width: 1.5rem;
    height: 1.5rem;
    line-height:1rem;
}


.folder-selector{
    position:absolute;
    z-index:1;
    right:.5rem;
    top:.5rem;
    width: 1.5rem;
    height: 1.5rem;
    visibility: hidden;
    line-height:1rem;
}

.folder-favourite .selected
{
    visibility:visible;
    color:#ffca00;
    font-weight:bold;
}

.folder-selector > i,
.folder-favourite > i,
.folder-shared {
    font-size:1.5rem;
    font-weight: 400;
    color: #969696;
}

.folder-shared > i {
    font-size:1.2rem;
}

.folder-item.selected .text-success {
    color: #7ecbee!important;
}

.folder-item.item:hover{
    background:#f5f5f5;
}

.folder-header{
    line-height:3.5rem;
    position: relative;
}
.folder-footer{
    height: 2.5rem;
    line-height: 2.5rem;
    text-align:left;
    font-size:1.15rem;
    position: absolute;
    width: 100%;
    bottom: 0;
    padding-left: 1.5rem;
    z-index:1;
}
.folder-icon-container
{
    color:#20407d;
}

.folder-icon-container .details
{
    display:none;
}

.folder-icon-title {
    font-weight:500;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: left;
    line-height: 1.2rem;
    z-index: 1;
    margin-left: .5rem;
    max-height: 2.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.folder-item.folder .folder-icon-title {
    font-size: .9rem;
    font-weight:500;
    height: 1.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    width:90%;
    text-align:center;
    white-space: nowrap;
    line-height: 1rem;
    z-index: 1;
    margin-left: 0;
}

.folder-icon-description
{
    text-align: left;
    width: 100%;
    height: 1.04rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1rem;
    padding: 1rem;
    padding-top: 0;
    z-index: 1;
    margin-top: 0rem;
    margin-bottom: 1rem;
}
.folder-description-container{
    display:flex;
    flex-direction: row;
    align-items: anchor-center;
    color:#0c0c0c;
    padding-top: 0;
    padding-bottom: 0;
    margin: 1.1rem;
    margin-bottom: .5rem;
}
.folder-item.folder .folder-description-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#0c0c0c;
    padding-bottom: 0;
}

.folder-icon-container
{
    font-size:2.5rem;
}

.folder-icon
{
    padding-top: 0;
    text-align:center;
    font-size: 4rem;
    color: #83d7fc;
    padding-bottom: 0;
    margin-left: 0;
}

.folder-item.folder .folder-icon
{
    padding-top: .5rem;
    text-align:center;
    font-size: 7rem;
    color: #83d7fc;
    padding-bottom: .5rem;
}

.folder-context-toggle
{
    position:absolute;
    right:0;
    top:0;
}

.folder-context-toggle div {
    margin:.2rem;
    background: #d4d4d4;
    border-radius:1rem;
    width:2rem;
    height:2rem;
    position:absolute;
    text-align:center;
    top:0;
    right: .2rem;
    line-height:2.1rem;
    font-size:1.3rem;
    color:#525252;
    visibility:hidden;
}

.folder-item:hover .folder-context-toggle div,
.folder-item:hover .folder-selector,
.folder-item.selected .folder-selector,
.folder-item:hover .folder-favourite
{
    visibility:visible;

}
.blazor-context-menu--default
{
    border-radius:.5rem;
    padding:.8rem .5rem;
}
.blazor-context-menu__item--default:hover {
    border-radius:.5rem;
}
.blazor-context-menu--default i {
    font-size:1.2rem;
    margin-right:.5rem;
    color:#565656;
}
.empty-folder {
    text-align:center;
    padding:4rem;
}
.empty-folder i {
    font-size:10rem;
    color:#e9e9e9;
}
.empty-folder > p {
    font-size:1.2rem;
    text-align:center;
    color:#b1b1b1;
    margin:1rem;
}

.folder-container-header
{
    border-radius: 2rem;
    margin-bottom: .5rem;
    display: flex;
    align-content: center;
    align-items: center;
    background: linear-gradient(271deg, rgb(245 245 245) 0%, rgb(254 254 254) 100%);
    margin: 0.3rem;
    padding: 0 .7rem;
}

.folder-container-header .toolbar
{

}

.folder-container-header .toolbar .btn
{
    border-radius:.5rem;
}

.folder-breadcrumbs
{
    flex: 2;
    margin:.2rem;
}

.folder-breadcrumbs > .breadcrumb > .breadcrumb-item > a,
.folder-breadcrumbs > .breadcrumb > li
{
    font-size:1.2rem;
}

.folder-breadcrumbs > .breadcrumb
{
    background:none;
    margin:0;
    padding-left:0;
    flex: 2;
}

.folder-header-actions {
    align-items: center;
    padding-right:.5rem;
    justify-content: center;
    display: flex;
}
.folder-header-actions i {
    font-size:1rem;
    color: #20407d;
    cursor:pointer;
    padding:.5rem;
    background:#dadada;
    border-radius:1rem;
    margin-left:.5rem;
    width:2rem;
    height:2rem;
    line-height:1.2rem;

}

.folder-header-actions i:hover {
    background:#b3b3b3;
}
.items-count{
    background:#dadada;
    padding:.35rem 1rem;
    border-radius:.5rem;
    display: inline-block;
    position:absolute;
    right:.5rem;
    top:.4rem;
    padding-right:2.3rem;
}
.items-count i
{
    font-size:1.3rem;
    position:absolute;
    top:.372rem;
    right:.4rem;
    cursor:pointer;
}
.items-count i:hover
{
    color:#020d23;
}

/* Etl Carousel */

.etl-carousel {
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow:hidden;
    background: lightgrey;
}
.etl-carousel-items {
    display:flex;
}
.etl-carousel-item
{
    margin:.5rem;
    background: white;
    padding: 1rem;
    text-align: center;
    border-radius: .5rem;
    transition: all .2s;
    border:.2rem solid #e2e2e2;
    cursor:pointer;
    position:relative;
}

.etl-carousel-item:hover
{
    background: #d9d9d9;
    border:.2rem solid #cfcfcf;

}

.etl-carousel-item.selected {
    background:#ffd62d;
    border:.2rem solid #f3cb2a;
    scale: 1.05;
}
.etl-carousel-page
{
    font-size:.68rem;
    padding:.2rem;
    color:#e7e6e6;
    cursor:pointer;
}

.etl-carousel-page:hover,
.etl-carousel-page.selected
{
    color:#606060;
}
.etl-carousel-item.selected > .btn
{
    scale:1.2;
}
.etl-carousel-prev,
.etl-carousel-next {
    background:#e6e6e6;
    width:2rem;
    display:flex;
    align-content:center;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    color:#919191;
    cursor:pointer;
}
.etl-carousel-prev:hover,
.etl-carousel-next:hover {
    background:#cdcdcd;
}

.etl-carousel-items
{
    background: #f1f1f1;
    flex:1;
    justify-content: center;
}

.etl-carousel-navigator
{
    display:flex;
    width:100%;
    transition: all 2s;
}
.etl-carousel-pages
{
    padding:.5rem;
}

.folder-container .preloader-content
{
    height: calc(100vh - 7rem);
    width: 100%;
    position: absolute;
    top: 0;
    left:0;
    z-index:0;
}

.folder-shared-user {

    background:#dddddd;
    margin:.2rem;
    display:inline-block;
    padding:.3rem .5rem;
    border-radius:.5rem;
}

.folder-preview {
    width:12.5rem;
    position:absolute;
    height:12.6rem;
    left:.1rem;
    background:white;
    border-radius:.8rem;
    z-index:0;
    display: flex;
    align-items:center;
    justify-content:center;
}
.folder-preview > img
{
    width:100%;
    margin:0;
    padding:0;

}

.folder-thumbnail .folder-icon-description span,
.folder-thumbnail .folder-icon-title span {
    background: #f1f1f1;
    display:inline-block;
    padding: .1rem .8rem;
    margin: .2rem .2rem;
    border-radius: .5rem;
}

.folder-icon-title span {
    font-size: 1rem;
}

.folder-icon-description span{
    font-size: .85rem;
    color: initial;
}

.search_input, .searchbar {
    background:white;
    z-index:1;
}

.search_icon {
    z-index:1;
}

.search-placeholder {
    flex:1;
    height: 3.7rem;
}

.search-results-title {
    font-size:1.1rem;
    color:#898989;
}

.search-results-title i {
    font-size:1.1rem;
    color:#454545;
}

.search-item-first-line {
    font-weight:600;
}

.search-item-second-line {
    display:flex;
}

span.search-item-name {
    flex:1;
    color:#6a6a6a;
}

span.search-item-type{
    flex-basis:30%;
}

.folder-deselect-button-container
{
    border-left: .2rem solid #c0c0c0;
    margin-left: 1rem;
    padding-left: 1rem;
}

#weblink-content
{
    border:none;
}


.etl-carousel-item:hover > .etl-carousel-context-toggle
{
    visibility:visible;
}

.etl-carousel-context-toggle {
    position:absolute;
    bottom:.5rem;
    right:.5rem;
    height:2rem;
    width:2rem;
    visibility:hidden;
}

.etl-carousel-context-toggle div {
    background: #ffffff;
    border-radius:1rem;
    width:2rem;
    height:2rem;
    text-align:center;
    line-height:2.1rem;
    font-size:1.3rem;
    color:#525252;
}

.folder-type {
    position:absolute;
    width:2.5rem;
    height:2.5rem;
    text-align:center;
    font-size:1.2rem;
    color: #969696;
    right: 0;
    top: -.5rem;
}

.blade-folder-preview img
{
    width:100%;
}

.blade-folder-preview {
    border: .2rem solid #e8e8e8;
    padding: 1rem;
    border-radius: 1rem;
    margin-top: 1rem;
}
.folder-icon-container.details{
    display:none;
    height:unset;
    position:absolute;
    z-index:1;
    background:#e4e8ef;
    border:.2rem solid #20407d;
    width:calc(100% + .4rem);
    margin:-.2rem;
    border-radius:1rem;
    color:white;
    top: 0;
}
.folder-item.item:hover .folder-icon-container.details
{
    display:block;
}
.folder-icon-container.details .folder-icon-description
{
    color:initial;
    text-align:left;
    padding:1rem;
    height:unset;
    margin-bottom: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: unset;
    overflow: unset;
    text-overflow: unset;
    margin-top: 0rem;
    padding-top: 0;
}
.folder-icon-container.details .folder-icon-title
{
    visibility:hidden;
}
.folder-header
{
    position:absolute;
    right:0;
    width:100%;
    height: 0;
}
.folder-item.item .folder-favourite {
    position:absolute;
    left: calc(100% - 3.7rem);
    top: 0.4rem;
}
.folder-item.item:hover .folder-header
{
    z-index:2;
}