/*----------------------------------------------------------------------------------
 *TRIИITY CLOUD - FILEBROWSER TEMPLATE
 *--------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------
 * FONTAWESOME LATEST FREE from UNPKG.COM - OPENSOURCE CDN
 *--------------------------------------------------------------------------------*/
@import url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css');

/*----------------------------------------------------------------------------------
 *HEADER
 *--------------------------------------------------------------------------------*/

header {
    background:
        url(/static/img/trinity-data-logo.png) no-repeat 0.75rem center, #8800ff;
    background-size: 2.33rem, cover;
    padding: 0.5rem 0.5rem 0.5rem 5rem;
}


nav {
    width: fit-content;
    position: fixed;
    top: 4rem;
    font-size: 0.85rem;
    background: var(--background) !important;
}

header img {
    display: none !important;
}

main {
    width: calc(100% - 15em);
}

.action {
    color: #8800ff;
}

.full #focus-prompt {
	color: #8800ff;
}

/*----------------------------------------------------------------------------------
 *LOGIN
 *--------------------------------------------------------------------------------*/

#login {
    background: transparent !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#bg-login-video {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    background: black;
}

#login .input--block {
    margin-bottom: 1rem;
    display: block;
    width: 100%;
    padding: 0.33rem 1rem 0.2rem;
    border: none !important;
    border-radius: 2px;
}

#login h1 {
    margin: -1.15rem auto 1.75rem;
    display: flex;
    font-family: system-ui, sans-serif;
    color: white;
    background-image: url(/static/img/trinity-data-logo.png), none !important;
    background-size: contain;
    background-repeat: no-repeat !important;
    height: 4rem;
    padding: 0.75rem 0 0 2rem;
    font-weight: 900 !important;
    text-align: center;
    font-size: 2rem !important;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    opacity: 0.9;
}

#login form {
    box-shadow: 0px 0px 20px 0px #d7d7d738;
    background: #0000001f;
    padding: 2rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 20em;
    width: 103%;
    border-radius: 7px;
}

#login img {
    display: none !important;
}

#login .wrong, .wrong {
    background: #ff665a;
    margin: 0 auto 0.5rem;
    border-radius: 2px;
}

#login .button {
    border-radius: 4px !important;
    margin: 1.5rem auto 0;
    padding: 0.55rem 0;
    background: #8800ff !important;
    opacity: 0.75;
    font-weight: bold;
    font-size: 0.75rem;
}

#login .button:hover {
    opacity: 1 !important;
}

#logout,
#logout i {
    color: #8800ff !important;
}

/*----------------------------------------------------------------------------------
 *BUTTON & NAV
 *--------------------------------------------------------------------------------*/

.button {
    background: #8800ff !important;
	color: white;
	border-radius: 4px !important;
}

.button:hover {
    background-color: #4f2b83 !important;
	color: white;
}

.button--flat.button--grey {
    color: #6f6f6f !important;
    background: #ebebeb !important;
}

.button--flat.button--red {
    background: #ff665a !important;
	color: white;
}

.dashboard #nav ul li.active {
    border-color: #8800ff;
    color: #8800ff;
}

.dashboard #nav ul li.active:before {
    background: #8800ff;
}

.breadcrumbs {
    font-size: 0.9rem;
    height: 3.5rem;
    background: var(--background);
    border-bottom: 1px solid var(--divider);
}

.breadcrumbs a {
    transition: .1s ease-in;
    border-radius: 50%;
    padding: 0.25rem 0.5rem;
}

.breadcrumbs * {
    color: #dfdfdf !important;
}

.breadcrumbs .material-icons {
    color: #a5a5a5;
    font-size: 1.2rem;
}

header .material-icons {
    color: #ffffffdb !important;
}

button .material-icons:hover {
    color: white !important;
}

#previewer header {
	background-image: none !important;
}

#editor-container title {
	color: white;
}

#editor-container #save-button i {
    color: white;
}

#editor-container #save-button i:hover {
    color: inherit;
}

nav .action {
    color: rgb(155 155 155);
    font-size: 0.75rem;
}

nav .action i {
    position: relative;
    top: -0.1rem;
    color: #e3e3e3;
}

nav .action:hover {
    font-weight: 500 !important;
    background: none !important;
}

nav .action:hover i {
    color: #8800ff;
}

nav .action i:hover {
    color: #8800ff !important;
}

nav > .action:first-child {
    padding: 1rem 0.85rem 0.5rem;
}

nav > .action:first-child i {
    color: #fafafa !important;
    background: #8800ff;
    margin: 0 0.5rem 0 0;
    border-radius: 4px;
    padding: 0.1rem 0.2rem;
    border: 2px solid #8800ff;
    font-size: 1.25rem;
}

