@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

/*----------------------------------------------------------
GENERAL
----------------------------------------------------------*/
* {
    margin: 0;
    padding: 0;
}

.btn {
    background-color: #4885f4;
    border-radius: 3px;
    padding: 0 30px;
    line-height: 37px;
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    width: 160px;
    box-shadow: 0px 17px 10px -10px rgba(81, 117, 214, 0.4);
}

.tooltip .tooltip-inner {
    font-size: 12px;
}

@font-face {
    font-family: 'Trajan Pro';
    src: url('../fonts/Trajan-Regular.otf');
}

/*----------------------------------------
TOP NAV BAR - Now handled by master_header.php
----------------------------------------*/

.site__title {
    margin-top: 0;
    font-size: 28px;
    font-weight: 700;
    color: #252a3b;
    margin-bottom: 40px;
}

.menu__list {
    margin-top: 40px;
    margin-bottom: 0;
    list-style: none;
}

.menu__item {
    padding: 10px 0px;
}

.menu__icon path {
    fill: #8087a2;
}

.menu__icon {
    width: 13px;
    height: auto;
    margin-right: 10px;
}

.menu__link {
    font-size: 14px;
    font-weight: 600;
    color: #8087a2;
    text-decoration: none;
}

.menu__item:hover:before {
    content: '';
    height: 40px;
    position: absolute;
    left: 0;
    margin-top: -10px;
    width: 4px;
    background-color: #4885f4;
}

.menu__item:hover .menu__icon path {
    fill: #4885f4;
}

.menu__item:hover .menu__link {
    text-decoration: none;
    color: #4885f4;
}

.starage-pro {
    padding: 10px 0 10px 25px;
    position: relative;
}

.progress {
    margin: 0;
    height: 6px;
    border-radius: 3px;
    box-shadow: none;
}

.progress-bar {
    width: 25%;
    height: 6px;
    position: absolute;
    top: 10px;
    background-color: #4885f4;
    border-radius: 3px;
    box-shadow: 0px 4px 4px -1px rgba(74, 119, 242, 0.5);
}


/*----------------------------------------
CENTER CONTENT
----------------------------------------*/
.center-content {
    display: table;
    width: 100%;
    background-color: transparent;
}

/*----------------------------------------
TOP BAR removed to prevent conflict
----------------------------------------*/

.search {
    display: table-cell;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    border: none;
    box-shadow: none;
    background-image: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDYyNi41MiA2MjYuNTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYyNi41MiA2MjYuNTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNNjExLjUzMSw1ODEuNDk0TDQ3MC45NzQsNDQwLjkzN2M0MS41NzMtNDYuOTAyLDY3LjYxNC0xMDcuODUsNjcuNjE0LTE3NS4yOTJDNTM4LjU2NiwxMTkuMTU1LDQxOS4zODksMCwyNzIuODk5LDAgICBDMTI2LjQzMSwwLDcuMjU0LDExOS4xNTUsNy4yNTQsMjY1LjY0NWMwLDE0Ni40NDcsMTE5LjE3NywyNjUuNjAyLDI2NS42NDUsMjY1LjYwMmM2MC4wNDIsMCwxMTQuODE5LTIwLjc1NSwxNTkuMzctNTQuNDMyICAgbDE0MS45MzgsMTQxLjk4YzUuMTc4LDUuMTU2LDExLjkwOCw3LjcyNCwxOC42NjEsNy43MjRzMTMuNTA2LTIuNTY3LDE4LjY2Mi03LjcyNCAgIEM2MjEuODQzLDYwOC41MDUsNjIxLjg0Myw1OTEuODA3LDYxMS41MzEsNTgxLjQ5NHogTTYwLjAyNSwyNjUuNjQ1YzAtMTE3LjM2NCw5NS41MS0yMTIuODk2LDIxMi44OTYtMjEyLjg5NiAgIGMxMTcuNDA4LDAsMjEyLjg5Niw5NS41MDksMjEyLjg5NiwyMTIuODk2cy05NS40ODgsMjEyLjgzMi0yMTIuODk2LDIxMi44MzJDMTU1LjUzNSw0NzguNDc3LDYwLjAyNSwzODMuMDMxLDYwLjAyNSwyNjUuNjQ1eiIgZmlsbD0iI2IzYjRiYSIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=');
    height: 45px;
    padding: 8px 15px 8px 38px;
    background-repeat: no-repeat;
    background-position-x: 12px;
    background-position-y: center;
    background-size: 15px;
    background-color: #eef2fc;
    outline-style: none;
    box-shadow: none;
    border-color: transparent;
    font-size: 13px;
    font-weight: 500;
    border-radius: 25px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;

}

