﻿
.historiaMultimedia {
    /*display:block!important;*/
    position: absolute;
    z-index: 3003;
    background: rgba(54, 87, 119, 0.4);
    /*border: #028060 solid 1px;*/
    margin-top: auto;
    top: 24%;
    /*right: 10px;*/
    padding: 25px;
    border-radius: 5px;
    box-shadow: 2px 2px 13px;
    color: #e2e2e2;
    max-width: 50%;
    box-shadow: 6px 6px 11px rgba(63, 65, 66, 0.41);
    padding-top: 10px;
}

    .historiaMultimedia input {
        background: rgba(0, 0, 0, 0.52);
        color: #bfbfbf;
        border: #8098af 1px solid;
        border-radius: 7px;
    }

    .historiaMultimedia h4 {
        font-size: 20px;
        font-weight: 100;
    }

    .historiaMultimedia .input-group-addon:last-child {
        border-left: 0;
        background: rgba(8, 8, 8, 0.54);
        /* color: #fff; */
        border: 1px solid #a0a0a0;
        border-radius: 0px 7px 7px 0px;
    }

        .historiaMultimedia .input-group-addon:last-child a {
            color: #d5d2d2;
        }

table.tablaMultimedia {
    /* border: red solid 1px; */
    width: 100%;
    font-size: 14px;
    border-bottom: 1px solid;
}

    table.tablaMultimedia td {
        padding: 4px;
        border-top: 1px solid rgba(217, 230, 242, 0.54);
        padding-left: 8px;
    }

span.btn-play-multimedia {
    font-size: 27px;
    margin: 0px 10px;
    width: 6px;
    /* border: red solid; */
    cursor: pointer;
    opacity: 0.8;
}

    span.btn-play-multimedia:hover {
        opacity: 1;
    }

table.tablaMultimedia tr:hover {
    background: rgba(255, 255, 255, 0.12);
}

table.tablaMultimedia tr {
    /* border-radius: 0px 50px 50px 0px; */
    /* border: red solid; */
}

.historiaMultimedia input:focus {
    border: 1px solid;
}

.content-scroll {
    max-height: 300px;
    overflow: auto;
    overflow-x: hidden;
}

.historiaMultimedia .close {
    color: #fff;
    opacity: 0.5;
}

    .historiaMultimedia .close:hover {
        opacity: 0.8;
    }
/*efecto slider*/
#example-view-filters {
    overflow: hidden;
    position: relative;
    height: 450px;
}



#element-toggle {
    display: none;
}

#panelHistoriaMultimedia {
    position: absolute;
    right: -10000px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    display:none;
}

#element-toggle:checked ~ #panelHistoriaMultimedia {
    right: 10px;
    position: fixed;
    z-index: 3003;
    background: rgba(54, 87, 119, 0.8);
    border: #696969 solid 1px;
    margin-top: auto;
    top: 24%;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 2px 2px 13px;
    color: #fdfdfd;
    max-width: 50%;
    box-shadow: 6px 6px 11px rgba(0, 0, 0, 0.60);
    padding-top: 10px;
    display:block!important;
}

#element-toggle:checked ~ #fondoPanelMultimedia {
    z-index: 3002;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

#fondoPanelMultimedia {
    position: absolute;
    z-index: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    opacity: 0;
    background-color: rgba(6, 6, 6, 0.87);
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

span.btn.btn-verMultimedia {
    font-size: 20px;
    /* border: 1px solid; */
    /* border-radius: 50%; */
    margin-top: 5px;
}

    span.btn.btn-verMultimedia:hover {
        color: #007f5e;
        font-weight: bold;
        font-size: 22px;
        border: 1px solid rgba(0, 127, 94, 0.1);
        background: rgba(0, 127, 94, 0.05);
    }
    .float-right{
        float:right;
        margin-right:10px;
    }

    #btnVerMultimedia {
    cursor: pointer;
    float: right;
    margin: 0px;
    margin-right: 23px;
    margin-top: 14px;
    padding: 0px;
    font-size: 28px;
    color: #629bca;
}
    #btnVerMultimedia:hover {
    margin-top: 13px;
    font-size: 29px;
    color: #93b6d3;
}