[Summary view] [Print] [Text view]

   1  .slide-fade-enter-active {
   2    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   3  }
   4  
   5  .slide-fade-leave-active {
   6    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   7  }
   8  
   9  .slide-fade-enter, .slide-fade-leave-to {
  10    opacity: 0;
  11    -webkit-transform: translateY(-10px);
  12            transform: translateY(-10px);
  13  }
  14  
  15  .infobar-enter-active {
  16    animation: slideOutRight 0.2s reverse;
  17  }
  18  
  19  .infobar-leave-active {
  20    -webkit-animation: slideOutRight 0.2s;
  21            animation: slideOutRight 0.2s;
  22  }
  23  
  24  html[dir=rtl] .infobar-enter-active {
  25    animation: slideOutLeft 0.2s reverse;
  26  }
  27  
  28  html[dir=rtl] .infobar-leave-active {
  29    -webkit-animation: slideOutLeft 0.2s;
  30            animation: slideOutLeft 0.2s;
  31  }
  32  
  33  @-webkit-keyframes slideOutRight {
  34    from {
  35      -webkit-transform: translate3d(0, 0, 0);
  36              transform: translate3d(0, 0, 0);
  37    }
  38    to {
  39      visibility: hidden;
  40      -webkit-transform: translate3d(100%, 0, 0);
  41              transform: translate3d(100%, 0, 0);
  42    }
  43  }
  44  
  45  @keyframes slideOutRight {
  46    from {
  47      -webkit-transform: translate3d(0, 0, 0);
  48              transform: translate3d(0, 0, 0);
  49    }
  50    to {
  51      visibility: hidden;
  52      -webkit-transform: translate3d(100%, 0, 0);
  53              transform: translate3d(100%, 0, 0);
  54    }
  55  }
  56  @-webkit-keyframes slideOutLeft {
  57    from {
  58      -webkit-transform: translateX(0);
  59              transform: translateX(0);
  60    }
  61    to {
  62      visibility: hidden;
  63      -webkit-transform: translate3d(-100%, 0, 0);
  64              transform: translate3d(-100%, 0, 0);
  65    }
  66  }
  67  @keyframes slideOutLeft {
  68    from {
  69      -webkit-transform: translateX(0);
  70              transform: translateX(0);
  71    }
  72    to {
  73      visibility: hidden;
  74      -webkit-transform: translate3d(-100%, 0, 0);
  75              transform: translate3d(-100%, 0, 0);
  76    }
  77  }
  78  .fade-in-enter-active {
  79    -webkit-animation: fadeIn 0.2s;
  80            animation: fadeIn 0.2s;
  81  }
  82  
  83  .fade-in-leave-active {
  84    animation: fadeIn 0.2s reverse;
  85  }
  86  
  87  @-webkit-keyframes fadeIn {
  88    from {
  89      opacity: 0;
  90    }
  91    to {
  92      opacity: 1;
  93    }
  94  }
  95  
  96  @keyframes fadeIn {
  97    from {
  98      opacity: 0;
  99    }
 100    to {
 101      opacity: 1;
 102    }
 103  }
 104  .media-container {
 105    display: flex;
 106    flex-wrap: wrap;
 107    margin-top: 1rem;
 108    background-color: #fff;
 109    border-radius: 0.25rem;
 110    box-shadow: 0 2px 10px -8px var(--template-bg-dark-50);
 111  }
 112  .contentpane .media-container {
 113    margin: 0 -20px;
 114    box-shadow: none;
 115  }
 116  
 117  .media-col-main-panel {
 118    flex: 0 0 83.3333%;
 119    max-width: 83.3333%;
 120  }
 121  
 122  .media-col-side-panel {
 123    flex: 0 0 16.6667%;
 124    max-width: 16.6667%;
 125  }
 126  
 127  [class^=media-col], [class*=" media-col"] {
 128    position: relative;
 129    width: 100%;
 130    min-height: 1px;
 131    padding-right: 7.5px;
 132    padding-left: 7.5px;
 133  }
 134  
 135  @media (min-width: var(--breakpoint-md)) {
 136    [class^=media-col], [class*=" media-col"] {
 137      flex: 0 0 100%;
 138      max-width: 100%;
 139    }
 140  }
 141  .media-main {
 142    position: relative;
 143    flex: 1 1 600px;
 144    min-height: 75vh;
 145  }
 146  
 147  .media-sidebar {
 148    flex: 0 0 280px;
 149    padding: 1rem;
 150  }
 151  
 152  .media-breadcrumb {
 153    display: flex;
 154    padding: 0;
 155    -webkit-margin-end: auto;
 156            margin-inline-end: auto;
 157    font-size: 0.9rem;
 158    line-height: 46px;
 159    background: transparent;
 160    -webkit-border-start: 1px solid var(--template-bg-dark-7);
 161            border-inline-start: 1px solid var(--template-bg-dark-7);
 162  }
 163  .media-breadcrumb ol {
 164    display: flex;
 165    padding: 0;
 166    margin: 0;
 167    list-style: outside none none;
 168  }
 169  .media-breadcrumb ol > li > a {
 170    cursor: pointer;
 171  }
 172  
 173  .media-breadcrumb-item {
 174    -webkit-padding-end: 8px;
 175            padding-inline-end: 8px;
 176    -webkit-padding-start: 22px;
 177            padding-inline-start: 22px;
 178    background-color: var(--template-bg-dark-3);
 179  }
 180  .media-breadcrumb-item:first-of-type {
 181    -webkit-padding-start: 16px;
 182            padding-inline-start: 16px;
 183  }
 184  .media-breadcrumb-item:last-of-type {
 185    background-color: #fff;
 186  }
 187  .media-breadcrumb-item:last-of-type::after {
 188    border-inline-start-color: #fff;
 189  }
 190  .media-breadcrumb-item:hover {
 191    color: #2a69b8;
 192  }
 193  
 194  .media-breadcrumb-item {
 195    position: relative;
 196  }
 197  .media-breadcrumb-item::before, .media-breadcrumb-item::after {
 198    position: absolute;
 199    top: 0;
 200    bottom: 0;
 201    inset-inline-start: 100%;
 202    z-index: 2;
 203    display: block;
 204    width: 0;
 205    height: 0;
 206    margin: auto;
 207    content: "" !important;
 208    border-top: 23px solid transparent;
 209    border-bottom: 23px solid transparent;
 210    -webkit-border-start: 10px solid transparent;
 211            border-inline-start: 10px solid transparent;
 212  }
 213  .media-breadcrumb-item::before {
 214    border-inline-start-color: var(--template-bg-dark-7);
 215  }
 216  .media-breadcrumb-item::after {
 217    border-inline-start-color: var(--template-bg-dark-3);
 218  }
 219  
 220  .media-browser {
 221    position: relative;
 222    min-height: 70vh;
 223    -webkit-border-start: 1px solid var(--template-bg-dark-7);
 224            border-inline-start: 1px solid var(--template-bg-dark-7);
 225    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 226  }
 227  
 228  .media-browser-grid {
 229    padding: 15px 0 15px 15px;
 230  }
 231  
 232  .media-browser-items {
 233    display: flex;
 234    flex-wrap: wrap;
 235  }
 236  
 237  .media-browser-item {
 238    position: relative;
 239    margin-right: 15px;
 240    margin-bottom: 15px;
 241    cursor: pointer;
 242    -webkit-user-select: none;
 243       -moz-user-select: none;
 244        -ms-user-select: none;
 245            user-select: none;
 246  }
 247  .media-browser-items-sm .media-browser-item {
 248    width: calc(12.5% - 15px);
 249  }
 250  .media-browser-items-md .media-browser-item {
 251    width: calc(16.666% - 15px);
 252  }
 253  .media-browser-items-lg .media-browser-item {
 254    width: calc(25% - 15px);
 255  }
 256  .media-browser-items-xl .media-browser-item {
 257    width: calc(50% - 15px);
 258  }
 259  
 260  .media-browser-item-preview {
 261    position: relative;
 262    font-size: 60px;
 263    color: #007eb7;
 264    border: 1px solid hsl(var(--hue), 35%, 95%);
 265    border-radius: 0.25rem;
 266  }
 267  .media-browser-item-preview::after {
 268    position: absolute;
 269    top: 0;
 270    right: 0;
 271    bottom: 0;
 272    left: 0;
 273    content: "";
 274    background-color: rgba(0, 0, 0, 0.5);
 275    border-radius: 0.25rem;
 276    opacity: 0;
 277    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 278  }
 279  .media-browser-item.active .media-browser-item-preview::after, .selected .media-browser-item-preview::after {
 280    opacity: 1;
 281  }
 282  
 283  .media-browser-item-info {
 284    padding: 0 2px;
 285    overflow: hidden;
 286    font-size: 0.9rem;
 287    line-height: 28px;
 288    text-overflow: ellipsis;
 289    white-space: nowrap;
 290  }
 291  
 292  .media-browser-select {
 293    position: absolute;
 294    top: 6px;
 295    left: 6px;
 296    width: calc(1.3rem * 1.54);
 297    height: calc(1.3rem * 1.54);
 298    content: "";
 299    background-color: rgba(0, 0, 0, 0.8);
 300    border: 2px solid #fff;
 301    border-radius: 0.25rem;
 302    box-shadow: inset 0 0 0 0 #fff;
 303    opacity: 0;
 304    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 305  }
 306  .media-browser-item.active .media-browser-select {
 307    opacity: 1;
 308  }
 309  .media-browser-select::after {
 310    position: absolute;
 311    top: 0;
 312    left: 0;
 313    width: calc(1.3rem * 1.3);
 314    height: calc(1.3rem * 1.3);
 315    font-family: "Font Awesome 5 Free";
 316    font-size: 1.3rem;
 317    font-weight: 900;
 318    line-height: calc(1.3rem * 1.3);
 319    text-align: center;
 320    content: "\f00c";
 321    opacity: 0;
 322    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 323    -webkit-transform: scale(0.5);
 324            transform: scale(0.5);
 325  }
 326  .selected .media-browser-select::after {
 327    opacity: 1;
 328    -webkit-transform: scale(1);
 329            transform: scale(1);
 330  }
 331  .selected .media-browser-select {
 332    color: rgba(0, 0, 0, 0.8);
 333    background-color: #fff;
 334    box-shadow: inset 0 0 0 15px #fff;
 335    opacity: 1;
 336  }
 337  
 338  .media-browser-actions {
 339    position: absolute;
 340    top: 4px;
 341    right: 0;
 342    padding: 2px;
 343    overflow: hidden;
 344  }
 345  .media-browser-actions > button {
 346    opacity: 0;
 347  }
 348  .media-browser-item.active .media-browser-actions > button {
 349    opacity: 1;
 350  }
 351  .media-browser-actions.active > button {
 352    display: none;
 353  }
 354  .media-browser-actions ul {
 355    padding: 0;
 356    margin: 0;
 357    list-style: none;
 358    -webkit-column-gap: 5px;
 359       -moz-column-gap: 5px;
 360            column-gap: 5px;
 361    -webkit-columns: 2;
 362       -moz-columns: 2;
 363            columns: 2;
 364  }
 365  
 366  .media-browser-actions-list {
 367    display: flex;
 368    flex-direction: column;
 369  }
 370  .media-browser-actions-list button, .media-browser-actions-list a {
 371    position: relative;
 372    top: 0;
 373    padding: 0;
 374    margin-bottom: 3px;
 375    visibility: hidden;
 376    background-color: transparent;
 377    border: 0;
 378    opacity: 0;
 379    transition: all 0s ease;
 380    transition-delay: 0s;
 381  }
 382  .media-browser-actions.active .media-browser-actions-list button, .media-browser-actions.active .media-browser-actions-list a {
 383    top: 0;
 384    visibility: visible;
 385    opacity: 1;
 386    transition-duration: 0.2s;
 387  }
 388  .media-browser-actions.active .media-browser-actions-list button:first-of-type, .media-browser-actions.active .media-browser-actions-list a:first-of-type {
 389    transition-delay: 0.1s;
 390  }
 391  .media-browser-actions.active .media-browser-actions-list button:nth-of-type(2), .media-browser-actions.active .media-browser-actions-list a:nth-of-type(2) {
 392    transition-delay: 0.15s;
 393  }
 394  .media-browser-actions.active .media-browser-actions-list button:nth-of-type(3), .media-browser-actions.active .media-browser-actions-list a:nth-of-type(3) {
 395    transition-delay: 0.2s;
 396  }
 397  .media-browser-actions.active .media-browser-actions-list button:nth-of-type(4), .media-browser-actions.active .media-browser-actions-list a:nth-of-type(4) {
 398    transition-delay: 0.25s;
 399  }
 400  
 401  .image-browser-action {
 402    width: calc(1.3rem * 1.55);
 403    height: calc(1.3rem * 1.55);
 404    margin-right: 4px;
 405    margin-left: 4px;
 406    color: #fff;
 407    text-align: center;
 408    cursor: pointer;
 409    background-color: rgba(0, 0, 0, 0.8);
 410    border-radius: 0.25rem;
 411  }
 412  .action-delete .image-browser-action {
 413    background-color: #d9534f;
 414  }
 415  .image-browser-action::before {
 416    font-size: 1.3rem;
 417    line-height: calc(1.3rem * 1.55);
 418  }
 419  .image-browser-action:hover {
 420    color: rgba(0, 0, 0, 0.8);
 421    background-color: #fff;
 422  }
 423  
 424  .image-background {
 425    background-color: #fff;
 426    background-image: linear-gradient(45deg, hsl(var(--hue), 20%, 97%) 25%, transparent 25%, transparent 75%, #eee 75%, hsl(var(--hue), 20%, 97%) 100%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, hsl(var(--hue), 20%, 97%) 75%, hsl(var(--hue), 20%, 97%) 100%);
 427    background-position: 0 0, 10px 10px;
 428    background-size: 20px 20px;
 429  }
 430  
 431  .image-cropped {
 432    aspect-ratio: 1/1;
 433    max-width: 100%;
 434    height: auto;
 435    -o-object-fit: contain;
 436       object-fit: contain;
 437    border-radius: 0.25rem;
 438  }
 439  
 440  .image-placeholder {
 441    display: flex;
 442    align-items: center;
 443    justify-content: center;
 444    aspect-ratio: 1/1;
 445    max-width: 100%;
 446    height: auto;
 447    color: #9d9d9d;
 448  }
 449  
 450  .file-background, .folder-background {
 451    padding-bottom: 100%;
 452    background-color: hsl(var(--hue), 20%, 97%);
 453    border: 1px solid hsl(var(--hue), 35%, 95%);
 454    border-radius: 0.25rem;
 455  }
 456  
 457  .file-icon, .folder-icon {
 458    position: absolute;
 459    top: 0;
 460    right: 0;
 461    bottom: 0;
 462    left: 0;
 463    display: flex;
 464    align-items: center;
 465    justify-content: center;
 466    color: hsl(var(--hue), 20%, 60%);
 467  }
 468  
 469  .media-dragoutline {
 470    position: absolute;
 471    top: 6px;
 472    right: 6px;
 473    bottom: 1px;
 474    left: 6px;
 475    z-index: 1040;
 476    display: flex;
 477    flex-direction: column;
 478    align-items: center;
 479    justify-content: center;
 480    visibility: hidden;
 481    content: "";
 482    background-color: rgba(245, 245, 245, 0.8);
 483    border: 3px dashed #999;
 484    border-radius: 0.25rem;
 485    opacity: 0;
 486    transition: all 0.2s ease;
 487    transition-delay: 0.2s;
 488    -webkit-transform: scale(0.6);
 489            transform: scale(0.6);
 490  }
 491  .media-dragoutline .upload-icon {
 492    font-size: 8rem;
 493    color: #1c3d5c;
 494    opacity: 0;
 495    transition: all 0.2s ease;
 496    transition-delay: 0.1s;
 497    -webkit-transform: translateY(50%);
 498            transform: translateY(50%);
 499  }
 500  .media-dragoutline p {
 501    font-size: 1.4rem;
 502    opacity: 0;
 503    transition: all 0.2s ease;
 504    transition-delay: 0s;
 505  }
 506  .media-dragoutline.active {
 507    visibility: visible;
 508    opacity: 1;
 509    transition-delay: 0s;
 510    -webkit-transform: scale(1);
 511            transform: scale(1);
 512  }
 513  .media-dragoutline.active .upload-icon {
 514    opacity: 1;
 515    -webkit-transform: translateY(0);
 516            transform: translateY(0);
 517  }
 518  .media-dragoutline.active p {
 519    opacity: 1;
 520    transition-delay: 0.2s;
 521  }
 522  
 523  .media-browser-table-head .type {
 524    margin-left: 1px;
 525  }
 526  .media-browser-table-head .type::before {
 527    display: none;
 528  }
 529  
 530  .media-browser-table .size {
 531    width: 10%;
 532    text-align: right;
 533  }
 534  .media-browser-table .dimension {
 535    width: 15%;
 536  }
 537  .media-browser-table .created {
 538    width: 15%;
 539  }
 540  .media-browser-table .modified {
 541    width: 15%;
 542  }
 543  .media-browser-table .type {
 544    position: relative;
 545    z-index: 0;
 546    width: 49px;
 547    min-width: 49px;
 548    padding: 0.6rem 0;
 549    font-size: 1.2rem;
 550    line-height: 30px;
 551    text-align: center;
 552    background-color: rgba(0, 0, 0, 0.015);
 553    border-right: 1px solid rgba(0, 0, 0, 0.03);
 554  }
 555  .media-browser-table .type::before, .media-browser-table .type::after {
 556    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 557  }
 558  .media-browser-table .type::before {
 559    font-family: "Font Awesome 5 Free";
 560    color: #656565;
 561  }
 562  .selected .media-browser-table .type::before {
 563    color: #fff;
 564  }
 565  .media-browser-table .type::after {
 566    position: absolute;
 567    top: -1px;
 568    right: 100%;
 569    bottom: -1px;
 570    left: 0;
 571    z-index: -1;
 572    content: "";
 573    background-color: #006898;
 574  }
 575  .media-browser-table .type span {
 576    visibility: hidden;
 577  }
 578  
 579  .action-toggle {
 580    padding: 0;
 581    background: transparent;
 582    border: 0;
 583  }
 584  
 585  .selected .type::before {
 586    color: #fff;
 587  }
 588  .selected .type::after {
 589    right: 0;
 590  }
 591  
 592  .type[data-type]::before {
 593    content: "\f016";
 594  }
 595  .type[data-type=""]::before {
 596    content: "\f07b";
 597  }
 598  .type[data-type=jpg i]::before, .type[data-type=png i]::before, .type[data-type=gif i]::before, .type[data-type=jpeg i]::before, .type[data-type=tiff i]::before, .type[data-type=bmp i]::before, .type[data-type=svg i]::before, .type[data-type=webp i]::before {
 599    content: "\f1c5";
 600  }
 601  .type[data-type=mov i]::before, .type[data-type=mkv i]::before, .type[data-type=mp4 i]::before, .type[data-type=mpg i]::before, .type[data-type=mpeg i]::before {
 602    content: "\f1c8";
 603  }
 604  .type[data-type=mp3 i]::before, .type[data-type=wav i]::before, .type[data-type=raw i]::before, .type[data-type=wma i]::before {
 605    content: "\f1c7";
 606  }
 607  .type[data-type=doc i]::before, .type[data-type=xls i]::before, .type[data-type=pdf i]::before, .type[data-type=txt i]::before {
 608    content: "\f1c1";
 609  }
 610  .type[data-type=html i]::before, .type[data-type=htm i]::before {
 611    content: "\f1c9";
 612  }
 613  
 614  .media-form joomla-tab > joomla-tab-element {
 615    padding: 0;
 616  }
 617  .media-form joomla-tab > joomla-tab-element[active] {
 618    display: grid;
 619  }
 620  .media-form joomla-tab-element {
 621    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 622  }
 623  .media-form joomla-tab-element > fieldset {
 624    padding: 2rem;
 625  }
 626  .media-form joomla-tab-element > fieldset.options-form {
 627    border: none;
 628  }
 629  .media-form joomla-tab-element > fieldset legend {
 630    float: left;
 631  }
 632  .media-form .cropper-modal,
 633  .media-form .cropper-bg {
 634    background: none;
 635  }
 636  .media-form .control-group .control-label {
 637    width: 100%;
 638  }
 639  .media-form .input-group-addon {
 640    font-size: 0.9rem;
 641  }
 642  .media-form .spacer hr {
 643    width: 100%;
 644  }
 645  .media-form .form-select {
 646    min-width: 100%;
 647  }
 648  
 649  .media-manager-edit {
 650    grid-column-start: 2;
 651    grid-column-end: 5;
 652    background-color: #fff;
 653    background-image: linear-gradient(45deg, hsl(var(--hue), 20%, 97%) 25%, transparent 0, transparent 75%, #fafafa 0, hsl(var(--hue), 20%, 97%)), linear-gradient(45deg, #fafafa 25%, transparent 0, transparent 75%, hsl(var(--hue), 20%, 97%) 0, hsl(var(--hue), 20%, 97%));
 654    background-position: 0 0, 10px 10px;
 655    background-size: 20px 20px;
 656    border-left: 1px solid var(--template-bg-dark-7);
 657  }
 658  .media-manager-edit > div > img {
 659    padding: 0;
 660  }
 661  .media-manager-edit,
 662  .media-manager-edit > *:not(.hidden) {
 663    display: flex;
 664    align-items: center;
 665    justify-content: center;
 666  }
 667  
 668  .tab-pane {
 669    background-color: #fafafa;
 670    border-left: 1px solid #f0f0f0;
 671  }
 672  
 673  .media-infobar {
 674    position: absolute;
 675    top: 47px;
 676    inset-inline-end: 0;
 677    bottom: 0;
 678    z-index: 4;
 679    float: none;
 680    width: 25%;
 681    padding: 15px;
 682    overflow-y: auto;
 683    background-color: var(--template-bg-dark-3);
 684    -webkit-border-start: 1px solid var(--template-bg-dark-7);
 685            border-inline-start: 1px solid var(--template-bg-dark-7);
 686  }
 687  .media-infobar h2 {
 688    -webkit-padding-before: 8px;
 689            padding-block-start: 8px;
 690    -webkit-padding-after: 8px;
 691            padding-block-end: 8px;
 692    -webkit-padding-start: 10px;
 693            padding-inline-start: 10px;
 694    -webkit-padding-end: 30px;
 695            padding-inline-end: 30px;
 696    margin: -15px -15px 15px;
 697    font-weight: normal;
 698    word-wrap: break-word;
 699    background-color: var(--template-bg-dark-5);
 700    border-bottom: 1px solid #eee;
 701  }
 702  .media-infobar dl {
 703    display: flex;
 704    flex-wrap: wrap;
 705    margin-right: -7.5px;
 706    margin-left: -7.5px;
 707  }
 708  .media-infobar dt, .media-infobar dd {
 709    position: relative;
 710    direction: ltr;
 711    width: 100%;
 712    min-height: 1px;
 713    padding-right: 7.5px;
 714    padding-left: 7.5px;
 715  }
 716  [dir=rtl] .media-infobar dt, [dir=rtl] .media-infobar dd {
 717    text-align: end;
 718  }
 719  .media-infobar dt {
 720    font-weight: normal;
 721    color: rgba(0, 0, 0, 0.54);
 722  }
 723  
 724  .infobar-close {
 725    position: absolute;
 726    top: 0;
 727    inset-inline-end: 0;
 728    z-index: 2;
 729    padding: 5px 15px;
 730    font-size: 2.6rem;
 731    line-height: 2rem;
 732    color: var(--template-bg-dark-60);
 733    text-indent: 0;
 734    text-shadow: none;
 735  }
 736  .infobar-close:hover {
 737    color: var(--template-bg-dark-40);
 738    cursor: pointer;
 739  }
 740  
 741  [class^=icon-].placeholder-icon,
 742  [class*=" icon-"].placeholder-icon,
 743  [class^=fa-].placeholder-icon,
 744  [class*=" fa-"].placeholder-icon {
 745    display: block;
 746    width: 4rem;
 747    height: 4rem;
 748    margin: 20px auto 15px;
 749    font-size: 2rem;
 750    line-height: calc(4rem - 4px);
 751    color: #ccc;
 752    border: 2px solid #ccc;
 753    border-radius: 50%;
 754  }
 755  
 756  .media-toolbar {
 757    position: sticky;
 758    top: 67px;
 759    z-index: 1;
 760    display: flex;
 761    flex-wrap: wrap;
 762    padding: 0;
 763    background-color: #fff;
 764    border-bottom: 1px solid var(--template-bg-dark-7);
 765    -webkit-border-start: 1px solid var(--template-bg-dark-7);
 766            border-inline-start: 1px solid var(--template-bg-dark-7);
 767    border-radius: 0 0.25rem 0 0;
 768    box-shadow: 0 -1px 0 0 var(--template-bg-dark-7);
 769  }
 770  .media-toolbar input {
 771    padding: 0.3rem 0.75rem;
 772  }
 773  .media-toolbar-icon {
 774    display: inline-block;
 775    width: 50px;
 776    font-size: 1.3rem;
 777    line-height: 46px;
 778    color: var(--template-bg-dark-60);
 779    text-align: center;
 780    background-color: transparent;
 781    border: 0;
 782    -webkit-border-start: 1px solid var(--template-bg-dark-7);
 783            border-inline-start: 1px solid var(--template-bg-dark-7);
 784    box-shadow: 1px 0 #fefefe inset;
 785  }
 786  .media-toolbar-icon:hover {
 787    background-color: #f0f0f0;
 788    box-shadow: none;
 789  }
 790  .media-toolbar-select-all {
 791    width: 1rem;
 792    margin: 1rem;
 793  }
 794  
 795  .media-view-icons {
 796    display: flex;
 797  }
 798  .media-view-icons .disabled span {
 799    opacity: 0.3;
 800  }
 801  .media-view-icons .disabled:hover, .media-view-icons .disabled span:hover {
 802    cursor: default;
 803  }
 804  
 805  .media-view-search-input {
 806    display: flex;
 807    align-items: center;
 808    padding: 0 5px;
 809  }
 810  
 811  .media-loader {
 812    position: absolute;
 813    right: 100%;
 814    bottom: 0;
 815    left: 0;
 816    z-index: 10;
 817    height: 2px;
 818    background-image: linear-gradient(to right, #59afff 0, #59daff 100%);
 819    -webkit-animation: 10s ease 0s normal none 1 running mediaLoader;
 820            animation: 10s ease 0s normal none 1 running mediaLoader;
 821    -webkit-animation-fill-mode: forwards;
 822            animation-fill-mode: forwards;
 823  }
 824  
 825  @-webkit-keyframes mediaLoader {
 826    from {
 827      right: 100%;
 828    }
 829    to {
 830      right: 0;
 831    }
 832  }
 833  
 834  @keyframes mediaLoader {
 835    from {
 836      right: 100%;
 837    }
 838    to {
 839      right: 0;
 840    }
 841  }
 842  ul.media-tree {
 843    padding: 0 0 5px;
 844    margin: 0;
 845    overflow-x: visible;
 846    list-style: none;
 847  }
 848  ul.media-tree ul {
 849    margin-left: 2px;
 850  }
 851  ul.media-tree:empty {
 852    display: none;
 853  }
 854  
 855  .media-disk {
 856    position: sticky;
 857    top: 75px;
 858    left: 0;
 859    display: block;
 860    margin-bottom: 10px;
 861  }
 862  
 863  .media-drive {
 864    overflow-x: auto;
 865    background-color: #fff;
 866    border: 1px solid var(--template-bg-dark-7);
 867  }
 868  .media-drive + .media-drive {
 869    border-top: 0;
 870  }
 871  
 872  .media-disk-name {
 873    padding: 4px 1px;
 874    font-size: 1rem;
 875    color: var(--template-bg-dark);
 876  }
 877  .media-disk-name:empty {
 878    display: none;
 879  }
 880  
 881  .media-tree-item {
 882    position: relative;
 883    display: block;
 884  }
 885  .media-tree-item::before {
 886    position: absolute;
 887    top: 13px;
 888    left: 0;
 889    width: 10px;
 890    height: 1px;
 891    margin: auto;
 892    content: "";
 893    background-color: var(--template-bg-dark-7);
 894  }
 895  .media-tree-item::after {
 896    position: absolute;
 897    top: 0;
 898    bottom: 0;
 899    left: 0;
 900    width: 1px;
 901    height: 100%;
 902    content: "";
 903    background-color: var(--template-bg-dark-7);
 904  }
 905  .media-tree-item:last-child::after {
 906    height: 13px;
 907  }
 908  .media-tree-item li {
 909    padding-left: 10px;
 910  }
 911  .media-tree-item li::before, .media-tree-item li::after {
 912    left: 5px;
 913  }
 914  
 915  .media-drive-name {
 916    padding: 4px 10px;
 917  }
 918  .media-drive-name::before {
 919    content: none;
 920  }
 921  .media-drive-name::after {
 922    content: none;
 923  }
 924  .media-drive-name:hover {
 925    cursor: pointer;
 926  }
 927  
 928  .media-tree-item a {
 929    display: block;
 930    padding: 0 7px;
 931    line-height: 26px;
 932    text-decoration: none;
 933    white-space: nowrap;
 934    cursor: pointer;
 935  }
 936  
 937  .media-tree-item.active > a:hover {
 938    text-decoration: none;
 939    background-color: #e1e1e1;
 940  }
 941  
 942  .media-tree-item .item-icon {
 943    display: inline-block;
 944    padding-right: 2px;
 945    font-size: 15px;
 946    line-height: normal;
 947    color: var(--template-bg-dark-60);
 948    vertical-align: middle;
 949  }
 950  
 951  .media-tree-item.active > a .item-icon {
 952    color: #2a69b8;
 953  }
 954  
 955  .item-name {
 956    display: inline-block;
 957    overflow: hidden;
 958    font-size: 0.9em;
 959    text-overflow: ellipsis;
 960    white-space: nowrap;
 961    vertical-align: middle;
 962  }
 963  
 964  .media-tree-item.active > a .item-name {
 965    font-weight: bold;
 966  }
 967  
 968  html[dir=rtl] .media-browser-table .dimension, html[dir=rtl] .media-browser-table .size {
 969    direction: ltr;
 970  }
 971  html[dir=rtl] .media-browser-table .created, html[dir=rtl] .media-browser-table .modified {
 972    direction: ltr;
 973  }
 974  html[dir=rtl] .media-drive-name {
 975    padding-right: 2px;
 976  }
 977  html[dir=rtl] .media-tree-item li::before, html[dir=rtl] .media-tree-item li::after {
 978    right: 5px;
 979    left: 0;
 980    margin: 0;
 981  }
 982  html[dir=rtl] .media-tree-item .item-icon {
 983    padding-right: 10px;
 984    padding-left: 2px;
 985  }
 986  html[dir=rtl] ul.media-tree ul {
 987    margin-right: 15px;
 988  }
 989  
 990  .media-modal-backdrop {
 991    position: fixed;
 992    top: 0;
 993    left: 0;
 994    z-index: 1049;
 995    display: table;
 996    width: 100%;
 997    height: 100%;
 998    background-color: rgba(0, 0, 0, 0.7);
 999  }
1000  .media-modal-backdrop .modal {
1001    display: flex;
1002    align-items: center;
1003    justify-content: center;
1004    -webkit-animation: 0.5s ease 0s normal none 1 running fadeIn;
1005            animation: 0.5s ease 0s normal none 1 running fadeIn;
1006  }
1007  .media-modal-backdrop .modal-body {
1008    width: auto;
1009    padding: 15px;
1010  }
1011  .media-modal-backdrop .modal-content {
1012    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
1013  }
1014  
1015  .media-preview-modal {
1016    color: #fff;
1017  }
1018  .media-preview-modal .modal {
1019    display: grid !important;
1020    align-items: center !important;
1021    justify-content: center !important;
1022  }
1023  .media-preview-modal .modal-content {
1024    display: flex;
1025    flex-direction: column;
1026    align-items: flex-start;
1027    background-color: transparent;
1028    border: 0;
1029    box-shadow: none;
1030  }
1031  .media-preview-modal .modal-header {
1032    padding: 0;
1033    border: 0;
1034  }
1035  .media-preview-modal .modal-body {
1036    padding: 0;
1037    background-color: #fff;
1038    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
1039  }
1040  .media-preview-modal .modal-body img {
1041    max-width: 100%;
1042  }
1043  .media-preview-modal .modal-footer {
1044    display: none;
1045  }
1046  
1047  .media-preview-close {
1048    position: absolute;
1049    top: -2rem;
1050    right: 0;
1051    font-size: 2rem;
1052    color: inherit;
1053    background: none;
1054    border: 0;
1055    opacity: 0.7;
1056  }
1057  .media-preview-close:hover {
1058    cursor: pointer;
1059    opacity: 1;
1060  }
1061  
1062  @media (min-width: 576px) {
1063    .media-preview-modal .modal-dialog {
1064      max-width: unset !important;
1065    }
1066  }
1067  @-webkit-keyframes fadeInUp {
1068    from {
1069      opacity: 0;
1070      transition: -webkit-transform 0.3s ease-out;
1071      transition: transform 0.3s ease-out;
1072      transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
1073      -webkit-transform: translate(0, -25%);
1074              transform: translate(0, -25%);
1075    }
1076    to {
1077      opacity: 1;
1078      -webkit-transform: none;
1079              transform: none;
1080    }
1081  }
1082  @keyframes fadeInUp {
1083    from {
1084      opacity: 0;
1085      transition: -webkit-transform 0.3s ease-out;
1086      transition: transform 0.3s ease-out;
1087      transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
1088      -webkit-transform: translate(0, -25%);
1089              transform: translate(0, -25%);
1090    }
1091    to {
1092      opacity: 1;
1093      -webkit-transform: none;
1094              transform: none;
1095    }
1096  }