.search:focus {
    padding-left: 18px;
    background-position-x: -50px;
}

.search--width {
    width: 45%;
}

.user-box {
    display: table-cell;
    height: 100%;
    width: 20%;
    text-align: center;
}

.user__img {
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    background-image: url(https://images.pexels.com/photos/139829/pexels-photo-139829.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0px 6px 8px -1px rgba(0, 0, 0, 0.2);
    margin-right: 45px;
}

.bell-not {
    position: relative;
    margin-right: 45px;
    width: 21px;
    height: 21px;
    vertical-align: middle;
    display: inline-block;
    background-image: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNDY3LjgxOSw0MzEuODUxbC0zNi42NTEtNjEuMDU2Yy0xNi44OTYtMjguMTgxLTI1LjgzNS02MC40MzctMjUuODM1LTkzLjMxMlYyMjQgICAgYzAtODIuMzI1LTY3LjAwOC0xNDkuMzMzLTE0OS4zMzMtMTQ5LjMzM1MxMDYuNjY3LDE0MS42NzUsMTA2LjY2NywyMjR2NTMuNDgzYzAsMzIuODc1LTguOTM5LDY1LjEzMS0yNS44MzUsOTMuMzEyICAgIGwtMzYuNjUxLDYxLjA1NmMtMS45ODQsMy4yODUtMi4wMjcsNy40MDMtMC4xNDksMTAuNzMxYzEuODk5LDMuMzQ5LDUuNDYxLDUuNDE5LDkuMzAxLDUuNDE5aDQwNS4zMzMgICAgYzMuODQsMCw3LjQwMy0yLjA2OSw5LjMwMS01LjQxOUM0NjkuODQ1LDQzOS4yNTMsNDY5LjgwMyw0MzUuMTM2LDQ2Ny44MTksNDMxLjg1MXogTTcyLjE3MSw0MjYuNjY3bDI2Ljk0NC00NC45MDcgICAgQzExOC4wMTYsMzUwLjI3MiwxMjgsMzE0LjIxOSwxMjgsMjc3LjQ4M1YyMjRjMC03MC41OTIsNTcuNDA4LTEyOCwxMjgtMTI4czEyOCw1Ny40MDgsMTI4LDEyOHY1My40ODMgICAgYzAsMzYuNzM2LDkuOTg0LDcyLjc4OSwyOC44NjQsMTA0LjI3N2wyNi45NjUsNDQuOTA3SDcyLjE3MXoiIGZpbGw9IiNhNGE1YjAiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yNTYsMGMtMjMuNTMxLDAtNDIuNjY3LDE5LjEzNi00Mi42NjcsNDIuNjY3djQyLjY2N0MyMTMuMzMzLDkxLjIyMSwyMTguMTEyLDk2LDIyNCw5NnMxMC42NjctNC43NzksMTAuNjY3LTEwLjY2NyAgICBWNDIuNjY3YzAtMTEuNzc2LDkuNTU3LTIxLjMzMywyMS4zMzMtMjEuMzMzczIxLjMzMyw5LjU1NywyMS4zMzMsMjEuMzMzdjQyLjY2N0MyNzcuMzMzLDkxLjIyMSwyODIuMTEyLDk2LDI4OCw5NiAgICBzMTAuNjY3LTQuNzc5LDEwLjY2Ny0xMC42NjdWNDIuNjY3QzI5OC42NjcsMTkuMTM2LDI3OS41MzEsMCwyNTYsMHoiIGZpbGw9IiNhNGE1YjAiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zMDIuMTY1LDQzMS45MzZjLTMuMDA4LTUuMDc3LTkuNTE1LTYuNzQxLTE0LjYxMy0zLjgxOWMtNS4wOTksMi45ODctNi44MDUsOS41MzYtMy44MTksMTQuNjEzICAgIGMyLjc3Myw0LjcxNSw0LjI4OCwxMC4zNjgsNC4yODgsMTUuOTM2YzAsMTcuNjQzLTE0LjM1NywzMi0zMiwzMmMtMTcuNjQzLDAtMzItMTQuMzU3LTMyLTMyYzAtNS41NjgsMS41MTUtMTEuMjIxLDQuMjg4LTE1LjkzNiAgICBjMi45NjUtNS4wOTksMS4yNTktMTEuNjI3LTMuODE5LTE0LjYxM2MtNS4xNDEtMi45MjMtMTEuNjI3LTEuMjU5LTE0LjYxMywzLjgxOWMtNC43MTUsOC4wNjQtNy4yMTEsMTcuMzAxLTcuMjExLDI2LjczMSAgICBDMjAyLjY2Nyw0ODguMDg1LDIyNi41ODEsNTEyLDI1Niw1MTJzNTMuMzMzLTIzLjkxNSw1My4zNzYtNTMuMzMzQzMwOS4zNzYsNDQ5LjIzNywzMDYuODgsNDQwLDMwMi4xNjUsNDMxLjkzNnoiIGZpbGw9IiNhNGE1YjAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K');
    background-size: 21px;
    background-repeat: no-repeat;
}

.bell-not:before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #4885f4;
    position: absolute;
    right: 1px;
    top: 2px;
}

