/* 
Resicons: expandable labels with an icon


INDEX
- resicons' general css
- special behaviours
- resicon switch
- alignment
- resicons' icons

*/

/* resicons' general css */

.resicon {
    position: relative;
    width: 1.8rem;
    height: 1.8rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    background-color: #f8f8f8;
    border: 1px #5c6a6d solid;
}

.resicon>span, .resicon>p {
    position: absolute;
    top: -1px;
    display: none;
    z-index: 999;
    border: 1px #5c6a6d solid;
    width: auto;
    height: calc(100% + .2rem);
    font-size: 1rem;
    line-height: calc( 1.7rem - 1px);
    color: #5c6a6d;
    background-color: #f8f8f8;
    padding: 0 0.5rem;
    margin: 0;
    white-space: nowrap;
    font-weight: normal;
    text-align: left;
}

.resicon.absent {
    opacity: 0.3;
}

/* special behaviours */

.resicon.unselected {
    background-color: #cccccc;
}

.resicon.standalone, .resicon.standalone.unselected {
    background-color: #f8f8f8;
    border: none;
}

.resicon.standalone:hover, .resicon.standalone:focus {
    border: 1px #5c6a6d dotted;
}

.columnpresentation .resicon.eurlex, .columnpresentation .resicon.resicon.eurlex.unselected {
    background-color: #f8f8f8;
}

.big .resicon {
    height: 3rem;
    width: 3rem;
}

.big .resicon span, .big .resicon p {
    line-height: calc( 3rem - 2px);
}

.tab .resicon.big {
    height: 2.2rem;
    width: 2.2rem;
}

.tab .resicon.big span, .tab .resicon.big p {
    line-height: calc( 2.2rem - 2px);
}

.resicon>span.multiline {
    max-width: 25rem;
    min-width: 10rem;
    width: 25rem;
    white-space: normal;
    height: auto;
}

.resicon span strong {
    font-weight: bold;
    color: #003565;
}

@media(min-width:767px) {
    .resicon:hover span, .resicon:hover p {
        display: block;
    }
    .resicon:hover span:hover, .resicon:hover p:hover {
        display: none;
    }
}

/* resicon switch */

app-resicon-switch {
    padding-top: .6rem;
    display: block;
}

app-resicon-switch.inline-switch {
    padding-top: 0;
    margin-top: -1px;
}


.resicon-switch-holder {
    width: 4.2rem;
    padding: 0.3rem;
    border: 1px #0B76C3 solid;
    background-color: #f8f8f8;
    height: 2.6rem;
    float: left;
    margin-right: 0.5rem;
    position: relative;
    cursor: pointer;
}

.resicon-switch span {
    font-size: 1.5rem;
}

.resicon-switch-holder.unselected {
    border-color: #5c6a6d;
    background-color: #dfdfdf;
}

.resicon-switch-holder.unselected .resicon {
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
}

.resicon-switch-holder .resicon {
    position: absolute;
    top: 0.3rem;
    left: 50%;
    transition-property: left;
    transition-duration: 0.3s;
}

.resicon-switch span.switch_label {
    font-size: 1.2rem;
    line-height: 2.5rem;
}

/* alignment */

/* resicon l and r classes manages if the label is on the right or left side */

.resicon.r span, .resicon.r p {
    left: 100%;
    margin-left: -1px;
}

.resicon.pull-right {
    margin-left: 0.5rem;
}

.resicon.l span, .resicon.l p {
    right: 100%;
    margin-right: -1px;
}

/* resicons' icons */

.resicon.help {
    background-image: url("./../img/help.png");
}

.resicon.marks {
    background-image: url("./../img/marks_full.png");
}

.resicon.marksabsent {
    background-image: url("./../img/marks.png");
}

.resicon.marksasync {
    background-image: url("./../img/marks_async.png");
}

.resicon.marksdone {
    background-image: url("./../img/marks_done.png");
}

.resicon.info {
    background-image: url("./../img/info.png");
}

.resicon.edit {
    background-image: url("./../img/bg_tinymce_pristine.png");
}

.resicon.reference {
    background-image: url("./../img/reference.png");
}

.resicon.langnote {
    background-image: url("./../img/langnote.png");
}

.resicon.context {
    background-image: url("./../img/context.png");
}

.resicon.note {
    background-image: url("./../img/note.png");
}

.resicon.definition {
    background-image: url("./../img/definition.png");
}

.resicon.drag {
    background-image: url("./../img/ddhandle.png");
}

.resicon.protected {
    background-image: url("./../img/protect.png");
}

.resicon.protected.unselected {
    background-image: url("./../img/protect_no.png");
}

.resicon.public, .resicon.generic{
    background-image: url("./../img/nonpublic_no.png");
}

.resicon.public.unselected {
    background-image: url("./../img/nonpublic.png");
}

.resicon.pending {
    background-image: url("./../img/pending.png");
}

.resicon.pending.unselected {
    background-image: url("./../img/pending_no.png");
}

.resicon.confidential {
    background-image: url("./../img/confidential.png");
}

.resicon.confidential.unselected {
    background-image: url("./../img/confidential_no.png");
}

.resicon.validated {
    background-image: url("./../img/nonvalidate_no.png");
}

.resicon.validated.unselected, .resicon.generic.unselected  {
    background-image: url("./../img/nonvalidate.png");
}

