/* vuejs transitions */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 1s;
}

/* .fade-leave-active below version 2.1.8 */
.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.list-enter-active,
.list-leave-active {
    transition: all 2s;
}

/* .list-leave-active below version 2.1.8 */
.list-enter,
.list-leave-to {
    opacity: 0;
    transform: translateY(30px);
}

.list-move {
    transition: transform 3s;
}

/* custom control bug fix */
.custom-control {
    margin-top: 0.875rem;
}

/* reduce empty space on small devices */
@media (max-width: 575.98px) {
    .container-fluid {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .card-header {
        padding: 0.875rem 1rem !important;
    }

    .card-body {
        padding: 1rem !important;
    }

    .card>.list-group .list-group-item {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
}

/*Space for Scrolling to the last fields*/
@media (max-width: 767.98px) {
    .layout-container {
        padding-bottom: 200px;
    }
}

/* required fields */
legend.required {
    color: #3D9AC2 !important;
    font-weight: bolder !important;
}

legend.required:after {
    content: " *";
}

/* number inputs*/
input[type=number] {
    text-align: right !important;
}

/*.text-truncate and .text-break is provided by bootstrap, hyphens are added here*/
.text-hyphens {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/*the tag must be inline-block or block with a max-width*/
.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-ellipsis * {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*all strings in div of a list-group-item are shortened with ellipsis*/
.text-ellipsis .list-group-item * {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/*all strings in div of a card are shortened with ellipsis*/
.card-text-ellipsis div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.card-actions {
    min-width: 130px;
}

/* all string in a span of a cell with class text-ellipsis are shortened with ellipsis*/
td.text-ellipsis {
    position: relative;
}

td.text-ellipsis span, td.text-ellipsis div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: absolute;
    width: 100%;
    display: inline-block;
}

td.text-ellipsis:before {
    content: "";
    display: inline-block;
}

/* all string in a table with class text-ellipsis are shortened with ellipsis*/
table.text-ellipsis tr td {
    position: relative; /*display: flex !important; --> breaks the List2 tables!!*/
}

table.text-ellipsis tr td span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: absolute;
    width: 100%;
}

table.text-ellipsis tr td:before {
    content: "";
    display: inline-block;
}

@media (max-width: 575.98px) {
    .list-group-item .multiselect,
    .list-group-item input {
        overflow: inherit;
    }

    .btn {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    td {
        /*overflow:hidden;*/
        /**Problems with dropdown buttons in tables*/
        /*white-space: nowrap;*/
        /**Problems with dropdown buttons in tables*/
        text-overflow: ellipsis;
    }

    /*stacked table customizations*/
    .default-style .table.b-table.b-table-stacked-sm>tbody>tr>[data-label]::before {
        text-align: left !important;
        padding: 0px !important;
        color: #a3a4a6 !important;
        font-weight: 400 !important;
    }

    .default-style .table.b-table.b-table-stacked-sm>tbody>tr {
        /*text-align: right;*/
        font-weight: 700;
    }

    /*
    .default-style .table.b-table.b-table-stacked-sm > tbody > tr > td{
       padding: 10px 24px !important;
    }
    */
    .table-striped tbody tr:nth-of-type(odd) {
        background-color: inherit;
    }

    .default-style .table.b-table.b-table-stacked-sm>tbody> :first-child> :first-child {
        border-top-width: 3px !important;
        border-top-color: #eeeeee !important;
    }

    .default-style .table.b-table.b-table-stacked-sm>tbody>tr> :first-child {
        border-top-width: 24px !important;
        border-top-color: #f5f5f5 !important;
        border-top-style: solid;
    }

    .default-style .table.b-table.b-table-stacked-sm>tbody>tr>td {
        padding: 0.325rem;
        vertical-align: top;
    }

    .default-style .table.b-table.b-table-stacked-sm>tbody>tr>[data-label]>div {
        width: auto !important;
        padding: 0 0 0 0 !important;
    }
}


div.level1-tabs {
    border: 0px !important;
    background: inherit !important;
}

/*logo and brand...*/
.default-style .sidenav .app-brand {
    height: 66px;
}

.material-style .sidenav .app-brand {
    height: 70px;
}

.app-brand-logo {
    display: -ms-flexbox;
    display: flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.app-brand-logo svg {
    width: 20px;
    height: 11px;
}

.app-brand-text {
    font-size: 1.1rem;
}

/*end logo and brand...*/

/*bread-crumb*/
.breadcrumb-item {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 180px;
}

@media (min-width: 360px) {
    .breadcrumb-item {
        max-width: 220px;
    }
}

@media (min-width: 576px) {
    .breadcrumb-item {
        max-width: 240px;
    }
}

@media (min-width: 768px) {
    .breadcrumb-item {
        max-width: 350px;
    }
}

@media (min-width: 992px) {
    .breadcrumb-item {
        max-width: 350px;
    }
}

@media (min-width: 1200px) {
    .breadcrumb-item {
        max-width: 400px;
    }
}

/* Modal Modifications */
.modal-slide .modal-content {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/*page actions*/
.page-bottom-actions {
    position: fixed;
    bottom: 20px;
    right: 32px;
    z-index: 2;
}

/* Pages action flying*/
@media (min-width: 576px) {
    .page-top-actions {
        z-index: 2;
    }

    .page-top-actions.right {
        position: fixed;
        top: 90px;
        right: 32px;
    }

    .page-top-actions-2.right {
        /*position: absolute;
        right: 32px;*/
    }

    .page-top-actions.left {
        /*left: 32px;*/
    }

    .page-actions {
        position: fixed;
        top: 90px;
        right: 32px;
        z-index: 2;
    }
}

@media (max-width: 575.98px) {
    .page-top-actions {}

    .page-top-actions.right {
        position: fixed;
        z-index: 2;
        bottom: 20px;
        right: 32px;
    }

    .page-top-actions.left {
        /*left: 32px;*/
    }

    .page-actions {
        position: fixed;
        bottom: 32px;
        right: 32px;
        z-index: 2;
    }

    .icon-btn-xs
    {
        width: calc(2.25276rem + 2px);
        padding: 0;
        line-height: 2.25276rem;
    }

}

.nav-bar-actions.left {
    margin-left: 0.5rem;
}
@media (min-width: 992px) {
    .nav-bar-actions.right {
        gap:0.5rem;
    }
}

@media (max-width: 991px) {
    .nav-bar-actions.right {
        position: fixed;
        z-index: 2;
        bottom: 32px;
        /*right: 32px;*/
        left: 50%;
        transform: translateX(-50%);
		gap:0.5rem;
    }
}

/*Custom List "V1" Element*/
.list-v1-element {
	background:#ffffff;
}
@media (max-width: 767px) {
	.list-v1-element:not(:last-child) {
		margin-bottom: 1rem;
	}
}

/*Vue-multiselect*/
.option__desc, .option__image {
	vertical-align: middle;
}

.option__image {
    max-height: 26px;
    max-width: 26px;
    margin-right: 10px;
}

/*
Setting a width for multiselects with buttons prevents the appended buttons from being pushed out of the b-card on small devices
Different sizes for form-col-1 and form-col-2 of CreateEdit2 and View2
*/
@media(max-width: 499) {
    .multiselect-buttons {
        width: 85% !important;
    }
}
@media(min-width: 500px) and  (max-width: 699px){
    .multiselect-buttons {
        width: 89% !important;
    }
}
@media(min-width: 700px) {
    :not(.form-col-2) .multiselect-buttons {
        width: 100% !important;
    }
}
@media(min-width: 700px) and (max-width: 1199px) {
    .form-col-2 .multiselect-buttons {
        width: 100% !important;
    }
}
@media(min-width: 1200px) and (max-width: 1699px) {
    .form-col-2 .multiselect-buttons {
        width: 85% !important;
    }
}
@media(min-width: 2200px) {
    .form-col-2 .multiselect-buttons {
        width: 100% !important;
    }
}

.h2 {
	display: block;
	font-size: 1.5em;
	margin-top: 0.83em;
	margin-bottom: 0.83em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
}

/*horizontal card-deck spacing on xs*/
@media(max-width: 575px) {
    .card-deck > .card:not(:last-child) {
        margin-right: 0.5rem;
    }
}

/*Disable the CCM19 settings button (bottom left) in the heracles app**/
.ccm-settings-summoner{
    display: none !important;
}