.popover {
    box-shadow: 0 5px 14px rgba(0, 0, 0, .3);
}

.popover-title {
    padding: 10px 100px;
    color: #fff;
    background-color: #4885f4;
    font-size: 13px;
    font-weight: 600;
    border-radius: 3px 3px 0 0;
}

.popover-content {
    padding: 0;
}

.not__list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.not__link {
    padding: 12px 16px 12px 28px;
    display: inline-block;
    width: 100%;
    position: relative;
    background-color: #f9faff;
}

.not--new .not__link {
    background-color: #e9edfe;
}

.not__text {
    font-size: 12px;
    color: #8087a2;
    font-weight: 400;
    margin: 0;
    display: inline-block;
    width: 60%;
}

.not__date {
    margin: 0;
    font-size: 11px;
    color: #aaafc6;
    position: absolute;
    top: 14px;
    right: 16px;
}

.popover.bottom>.arrow:after {
    border-bottom-color: #4885f4;
}

.popover.bottom {
    padding: 0;
    margin-top: 20px;
}

.popover.in #popover-not {
    display: block;
}

.more__info {
    background-image: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MCA2MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPgo8Zz4KCTxwYXRoIGQ9Ik0zMCwxNmM0LjQxMSwwLDgtMy41ODksOC04cy0zLjU4OS04LTgtOHMtOCwzLjU4OS04LDhTMjUuNTg5LDE2LDMwLDE2eiIgZmlsbD0iI2NiY2JkMSIvPgoJPHBhdGggZD0iTTMwLDQ0Yy00LjQxMSwwLTgsMy41ODktOCw4czMuNTg5LDgsOCw4czgtMy41ODksOC04UzM0LjQxMSw0NCwzMCw0NHoiIGZpbGw9IiNjYmNiZDEiLz4KCTxwYXRoIGQ9Ik0zMCwyMmMtNC40MTEsMC04LDMuNTg5LTgsOHMzLjU4OSw4LDgsOHM4LTMuNTg5LDgtOFMzNC40MTEsMjIsMzAsMjJ6IiBmaWxsPSIjY2JjYmQxIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==');
    width: 5px;
    height: 17px;
    display: inline-block;
    vertical-align: middle;
    background-position: center;
    background-size: 17px;
    background-repeat: no-repeat;
}

/*----------------------------------------
FILE
----------------------------------------*/
a.file.link {
    text-decoration: none;
}

.row__title {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}

.row__logo-box {
    padding-top: 15px;
    display: none;
    text-align: center;
}

.row__title-box {
    padding-left: 30px;
    margin-bottom: 40px;
}

.row--no-right {
    margin-right: 0px;
    margin-left: 0px;
}

#parent {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 20px;
    width: 100%;
}

.files-cont {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    margin-top: 40px;
}