nav > .action:first-child i:hover,
nav > .action:first-child:hover i {
    background: #fafafa;
    color: #b157ff !important;
}

.action .counter {
    background: #ff64d5;
    border: 2px solid rgb(0 0 0);
}

.credits {
    width: auto !important;
    margin: 1rem 0 0 1rem !important;
}

p.credits:hover * {
    color: #8800ff;
    opacity: 1;
    font-weight: 900;
}

.credits span span {
    margin: 0 0.25rem;
}

.credits>span {
    opacity: 0.5;
}

p.credits {
    margin: 0.5rem 0 0 1rem !important;
}

p.credits > span:nth-child(2n) {
    display: none;
}

.vue-simple-progress {
    width: auto;
    border-radius: 5px;
}

.vue-simple-progress-bar {
    background: #8800ff !important;
    border-radius: 5px;
}

.card-action {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

/*----------------------------------------------------------------------------------
 * FILES ICONS
 *--------------------------------------------------------------------------------*/
.file-icons [data-type="text"] i:before {
	font-family: "Font Awesome 7 Free";
    content: "\F15C" !important;
    font-weight: 900;
    color: rgb(0 171 191);
}


.file-icons [data-ext=".pdf"] i:before {
    font-family: "Font Awesome 7 Free";
    content: "\F1C1";
    font-weight: 900;
    color: rgb(211 0 0);
}

.file-icons [data-ext=".docx"] i:before,
.file-icons [data-ext=".doc"] i:before {
    font-family: "Font Awesome 7 Free";
    content: "\F1C2" !important;
    font-weight: 900;
    color: #0066d3;
}

.file-icons [data-ext=".xlsx"] i:before,
.file-icons [data-ext=".xls"] i:before {
    font-family: "Font Awesome 7 Free";
    content: "\F1C3" !important;
    font-weight: 900;
    color: rgb(22 147 73);
}

.file-icons [data-ext=".pptx"] i:before,
.file-icons [data-ext=".ppt"] i:before {
    font-family: "Font Awesome 7 Free";
    content: "\F1C4" !important;
    font-weight: 900;
    color: rgb(237 111 0);
}

.file-icons [data-dir=true] i {
    color: #ffd600;
}

.file-icons [data-ext=".html"] i:before,
.file-icons [data-ext=".php"] i:before,
.file-icons [data-ext=".js"] i:before,
.file-icons [data-ext=".css"] i:before,
.file-icons [data-ext=".lua"] i:before,
.file-icons [data-ext=".lsp"] i:before,
.file-icons [data-ext=".crl"] i:before,
.file-icons [data-ext=".json"] i:before,
.file-icons [data-ext=".sql"] i:before {
	font-family: "Font Awesome 7 Free";
    content: "\F1C9" !important;
    font-weight: 900;
    color: #6088fd;
}

.file-icons [data-ext=".crl"] i:before,
.file-icons [data-ext=".md5"] i:before,
.file-icons [data-ext=".key"] i:before {
	font-family: "Font Awesome 7 Free";
    content: "\E4F0" !important;
    font-weight: 900;
    color: #7e7aff;
}

.file-icons [data-ext=".rar"] i:before,
.file-icons [data-ext=".tar"] i:before,
.file-icons [data-ext=".gz"] i:before,
.file-icons [data-ext=".bz"] i:before,
.file-icons [data-ext=".7z"] i:before,
.file-icons [data-ext=".bz2"] i:before,
.file-icons [data-ext=".cab"] i:before,
.file-icons [data-ext=".gz"] i:before,
.file-icons [data-ext=".rar"] i:before,
.file-icons [data-ext=".tar"] i:before,
.file-icons [data-ext=".tgz"] i:before,
.file-icons [data-ext=".xz"] i:before,
.file-icons [data-ext=".zst"] i:before {
	font-family: "Font Awesome 7 Free";
    content: "\F1C6" !important;
    font-weight: 900;
    color: #8b59ff;
}

.file-icons [data-ext=".zip"] i:before {
	font-family: "Font Awesome 7 Free";
    content: "\F1C6" !important;
    font-weight: 900;
    color: #00c9cb;
}

.file-icons [data-ext=".sh"] i:before,
.file-icons [data-ext=".ash"] i:before,
.file-icons [data-ext=".bash"] i:before,
.file-icons [data-ext=".apk"] i:before,
.file-icons [data-ext=".apk-new"] i:before,
.file-icons [data-ext=".ipk"] i:before,
.file-icons [data-ext=".deb"] i:before,
.file-icons [data-ext=".exe"] i:before,
.file-icons [data-ext=".dll"] i:before {
	font-family: "Font Awesome 7 Free";
    content: "\F1C9" !important;
    font-weight: 900;
    color: #2ecc71;
}

.file-icons [data-ext=".ai"] i:before,
.file-icons [data-ext=".odg"] i:before,
.file-icons [data-ext=".xcf"] i:before {
	font-family: "Font Awesome 7 Free";
    content: "\F1C5" !important;
    font-weight: 900;
    color: rgb(255 226 0);
}

.file-icons [data-ext=".ccd"] i:before,
.file-icons [data-ext=".dmg"] i:before,
.file-icons [data-ext=".iso"] i:before,
.file-icons [data-ext=".mdf"] i:before,
.file-icons [data-ext=".vdi"] i:before,
.file-icons [data-ext=".vhd"] i:before,
.file-icons [data-ext=".vmdk"] i:before,
.file-icons [data-ext=".wim"] i:before {
	font-family: "Font Awesome 7 Free";
    content: "\F574" !important;
    font-weight: 900;
    color: #b4e300;;
}

.file-icons [data-type="video"] i:before {
	font-family: "Font Awesome 7 Free";
    content: "\F1C8" !important;
    font-weight: 900;
    color: #ff3100;
}

.file-icons [data-type="audio"] i:before {
	font-family: "Font Awesome 7 Free";
    content: "\F1C7" !important;
    font-weight: 900;
    color: #8800ff;
}

#listing.list .item div:first-of-type i {
    font-size: 1.25em !important;
}

