/*! MarketingXpress | Item View Engine */

/* items:   card, card-prime, card-lefty, card-small, card-big, card, narrow */


/* item */
.ive-item { }


/*****************
 *  CARD
 *****************/

/* item: card */
.ive-item.card { position: relative; }
.ive-item.card > .inner { position:relative; height: 260px; width: 100%; min-width: 220px; border-radius: 3px; background-color: #f3f3f3; box-shadow: 0px 0px 30px 2px #F3F3F3; /*box-shadow: 2px 2px 10px 2px #ddd;*/ }

/* item: state */
.ive-item.card.state-main-default > .inner { /*background-color: #f3f3f3;*/ }
.ive-item.card.state-main-primary > .inner { /*background-color: #ddd;*/ /*background-color: #EC632E;*/ }
.ive-item.card.state-main-secondary > .inner { /*background-color: #ddd;*/ /*background-color: #F4AA8D;*/ }
.ive-item.card .overlay-state-main { position: absolute; top: 0px; bottom: 0; left: 0; right: 0; border-radius: 3px 3px 0 0; height: auto; height:initial; opacity: 0.5; }
.ive-item.card .overlay-state-main.state-main-default { background-color:#ddd; }
.ive-item.card .overlay-state-main.state-main-primary { background-color:#ddd; }
.ive-item.card .overlay-state-main.state-main-secondary { background-color:#ddd; }
.ive-item.card .overlay-state-main.state-main-archived { background-color: lightgrey; }

/* item: back */
.ive-item.card .back { position: relative; height: 230px; text-align: center; border-radius: 3px 3px 0 0; }
.ive-item.card .back .prop-type { position: absolute; left: 15px; top:10px; }
.ive-item.card .back .prop-type.show-bottom { top: initial; bottom: 50px; }
.ive-item.card .back .prop-type > i { font-size: 20px; }
.ive-item.card .back .image-primary { height: 220px; margin-top: 5px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ive-item.card .back .image-primary > img { max-width: 80%; max-height: 80%; }
.ive-item.card .back .image-primary.full-size > img { max-width: 100% !important; max-height: 100% !important;  }
.ive-item.card .back .overlay { background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0px; bottom: 0; left: 0; right: 0; border-radius: 3px 3px 0 0; opacity: 0; }

/* item: state-focus */
.ive-item.card .prop-state-focus { position: absolute; right: 13px; bottom:10px; text-transform:uppercase; color: #FFF; padding: 5px 12px 5px 12px; border-radius: 3px; font-size:0.8em; font-family: 'bold'; }
.ive-item.card .prop-state-focus.state-focus-default { background-color: #6C6C6C; }
.ive-item.card .prop-state-focus.state-focus-primary { background-color: #9F4679; }
.ive-item.card .prop-state-focus.state-focus-secondary { background-color: #70A0A1; }

/* item: front */
.ive-item.card .front { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 0 0 3px 3px; }
.ive-item.card .front > .primary { background-color: #FFF; }
.ive-item.card .front > .secondary { position:relative; height:50px; }
.ive-item.card .front > .tertiary { position:relative; height:50px; text-align:center; }

/* item: action-primary */
.ive-item.card .front .action-primary { max-width: 80%; opacity: 0; display: inline-block; margin: 0 auto; background-color: rgba(255, 255, 255, 0.3); color: #FFF; padding: 5px 12px 5px 12px; border: 1px solid #FFF; border-radius: 3px; cursor: pointer; font-family: 'bold'; text-transform:uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.ive-item.card .front .action-primary:hover { background-color: rgba(255, 255, 255, 0.5); }

/* item: symbols */
.ive-item.card .symbols { /*position: absolute; left: 0; bottom:30px;*/ padding: 0 0 0 12px; text-align: left; opacity: 0; }
.ive-item.card .symbols.overflow { max-width: 90%; overflow: hidden; max-height: 51px; }
.ive-item.card .symbols .symbol { display:inline-block; padding: 5px 3px 0 0; margin: 0 3px 0 0; position:relative; height: 45px; box-sizing: border-box; }
.ive-item.card .symbols .symbol > .image { height: 40px; width: 40px; text-align: center; padding: 0;  }
.ive-item.card .symbols .symbol > .image > img { width: 37px; height: 37px; float: left; border-radius: 50%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; box-shadow: 2px 2px 10px 2px #505050; }
.ive-item.card .symbols .symbol > .remove { position:absolute; top: 0; right:0; cursor:pointer; opacity:0;  }
.ive-item.card .symbols .symbol > .remove > i { color: #fff; font-size:20px; text-shadow: 0px 2px 6px #000000; }
.ive-item.card .symbols .symbol:hover > .remove { opacity:1; }

/* item: info */
.ive-item.card .front .info { }
.ive-item.card .front .info > .label { margin: 0 auto; text-align: center; font-size: 1.0em; padding: 17px 0 4px 0;box-sizing:border-box; }
.ive-item.card:not(.medium) .front .info > .label {font-family: 'bold'; }
.ive-item.card .front .info > .label > .text { display:inline-flex; max-width: 80%; /*overflow: hidden; text-overflow: ellipsis; white-space: nowrap;*/ }
.ive-item.card .front .info > .label > .text > span { overflow: hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.ive-item.card .front .info .caption { text-align: center; color: #7f868c; font-size: 0.7em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ive-item.card .front .info .edit { display:inline-block; position:absolute; opacity:0; color: #39bced; cursor:pointer; opacity:0; }
.ive-item.card .front .info .edit > i { width: 30px; text-align:center; font-size: 16px; }

/* item: action-bar */
.ive-item.card .action-bar { text-align: center; padding: 15px 0 0px 0; height:0;overflow:hidden; opacity: 0; box-sizing: border-box; }
.ive-item.card .action-bar > .action { width: 40px; text-align: center; display: inline-block; cursor: pointer; position:relative; }
.ive-item.card .action-bar > .action > i { font-size: 18px; color:#8f8f8f;}
.ive-item.card .action-bar > .action:hover > i { font-size: 18px; color:#555555;}

/* item: action-bar sub */
.ive-item.card .action-bar > .action > .hover { position:absolute; z-index:1; padding: 5px 0 0 0; height:0px; opacity:0; }
.ive-item.card .action-bar > .action:hover > .hover { float:left; position:relative; height:auto; height:initial; z-index:2; opacity:1; }
.ive-item.card .action-bar > .action .hover > .actions { padding: 5px 0 5px 0; background-color:#fff; border-radius: 3px; min-width: 100px; box-shadow: 0px 0px 10px 0px #ddd; }
.ive-item.card .action-bar > .action:hover .hover > .actions {  }
.ive-item.card .actions > .action { padding: 7px 10px 7px 5px; text-align: initial; display:flex; }
.ive-item.card .actions > .action > i { width: 30px; text-align:center; font-size:16px; }
.ive-item.card .actions > .action > .label { white-space: nowrap; font-size: 0.9em; margin: 0 0 0 5px; font-family: 'bold'; }
.ive-item.card .actions > .action:hover { background-color: #eee; }
.ive-item.card .actions > .action.disabled { color:#8f8f8f; cursor:not-allowed; }
.ive-item.card .actions > .action.disabled > .label { /*cursor: auto;*/}
.ive-item.card .actions > .action.disabled:hover { background-color: initial; }

/* animated: idle */
.ive-item.card.animated .overlay-state-main { transition: opacity 0.3s ease .3s; }
.ive-item.card.animated .back .overlay { transition: all 0.3s ease .3s; }
.ive-item.card.animated .symbols { transition: all 0.3s ease 0.0s; }
.ive-item.card.animated .back .symbol > .remove { transition: all 0.2s ease 0.0s;  }
.ive-item.card.animated .back .symbol:hover > .remove { transition: all 0.2s ease 0.0s; }
.ive-item.card.animated .prop-state-focus { transition: all 0.15s ease 0.3s; }
.ive-item.card.animated .front { transition: all 0.3s ease .15s; }
.ive-item.card.animated .front .info .edit { transition: all 0.3s ease 0.0s; }
.ive-item.card.animated .action-bar { transition: all 0.3s ease 0.0s; }
.ive-item.card.animated .action-bar > .action > .hover { transition: all 0.5s ease .15s; }
.ive-item.card.animated .action-bar > .action:hover > .hover { transition: all 0.5s ease .15s; }

/* item: hover */
.ive-item.card:not(.no-hover):hover .back .overlay { opacity: 1; }
.ive-item.card:not(.no-hover):hover .front { }
.ive-item.card:not(.no-hover):hover .front .action-primary { opacity: 1; }
.ive-item.card:not(.no-hover):hover .symbols { opacity: 1; }
.ive-item.card:not(.no-hover):hover .overlay-state-main { opacity: 0; }
.ive-item.card:not(.no-hover):hover .front .info .edit { opacity: 1; }
.ive-item.card:not(.no-hover):hover .action-bar { height:45px; overflow:visible; overflow:initial; opacity: 1; }
.ive-item.card:not(.no-hover):hover .back .prop-type { color: #fff; }
.ive-item.card:not(.no-hover):hover .prop-state-focus { opacity: 0; }

/* animated: hover */
.ive-item.card.animated:not(.no-hover):hover .back .overlay { transition: opacity 0.3s ease 0.1s; }
.ive-item.card.animated:not(.no-hover):hover .symbols { transition: opacity 0.5s ease 0.2s; }
.ive-item.card.animated:not(.no-hover):hover .overlay-state-main { transition: opacity 0.3s ease 0.1s; }
.ive-item.card.animated:not(.no-hover):hover .front { transition: all 0.5s ease 0.0s;  }
.ive-item.card.animated:not(.no-hover):hover .front .info .edit { transition: opacity 0.5s ease 0.2s; }
.ive-item.card.animated:not(.no-hover):hover .action-bar { transition: height 0.3s ease 0s, opacity 0.2s ease 0.3s; }
.ive-item.card.animated:not(.no-hover):hover .back .prop-type { transition: ease .2s all; }
.ive-item.card.animated:not(.no-hover):hover .prop-state-focus { transition: ease .2s all; }
.ive-item.card.animated:not(.no-hover) .front .action-primary:hover { transition: background-color 0.5s ease; }

/* Medium card */
.ive-item.card.medium { width:160px; margin: 0 15px 30px 15px;  background-color: #fff; /*border: 1px solid #dcdcdc;*/ border-radius: 5px; /*-webkit-box-shadow: 0px 0px 3px 0px rgba(220,220,220,1); -moz-box-shadow: 0px 0px 3px 0px rgba(220,220,220,1); box-shadow: 0px 0px 3px 0px rgba(220,220,220,1); */ }
.ive-item.card.medium .info { width: 100%; }
.ive-item.card.medium .front { width:160px; position: absolute; bottom: 0; left: unset; right: unset; border-radius: 0 0 3px 3px; }
.ive-item.card.medium > .inner { height: 200px !important; width: 100%; min-width: 150px; border-radius: 6px; background-color: #f3f3f3; box-shadow: 0 0 9px 0px rgba(0,0,0,0.05); transition: ease .2s all; /*box-shadow: 2px 2px 10px 2px #ddd;*/ }
.ive-item.card.medium.inline { display: inline-block; }
.ive-item.card.medium.active > .inner { box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 1); }
.ive-item.card.medium:hover > .inner { box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.2); }
.ive-item.card.medium .back { position: relative; height: 160px; text-align: center; border-radius: 3px 3px 0 0; }
.ive-item.card.medium .back .image-primary { height: 160px; margin-top: 0px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ive-item.card.medium .back .image-primary > img { max-width: 80%; max-height: 80%; }
.ive-item.card.medium .back .overlay { background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0px; bottom: 0; left: 0; right: 0; border-radius: 3px 3px 0 0; opacity: 0; }
.ive-item.card.medium .front .info > .label { padding: 10px 0 10px 0; font-size: 13px; line-height: 16px; }
.ive-item.card.medium .front .info > .label > .text { max-width:90%; }
.ive-item.card.medium .front .info > .label > .text > span { -webkit-line-clamp: 3; }
.ive-item.card.medium .front > .primary { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.ive-item.card .card-actions, .ive-item.card-profile .card-actions { /*display: none;*/ margin: 0; padding: 0; position: absolute; top: 0; right: 0; background-color: #31383d; opacity: 0; transition: ease .2s all; border-top-right-radius: 6px; }

.ive-item.card-profile .card-checkbox { margin: 0; padding: 0; position: absolute; top: 0; left: 8px; }
.ive-item.card-profile.checkbox-on-hover .card-checkbox { display: none; }
.ive-item.card-profile.checkbox-on-hover:hover .card-checkbox { display: block; }
.ive-item.card-profile.checkbox-on-hover.active .card-checkbox { display: block; }
.ive-item.card-profile .card-checkbox .fa-square { display: inline-block; }
.ive-item.card-profile.active .card-checkbox .fa-square { display: none; }
.ive-item.card-profile .card-checkbox .fa-check-square { display: none; }
.ive-item.card-profile.active .card-checkbox .fa-check-square { display: inline-block; }

    .ive-item.card .card-checkbox {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 8px;
        left: 8px;
        background-color: white;
        font-size: 2em;
        color: black;
    }
.ive-item.card.checkbox-on-hover .card-checkbox { display: none; }
.ive-item.card.checkbox-on-hover:hover .card-checkbox { display: block; }
.ive-item.card.checkbox-on-hover.active .card-checkbox { display: block; }
.ive-item.card .card-checkbox .fa-square { display: inline-block; }
.ive-item.card.active .card-checkbox .fa-square { display: none; }
.ive-item.card .card-checkbox .fa-check-square { display: none; }
.ive-item.card.active .card-checkbox .fa-check-square { display: inline-block; }

.ive-item.card .card-actions.force-show, .ive-item.card-profile .card-actions.force-show { opacity: initial; }
.ive-item.card:hover .card-actions, .ive-item.card-profile:hover .card-actions { /*display: block;*/ opacity: 1; }
.ive-item.card .card-actions .action, .ive-item.card-profile .card-actions .action { list-style: none; padding: 7px 8px; color: #fff; display: block; cursor: pointer; text-decoration: none; font-family: Font Awesome\ 5 Pro; font-size: 13px; transition: ease .2s all; opacity: 1; }
.ive-item.card .card-actions .action:first-child, .ive-item.card-profile .card-actions .action:first-child { border-top-right-radius: 6px; }
.ive-item.card .card-actions .action:hover, .ive-item.card-profile .card-actions .action:hover { color: #fff !important; opacity: 1; background-color: #5b6770; }
.ive-item.card.medium .front .info .caption { -webkit-line-clamp: 2; font-size: 9px; max-width: 90%; margin: 0 auto; padding-bottom: 5px; box-sizing: border-box; }

.ive-item.card.move-placeholder { border:1px dashed #000; }
.ive-item.card.medium .back .prop-type { left: 8px; top: 8px; }
.ive-item.card.medium .back .prop-type.show-bottom { top: initial; bottom: 30px; }
.ive-item.card.medium .back .prop-type > i { font-size: 15px; }
.ive-item.card.medium .back .prop-type { color: black; }
.ive-item.card.medium:hover .back .prop-type { color: black; }
.ive-item.card.medium .back .prop-type.show-on-hover { opacity: 0; }
.ive-item.card.medium:hover .back .prop-type.show-on-hover { opacity: 1; }
.ive-item.card .front .info .caption-container {height: 0; display: none; } 
.ive-item.card .front .info.has-caption .caption-container { overflow: hidden; height: 0; opacity: 0; display: block; box-sizing:border-box; transition: height .2s ease 0s, opacity .2s ease .1s; box-sizing: border-box; }
.ive-item.card:not(.no-hover):hover .front .info.has-caption .caption-container { height: 35px; overflow: initial; opacity: 1; }
.ive-item.card .front .info.has-caption .caption-container .caption { padding-bottom: 0px; }

.cmsappwidget .ive-item.card { margin-left: 10px; margin-right: 10px; }
.cmsappwidget .ive-item.card.inactive { opacity:0.3; }

/* item: animations (not needed yet) */
/*@-webkit-keyframes ive {}
@-moz-keyframes ive {}
@keyframes ive-in-action-bar {
  0% { display: none; opacity: 0; }
  1% { display: block; opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}*/


/* containment */
.ive-container { 

    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;

    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;
    
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;

    justify-content: left;
}


/* containment + item */
.ive-container .ive-item { width: 220px; margin: 0 15px 20px 15px; }
.ive-container .loading-more-items { position:fixed; text-align:center; padding:5px; bottom:10px; }

/* item: responsive */
@media only screen and (min-width: 1450px) {
    .ive-item.card:not(.medium) .back .action-primary { font-size: 0.85em; padding: 6px 10px 6px 10px; }
}
/* containment + item: responsive */
@media only screen and (min-width: 1471px) and (max-width: 1680px) {
    .ive-container .ive-item { width: 210px; margin: 0 0 20px 20px; }
    .ive-container .ive-item.card:not(.medium) > .inner { min-width: 195px; }    
}
@media only screen and (max-width: 1470px) {
    .ive-container .ive-item { width: 200px; margin: 0 0 20px 15px; }
    .ive-container .ive-item.card:not(.medium) > .inner { min-width: 180px; }
}



/*****************
 *  CARD-PROFILE
 *****************/

/* item: card-profile */
.ive-item.card-profile { position: relative; font-family: "Open Sans"; }
.ive-item.card-profile > .inner { width: 100%; min-width: 300px; border-radius: 3px; }

/* item: layout */
.ive-item.card-profile > .inner .left { float: left; width: 200px; position: relative; }
.ive-item.card-profile > .inner .right { float: left; width: calc(100% - 220px); margin-left: 20px; }
.ive-item.card-profile > .inner .bottom { margin-top: 15px; }

/* item: image-primary */
.ive-item.card-profile .image-primary { height:150px; object-fit: cover; border-radius: 8px; text-align: center; background-size: cover; background-position: center center; }

/* item: info */
.ive-item.card-profile .info { }
.ive-item.card-profile .info .label { font-size:30px; color:#000; font-weight:bold; }
.ive-item.card-profile .info .description { font-size:14px; color:#777; overflow:hidden; }   

/* item: prop-state-focus (state property which has focus) */
.ive-item.card-profile .prop-state-focus { text-transform:uppercase; color: #FFF; padding: 5px 12px 5px 12px; border-radius: 7px; font-size:12px; font-weight:bold; }

/* item: state-main */
.ive-item.card-profile .prop-wrapper { margin-top:8px; position:relative; }
.ive-item.card-profile .state-main.prop-state-focus { display:inline-block; background-color: var(--color3);; max-width:125px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap }
.ive-item.card-profile .info .chevron-btn { position:absolute; top:50%; transform:translateY(-50%); right:15px; font-size:14px; }


/*********/

.ive-container.cards-cms .ive-item.card-profile { width: 500px; border-radius: 8px; color: var(--color1); background-color: #f3f3f3; cursor: pointer;  padding-top:15px; padding-bottom:15px; }
.ive-container.cards-cms .ive-item.card-profile .inner .right { width: calc(100% - 40px); }
.ive-container.cards-cms.full-width .ive-item.card-profile .inner .right { width: calc(100% - 220px); }
.ive-container.cards-cms .ive-item.card-profile .inner .right .info { width: 100%;  }
.ive-container.cards-cms .ive-item.card-profile .inner .right .info .h2 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }


@media only screen and (max-width: 600px)
{   
    .ive-container.cards-cms .ive-item.card-profile { width: 100%; min-width: 100%; max-width: 100%; border-radius:6px; }
    .ive-container.cards-cms .ive-item.card-profile > .inner { min-width: 80%; }    
    .ive-container.cards-cms .ive-item.card-profile > .inner .right .info .description { font-size:  1em; }
    .ive-item.card-profile .prop-state-focus { padding: 3px 5px 3px 5px; font-size:.8em; }
    .ive-item.card-profile .state-main.prop-state-focus { max-width:250px; }
}