.file {
    cursor: pointer;
    border-radius: 16px;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 24px 12px;
    position: relative;
    overflow: hidden;
}

.file::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.file:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(72, 133, 244, 0.12);
    border-color: rgba(72, 133, 244, 0.2);
}

.file__img {
    width: 64px;
    height: 64px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: transparent;
    transition: transform 0.3s ease;
    border: none;
    margin-bottom: 16px;
}

.file:hover .file__img {
    transform: scale(1.08);
}

.file__title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.4;
    text-align: center;
    letter-spacing: -0.01em;
    width: 100%;
    margin: 0;
}

/* Sidebar Compact Grid Mode */
#parent.sidebar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    gap: 6px;
    width: 100%;
}

.sidebar-mode .file {
    flex-direction: column;
    padding: 8px 4px;
    border-radius: 10px;
    min-height: 70px;
    justify-content: center;
}

.sidebar-mode .file__img {
    width: 28px;
    height: 28px;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.sidebar-mode .file__info {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.sidebar-mode .file__title {
    font-size: 9px;
    text-align: center;
    white-space: normal;
    line-height: 1.1;
    word-break: break-word;
}


/*
.file__title:before{
  width: 16px;
  position: absolute;
  left: 14px;
  top: 22px;
}
*/
.link .file__title:before {
    /*content: url('icons/link-solid.svg');*/
}

.image .file__title:before {
    content: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMxNS41OCAzMTUuNTgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxNS41OCAzMTUuNTg7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPGc+Cgk8cGF0aCBkPSJNMzEwLjU4LDMzLjMzMUg1Yy0yLjc2MSwwLTUsMi4yMzgtNSw1djIzOC45MThjMCwyLjc2MiwyLjIzOSw1LDUsNWgzMDUuNThjMi43NjMsMCw1LTIuMjM4LDUtNVYzOC4zMzEgICBDMzE1LjU4LDM1LjU2OSwzMTMuMzQzLDMzLjMzMSwzMTAuNTgsMzMuMzMxeiBNMjg1LjU4LDI0Mi4zODZsLTY4Ljc2Ni03MS4yMTRjLTAuNzYtMC43ODUtMi4wMDMtMC44MzYtMi44MjMtMC4xMTRsLTQ3LjY5NSw0MS45NzkgICBsLTYwLjk2Mi03NS4wNjFjLTAuMzk2LTAuNDktMC45NzUtMC43Ny0xLjYzLTAuNzU2Yy0wLjYzMSwwLjAxMy0xLjIyLDAuMzE2LTEuNTk3LDAuODIyTDMwLDIzNC43OTdWNjMuMzMxaDI1NS41OFYyNDIuMzg2eiIgZmlsbD0iIzQ4ODVmNCIvPgoJPHBhdGggZD0iTTIxMC4wNTksMTM1LjU1NWMxMy41MzgsMCwyNC41MjktMTAuOTgyLDI0LjUyOS0yNC41MzFjMC0xMy41NDUtMTAuOTkxLTI0LjUzMy0yNC41MjktMjQuNTMzICAgYy0xMy41NDksMC0yNC41MjgsMTAuOTg4LTI0LjUyOCwyNC41MzNDMTg1LjUzMSwxMjQuNTcyLDE5Ni41MTEsMTM1LjU1NSwyMTAuMDU5LDEzNS41NTV6IiBmaWxsPSIjNDg4NWY0Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==');
}

.directory .file__title:before {
    content: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ3NS4wODIgNDc1LjA4MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc1LjA4MiA0NzUuMDgyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTQ1Ni4yMzksMTI4LjQ3NWMtMTIuNTYtMTIuNTYyLTI3LjU5Ny0xOC44NDItNDUuMTEtMTguODQyaC0xOTEuODZ2LTkuMTM2YzAtMTcuNTExLTYuMjgzLTMyLjU0OC0xOC44NDMtNDUuMTA3ICAgYy0xMi41NjItMTIuNTYyLTI3LjYtMTguODQ2LTQ1LjExMS0xOC44NDZINjMuOTUzYy0xNy41MTUsMC0zMi41NTEsNi4yODMtNDUuMTExLDE4Ljg0NkM2LjI4LDY3Ljk0OSwwLDgyLjk4NiwwLDEwMC40OTd2Mjc0LjA4OCAgIGMwLDE3LjUwOCw2LjI4LDMyLjU0NSwxOC44NDIsNDUuMTA0YzEyLjU2MiwxMi41NjUsMjcuNiwxOC44NDksNDUuMTExLDE4Ljg0OWgzNDcuMTc1YzE3LjUxNCwwLDMyLjU1MS02LjI4Myw0NS4xMS0xOC44NDkgICBjMTIuNTY2LTEyLjU2LDE4Ljg0My0yNy41OTcsMTguODQzLTQ1LjEwNFYxNzMuNTlDNDc1LjA4MiwxNTYuMDc4LDQ2OC44MDUsMTQxLjA0Miw0NTYuMjM5LDEyOC40NzV6IiBmaWxsPSIjZmZjYTQ1Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==');
}

.music .file__title:before {
    content: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU1IDU1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NSA1NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8cGF0aCBkPSJNNTIuNjYsMC4yNDljLTAuMjE2LTAuMTg5LTAuNTAxLTAuMjc1LTAuNzg5LTAuMjQxbC0zMSw0LjAxMUMyMC4zNzMsNC4wODQsMjAsNC41MDcsMjAsNS4wMXY2LjAxN3Y0LjIxMnYyNS4zODQgIEMxOC4xNzQsMzguNDI4LDE1LjI3MywzNywxMiwzN2MtNS41MTQsMC0xMCw0LjAzNy0xMCw5czQuNDg2LDksMTAsOXMxMC00LjAzNywxMC05YzAtMC4yMzItMC4wMTktMC40Ni0wLjAzOS0wLjY4NyAgQzIxLjk3NCw0NS4yNDgsMjIsNDUuMTg5LDIyLDQ1LjEyMVYxNi4xMThsMjktMy43NTN2MTguMjU3QzQ5LjE3NCwyOC40MjgsNDYuMjczLDI3LDQzLDI3Yy01LjUxNCwwLTEwLDQuMDM3LTEwLDlzNC40ODYsOSwxMCw5ICBjNS40NjQsMCw5LjkxMy0zLjk2Niw5Ljk5My04Ljg2N2MwLTAuMDEzLDAuMDA3LTAuMDI0LDAuMDA3LTAuMDM3VjExLjIyN1Y3LjAxNlYxQzUzLDAuNzEyLDUyLjg3NiwwLjQzOCw1Mi42NiwwLjI0OXoiIGZpbGw9IiNmZjUwNDEiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==')
}

.movie .file__title:before {
    content: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDkwIDkwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA5MCA5MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGlkPSJZb3VUdWJlX194MjhfYWx0X3gyOV8iIGQ9Ik05MCwyNi45NThDOTAsMTkuNTI1LDgzLjk3OSwxMy41LDc2LjU1LDEzLjVoLTYzLjFDNi4wMjEsMTMuNSwwLDE5LjUyNSwwLDI2Ljk1OHYzNi4wODQgICBDMCw3MC40NzUsNi4wMjEsNzYuNSwxMy40NSw3Ni41aDYzLjFDODMuOTc5LDc2LjUsOTAsNzAuNDc1LDkwLDYzLjA0MlYyNi45NTh6IE0zNiw2MC4yMjVWMjYuMzNsMjUuNzAyLDE2Ljk0N0wzNiw2MC4yMjV6IiBmaWxsPSIjOTk3MmZlIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==')
}


.file__date {
    font-size: 13px;
    color: #8087a2;
    font-weight: 500;
}

.file__info {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

@media screen and (max-width:767px) {
    .top-nav-bar {
        padding: 0 20px;
    }

    .search--width {
        width: 100%;
        height: 40px;
        font-size: 11px;
    }

    .files-cont {
        padding: 0 20px;
    }

    .row__title-box {
        padding-left: 0;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .row__title {
        font-size: 20px;
    }
}

@media screen and (max-width:640px) {
    #parent {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 15px;
    }

    .file__img {
        height: 75px;
    }

    .file__title {
        font-size: 12px;
    }

    .file__info {
        padding: 10px 5px;
    }
}

@media screen and (max-width:480px) {
    #parent {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 10px;
    }
}