:root {
    --rmih-green: #00811f;
}

body {
    position: relative;
}

.br-media-bank {
    max-width: 100% !important;
}

.br-media-bank-title {
    margin-bottom: 1.5rem;
    font-size: 24px;
}

.br-media-bank-filters-categories {
    display: flex;
    margin-bottom: 1.5rem;
}

.br-media-bank-filters-categories > div.active i {
    color: var(--rmih-green);
}

.br-media-bank-filters {
    display: inline-block;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .br-media-bank-filters {
        display: flex;
    }
}

.br-media-bank-filters > div {
    display: inline-block;
    margin-right: 1.5rem;
    font-size: 16px;
    cursor: pointer;
}

.br-media-bank-filters > div.active {
    font-weight: bold;
}

.br-media-bank .grid {
    position: relative;
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-row-gap: 16px; 
    grid-column-gap: 16px;
}

.br-media-bank .grid a {
    border-style: solid;
    border-width: 4px;
    border-color: #FFFFFF;
    transition: border-color 1s;
}

.br-media-bank .grid a:hover {
    border-color: var(--rmih-green) !important;
}

.grid-item {
    position: relative;
    display: flex; 
    align-items: center; 
    justify-content: center;
    background-color: #EFEFEF;
    background-size: cover;
    background-position: center;
}

.grid-item:not(.grid-item-image) {
    background-color: var(--rmih-green);
    background-size: contain;
    background-repeat: no-repeat;
}

.grid-item .image {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.grid-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s;
}

.br-media-bank .grid a:hover .image img {
    transform: scale(1.1);
}

.grid-item .video {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.grid-item .video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Download button */

.grid-item .download {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 35px;
    height: 35px;
    background-color: #000000;
    cursor: pointer;
    transition: all 0.25s;
    z-index: 1;
}

.grid-item .download:hover {
    background-color: #00811f;
}

.grid-item .download::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-size: 21px 21px;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.grid-item[data-selected=false] .download::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23FFFFFF" d="M160 576L128 576L128 512L512 512L512 576L160 576zM342.6 438.6L320 461.2L297.4 438.6L169.4 310.6L146.8 288L192.1 242.7C198.7 249.3 230.7 281.3 288.1 338.7L288.1 64L352.1 64L352.1 338.7C409.5 281.3 441.5 249.3 448.1 242.7L493.4 288L470.8 310.6L342.8 438.6z"/></svg>');
}

.grid-item[data-selected=true] .download::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23FFFFFF" d="M557 152.9L538.2 178.8L282.2 530.8L260.2 561.1C259.5 560.4 208 508.9 105.7 406.6L83 384L128.3 338.7C130.2 340.6 171.6 382 252.4 462.8L486.4 141.1L505.2 115.2L557 152.8z"/></svg>');
}

.grid-item .download:hover::before {
    /*background-size: 24px 24px;*/
}

/* Count button */

.grid-item .count {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0.5rem;
    right: 0.5rem;
    width: 60px;
    height: 35px;
    background-color: #000000;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.25s;
    z-index: 1;
}

/* Type button */

.grid-item .type {
    position: absolute;
    top: calc(0.5rem + 35px + 0.5rem);
    right: 0.5rem;
    width: 35px;
    height: 35px;
    background-color: #000000;
    z-index: 1;
}

.grid-item .type::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-size: 21px 21px;
    background-position: center;
    background-repeat: no-repeat;
}

.grid-item .type.type-audio::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23FFFFFF" d="M64 416L160 416L352 568L352 72L160 224L64 224L64 416zM414.3 282.7C425.1 291.6 432 305 432 320C432 335 425.1 348.4 414.3 357.3L404.9 364.9L433.7 403.3L444.6 394.5C466.1 376.9 480 350.1 480 320C480 289.9 466.1 263.1 444.6 245.5L433.7 236.7L404.9 275.1L414.3 282.7zM474.8 208.2C507.3 234.7 528 274.9 528 320C528 365.1 507.3 405.3 474.8 431.8L462.5 441.8L491.3 480.2L505 469C548.2 433.8 575.9 380.1 575.9 320C575.9 259.9 548.2 206.2 505 171L491.3 159.8L462.5 198.2L474.8 208.2z"/></svg>');
}

.grid-item .type.type-document::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23FFFFFF" d="M176 200L176 144L296 144L296 496L232 496C218.7 496 208 506.7 208 520C208 533.3 218.7 544 232 544L408 544C421.3 544 432 533.3 432 520C432 506.7 421.3 496 408 496L344 496L344 144L464 144L464 200C464 213.3 474.7 224 488 224C501.3 224 512 213.3 512 200L512 136C512 113.9 494.1 96 472 96L168 96C145.9 96 128 113.9 128 136L128 200C128 213.3 138.7 224 152 224C165.3 224 176 213.3 176 200z"/></svg>');
}