#listing .item[aria-selected=true],
#listing .item[aria-selected=true] div i,
#listing .item[aria-selected=true] div i:before {
    background: #8800ff !important;
    color: var(--iconSecondary) !important;
}

#listing #multiple-selection {
    font-weight: 900;
    background-color: #21f3b6;
}

#listing.list .item div:first-of-type img {
    border-radius: 2.5px;
}

#listing.list .item {
    width: 100%;
    margin: 0.5rem auto;
    border: none;
	border-radius: 4px;
    padding: 1em;
    border-top: 0;
}

#listing .item[aria-selected=true]:hover {
    opacity: 0.85 !important;
}

#listing.list .item:hover {
    opacity: 0.7;
    background: #f5f5f5;
}

#listing.list .item:hover i::before {
    color: grey;
}

#listing.list .item.header {
    padding: 0 0.5rem 0.5rem;
    border-bottom: 1px solid var(--divider);
}

#listing.list .name {
    font-weight: 500;
    font-size: 0.75rem;
    position: relative;
    top: 0.15rem;
}

#listing.list .item .modified time,
#listing.list .item .size {
    font-size: 0.75rem;
}

/*----------------------------------------------------------------------------------
 *DROPDOWN ICONS
 *--------------------------------------------------------------------------------*/

#dropdown button:last-child {
    color: #21f3b6 !important;
}

#dropdown button:nth-child(5n) {
    color: #8fff00 !important;
}

#dropdown button:nth-child(4n),
#dropdown button:nth-child(9) {
    color: #00ceff !important;
}

#dropdown button:nth-child(3),
#dropdown button:nth-child(8) {
    color: #ff64d5 !important;
}

#dropdown button:nth-child(2),
#dropdown button:nth-child(7) {
    color: #a864ff !important;
}

#dropdown button:first-child,
#dropdown button:nth-child(6) {
    color: #ffed64;
}

#search .boxes>div>div {
    background: #8800ff;
}

#search input {
    width: 100%;
    border: 0;
    background-color: transparent;
    padding: 0;
    z-index: 1;
    color: #42007b !important;
    font-weight: bold;
}

#search #input {
    background: rgb(0 0 0 / 18%);
    opacity: 0.5;
}

#search #input input::placeholder {
  color: white !important;
  font-weight: normal;
}

#search #input input::-ms-input-placeholder {
  color: white;
  font-weight: normal;
}

#search #input input::-ms-input-placeholder {
  color: white;
  font-weight: normal;
}

#search #input input::-webkit-input-placeholder {
  color: white;
  font-weight: normal;
}

.card.floating {
    border-radius: 4px;
}

/*----------------------------------------------------------------------------------
 *MOBILE TRIИITY CLOUD - FILEBROWSER TEMPLATE
 *--------------------------------------------------------------------------------*/

@media (max-width: 736px) {
	main {
    margin: 0 1em;
    width: calc(100% - 2em);
	}
}

@media (max-width: 1024px) {
	main {
    margin: 0 1em;
    width: calc(100% - 2em);
	}
}