.resicon.remove {
    background-image: url("./../img/remove.png");
}

.resicon.history {
    background-image: url("./../img/history.png");
}

.resicon.add {
    background-image: url("./../img/add.png");
}

.resicon.addmore {
    background-image: url("./../img/addmore.png");
}

.resicon.view {
    background-image: url("./../img/view.png");
}

.resicon.undo {
    background-image: url("./../img/undo.png");
}

.resicon.undo.unselected {
    background-image: url("./../img/undo_no.png");
}

.resicon.rollback {
    background-image: url("./../img/rollback.png");
}

.resicon.rollback.unselected {
    background-image: url("./../img/rollback_no.png");
}

.resicon.refresh {
    background-image: url("./../img/refresh.png");
}

.resicon.filters {
    background-image: url("./../img/filters.png");
}

.resicon.filters.unselected {
    background-image: url("./../img/filters_no.png");
}

.resicon.save {
    background-image: url("./../img/save.png");
}

.resicon.save.unselected {
    background-image: url("./../img/save_no.png");
}

.resicon.saveall {
    background-image: url("./../img/saveall.png");
}

.resicon.saveall.unselected {
    background-image: url("./../img/saveall_no.png");
}

.resicon.filters_no {
    background-image: url("./../img/filters_no.png");
}

.resicon.filters_no.unselected {
    background-image: url("./../img/filters.png");
}

.resicon.hide, .resicon.view.unselected {
    background-image: url("./../img/view_no.png");
}

.resicon.viewmore, .resicon.expanded {
    background-image: url("./../img/viewmore.png");
}

.resicon.hideall, .resicon.viewmore.unselected, .resicon.expanded.unselected {
    background-image: url("./../img/viewmore_no.png");
}

.resicon.anchor {
    background-image: url("./../img/anchor.png");
}

.resicon.anchor.unselected {
    background-image: url("./../img/anchor_no.png");
}

.resicon.rremove {
    background-image: url("./../img/rremove.png");
}

.resicon.discard {
    background-image: url("./../img/bg_tinymce_error.png");
}

.resicon.archive {
    background-image: url("./../img/poparrow1_normal.png");
}

.resicon.archive.unselected {
    background-image: url("./../img/marks_done.png");
    background-color: #f8f8f8;
}

.resicon.download {
    background-image: url("./../img/download.png");
}

.resicon.downloadall {
    background-image: url("./../img/downloadall.png");
}

.resicon.confirm {
    background-image: url("./../img/bg_tinymce_valid.png");
}

.resicon.confirm_forbidden {
    background-image: url("./../img/bg_tinymce_invalid.png");
}

.confidential {
    background-color: #dfdfdf;
}

.resicon.eurlex.unselected {
    background-image: url("./../img/eurlex.png");
}

.resicon.eurlex {
    background-image: url("./../img/eurlex_close.png");
}

.resicon.pre-iate.unselected {
    background-image: url("./../img/pre-iate_no.png");
}

.resicon.pre-iate {
    background-image: url("./../img/pre-iate.png");
}

.resicon.primary.unselected {
    background-image: url("./../img/primary_no.png");
}

.resicon.primary {
    background-image: url("./../img/primary.png");
}

.resicon.primary_white {
    background-image: url("./../img/primary_white.png");
}

.resicon.tools_white {
    background-image: url("./../img/tools.png");
}

.resicon.tools_white.unselected {
    background-image: url("./../img/tools_close.png");
}

.resicon.invert {
    background-image: url("./../img/invert.png");
}

.resicon.invert.unselected {
    background-image: url("./../img/invert_no.png");
}

.resicon.collapse {
    background-image: url("./../img/collapse.png");
}

.resicon.collapse.unselected, .resicon.expand {
    background-image: url("./../img/expand.png");
    background-color: #f8f8f8;
}

.resicon.change {
    background-image: url("./../img/change.png");
}

.resicon.edit {
    background-image: url("./../img/edit_close.png");
}

.resicon.edit_active {
    background-image: url("./../img/edit_open.png");
}

.resicon.edit.unselected {
    background-image: url("./../img/edit_open.png");
    background-color: #f8f8f8;
}

.resicon.lock {
    background-image: url("./../img/lock.png");
}

.resicon.lock.unselected, .resicon.unlock {
    background-image: url("./../img/lock_no.png");
}

.resicon.lock {
    background-image: url("./../img/lock.png");
}

.resicon.lock.unselected, .resicon.unlock {
    background-image: url("./../img/lock_no.png");
}

.resicon.validate {
    background-image: url("./../img/validate.png");
}



.resicon.bell {
    background-image: url("./../img/bell.png");
}

.resicon.bell.unselected {
    background-image: url("./../img/bell.png");
    background-color: #f8f8f8;
}


/* print */

@media print {
    .resicon {
        width: auto;
        background: none;
    }
    .resicon.edit, .resicon.add, .resicon.remove, .resicon.change {
        display: none;
    }
    .resicon>span, .resicon>p {
        display: inline-block;
        position: static;
    }
    .big .resicon {
        height: auto;
        width: auto;
        font-size: 1.5rem;
    }
    .big .resicon span {
        font-size: 1.5rem;
    }
}

.languagebarresicon.resicon {
    margin-bottom: .3rem;
}