.grid-item .type.type-video::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23FFFFFF" d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM448 320L240 448L240 192L448 320z"/></svg>');
}

/* Delete button */

.grid-item .delete {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 35px;
    height: 35px;
    background-color: #000000;
    cursor: pointer;
    box-sizing: border-box;
}

.grid-item .delete::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23FFFFFF" d="M182.9 137.4L160.3 114.7L115 160L137.6 182.6L275 320L137.6 457.4L115 480L160.3 525.3L182.9 502.6L320.3 365.3L457.6 502.6L480.3 525.3L525.5 480L502.9 457.4L365.5 320L502.9 182.6L525.5 160L480.3 114.7L457.6 137.4L320.3 274.7L182.9 137.4z"/></svg>');
    background-size: 21px 21px;
    background-position: center;
    background-repeat: no-repeat;
}

.br-media-bank.br-media-bank-selection .download::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23FFFFFF" d="M182.9 137.4L160.3 114.7L115 160L137.6 182.6L275 320L137.6 457.4L115 480L160.3 525.3L182.9 502.6L320.3 365.3L457.6 502.6L480.3 525.3L525.5 480L502.9 457.4L365.5 320L502.9 182.6L525.5 160L480.3 114.7L457.6 137.4L320.3 274.7L182.9 137.4z"/></svg>');
    background-size: 21px 21px;
    background-position: center;
    background-repeat: no-repeat;
}

.grid-item:before {
    content: "";
    /*padding-bottom: 56.25%;*/
    padding-bottom: 66.67%;
}

.grid-item video {
    max-width: 100%;
    height: auto;
}

.grid-item .desc {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem;
    color: #FFFFFF;
    z-index: 1;
}

.more {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}


/* Downloads selection */

.br-media-bank.br-media-bank-selection {
    position: fixed;
    width: 100%;
    left: 0;
    height: 0;
    bottom: 0;
    z-index: 9997;
    transition: all 0.5s 0.1s;
    background-color: #00811f;
}

.br-media-bank.br-media-bank-selection.br-media-bank-selection-show {
    height: 198px;
}

@media (min-width: 768px) {
    .br-media-bank.br-media-bank-selection.br-media-bank-selection-show {
        height: 197px;
    }
}

@media (min-width: 992px) {
    .br-media-bank.br-media-bank-selection.br-media-bank-selection-show {
        height: 104px;
    }
}


.br-media-bank.br-media-bank-selection.br-media-bank-selection-show.br-media-bank-selection-show-list {
    height: 316px;
}

@media (min-width: 767px) {
    .br-media-bank.br-media-bank-selection.br-media-bank-selection-show.br-media-bank-selection-show-list {
        height: 365px;
    }
}

@media (min-width: 992px) {
    .br-media-bank.br-media-bank-selection.br-media-bank-selection-show.br-media-bank-selection-show-list {
        height: 270px;
    }
}

.br-media-bank.br-media-bank-selection .selection-info {
    height: 100%;
    box-sizing: border-box;
    padding: 1rem 1rem;
}

@media (min-width: 768px) {
    .br-media-bank.br-media-bank-selection .selection-info {
        padding: 2rem 1rem;
    }
}


@media (min-width: 992px) {

    .br-media-bank.br-media-bank-selection .selection-info {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 104px;
    }
}

.br-media-bank.br-media-bank-selection .selection-info .selection-text {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: #000000;
}

@media (min-width: 768px) {
    .br-media-bank.br-media-bank-selection .selection-info .selection-text {
        margin-right: 2rem;
        font-size: 24px;
    }
}

@media (max-width: 991px) {

    .br-media-bank.br-media-bank-selection .selection-info .selection-text {
        margin-bottom: 1rem;
    }
}

.br-media-bank.br-media-bank-selection .selection-info .selection-count {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFFFFF;
}

@media (min-width: 768px) {
    .br-media-bank.br-media-bank-selection .selection-info .selection-count {
        font-size: 24px;
    }
}

@media (max-width: 1199px) {
    .br-media-bank.br-media-bank-selection .selection-info .selection-count {
        display: block;
    }
}


.br-media-bank.br-media-bank-selection .selection-buttons {
    display: block;
}

@media (min-width: 768px) {
    .br-media-bank.br-media-bank-selection .selection-buttons {
        display: flex;
    }
}

.br-media-bank.br-media-bank-selection .selection-info .selection-download {
    margin-bottom: 1rem;
    margin-right: 0;
    padding: 0.75rem 2rem;
    font-size: 16px;
    text-transform: uppercase;
    color: #FFFFFF;
    background-color: #000000;
    cursor: pointer;
    transition: all 0.5s;
}

@media (min-width: 768px) {
    .br-media-bank.br-media-bank-selection .selection-info .selection-download {
        margin-bottom: 0;
        margin-right: 1rem;
        padding: 1rem 2rem;
        font-size: 20px;
    }
}

.br-media-bank.br-media-bank-selection .selection-info .selection-download:hover {
    color: #000000;
    background-color: #FFFFFF;
}

.br-media-bank.br-media-bank-selection .selection-info .selection-showhide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    font-size: 16px;
    text-transform: uppercase;
    color: #FFFFFF;
    background-color: #000000;
    cursor: pointer;
    transition: all 0.5s;
}

@media (min-width: 768px) {
    .br-media-bank.br-media-bank-selection .selection-info .selection-showhide {
        justify-content: space-between;
        padding: 1rem 2rem;
        font-size: 20px;
    }
}

.br-media-bank.br-media-bank-selection .selection-info .selection-showhide i {
    padding-left: 1rem;
}

.br-media-bank.br-media-bank-selection .selection-info .selection-showhide:hover {
    color: #000000;
    background-color: #FFFFFF;
}


.br-media-bank.br-media-bank-selection .grid  {
    display: block;
}

.br-media-bank.br-media-bank-selection .grid-item {
    float: left;
    width: 150px;
    max-width: 150px;
    margin-right: 1rem;
    border: none;
}

@media (min-width: 768px) {
    .br-media-bank.br-media-bank-selection .grid-item {
        width: 200px;
        max-width: 200px;
    }
}

.br-media-bank.br-media-bank-selection .selection-list > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0rem 1rem 1rem 1rem;
    background-color: #00811f;
    overflow-x: auto;
}

@media (min-width: 768px) {
    .br-media-bank.br-media-bank-selection .selection-list > div {
        padding: 0rem 1rem 2rem 1rem;
    }
}

.br-media-bank.br-media-bank-selection .selection-list > div .grid-item {
    flex-shrink: 0;
}


.br-media-bank.br-media-bank-selection .selection-list.show {
    display: flex;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-dialog {
    width: auto;
    max-width: 500px;
    padding: 1rem;
    background-color: #FFFFFF;
}

.modal-backdrop {
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 9998; 
}



#br-media-bank-form {}

#br-media-bank-form a {
    color: inherit;
    text-decoration: underline;
}

.form-group {
    margin-bottom: 1rem;;
}

.form-group label {
    margin-bottom: 0.5rem;
}

.form-group input {
    margin: 0rem;
}

#br-media-bank-form input[type=text],
#br-media-bank-form input[type=email] {
    width: 100%;
    border: solid 1px #CCCCCC;
    border-radius: 5px;
}

#br-media-bank-form input[type=checkbox] {
    float: left;
    margin-top: 0.5rem;
    border: solid 1px #CCCCCC;
}

#br-media-bank-form input[type=checkbox] + label {
    display: block;
    margin-left: 1.5rem;
}

#br-media-bank-form input:focus, 
#br-media-bank-form select:focus, 
#br-media-bank-form textarea:focus {
    border: solid 1px #007bff;
    outline: 4px solid #007bff50;
}

#br-media-bank-form .form-group.error {}

#br-media-bank-form .form-group.error label {
    color: #FF0000;
}

#br-media-bank-form .form-group.error input,
#br-media-bank-form .form-group.error select,
#br-media-bank-form .form-group.error textarea {
    border: solid 1px #FF0000;
}

#br-media-bank-form .form-group.error input:focus,
#br-media-bank-form .form-group.error select:focus,
#br-media-bank-form .form-group.error textarea :focus{
    outline: 4px solid #FF000050;
}

.form-error {
    color: #FF0000;
}


/* Add to downloads button */

.br-media-bank-button-add-to-downloads {
    display: block;
    width: 58px;
    height: 58px;
    background-color: #000000;
    cursor: pointer;
    transition: all 0.25s;
    z-index: 1;
}

.br-media-bank-button-add-to-downloads:hover {
    background-color: #00811f;
}

.br-media-bank-button-add-to-downloads::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-size: 28px 28px;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.br-media-bank-button-add-to-downloads[data-selected=false]::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23FFFFFF" d="M160 576L128 576L128 512L512 512L512 576L160 576zM342.6 438.6L320 461.2L297.4 438.6L169.4 310.6L146.8 288L192.1 242.7C198.7 249.3 230.7 281.3 288.1 338.7L288.1 64L352.1 64L352.1 338.7C409.5 281.3 441.5 249.3 448.1 242.7L493.4 288L470.8 310.6L342.8 438.6z"/></svg>');
}

.br-media-bank-button-add-to-downloads[data-selected=true]::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23FFFFFF" d="M557 152.9L538.2 178.8L282.2 530.8L260.2 561.1C259.5 560.4 208 508.9 105.7 406.6L83 384L128.3 338.7C130.2 340.6 171.6 382 252.4 462.8L486.4 141.1L505.2 115.2L557 152.8z"/></svg>');
}