/* to turn into blue underlined link */
.link-blue {
    color: #2c8ef8 !important;
}
.link-blue:hover {
    color: #0768d1 !important;
    text-decoration: underline !important;
}

.link-white {
    color: white !important;
}
.link-white:hover {
    color: whitesmoke !important;
    text-decoration: underline !important;
}

/* adds hover underline, without adjusting color */
.link-text:hover {
    text-decoration: underline !important;
}

.text-indigo {
    color: #727cf5 !important;
}

.text-gray {
    color: var(--gray) !important;
}

.text-decoration-underline {
    text-decoration: underline !important;
}

/*
    Replicates the same padding that we have from
    table.table td, table.table th {
        padding-top: 1.1rem;
        padding-bottom: 1rem;
    }
    .table td, .table th {
        padding: .75rem;
    }
    onto the a element

    same for table-sm
    table.table-sm td, table.table-sm th {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }
    .table-sm td, .table-sm th {
        padding: .3rem;
    }
*/
table.table th.td-link,
table.table td.td-link,
table.table-sm th.td-link,
table.table-sm td.td-link {
    padding: 0
}

.table th.td-link,
.table td.td-link,
.table-sm th.td-link,
.table-sm td.td-link {
    padding: 0
}

.table th.td-link > a,
.table td.td-link > a {
    padding-top: 1.1rem;
    padding-bottom: 1rem;
    padding-left: .75rem;
    padding-right: .75rem;
}

.table-sm th.td-link > a,
.table-sm td.td-link > a {
    padding-top: .6rem;
    padding-bottom: .6rem;
    padding-left: .3rem;
    padding-right: .3rem;
}

.table th.td-link > a,
.table td.td-link > a,
.table-sm th.td-link > a,
.table-sm th.td-link > a {
    display: block; /* make it fill the whole space */
}

.table th.td-link > a:empty:after,
.table td.td-link > a:empty:after,
.table-sm th.td-link > a:empty:after,
.table-sm td.td-link > a:empty:after {
    content: "\200b"; /* force empty link to have height */
}

/* for applying to the tr level */
table.table tr.td-link th,
table.table tr.td-link td,
table.table-sm tr.td-link th,
table.table-sm tr.td-link td {
    padding: 0
}

.table tr.td-link th,
.table tr.td-link td,
.table-sm tr.td-link th,
.table-sm tr.td-link td {
    padding: 0
}

.table tr.td-link th > a,
.table tr.td-link td > a {
    padding-top: 1.1rem;
    padding-bottom: 1rem;
    padding-left: .75rem;
    padding-right: .75rem;
}

.table-sm tr.td-link th > a,
.table-sm tr.td-link td > a {
    padding-top: .6rem;
    padding-bottom: .6rem;
    padding-left: .3rem;
    padding-right: .3rem;
}

.table tr.td-link th > a,
.table tr.td-link td > a,
.table-sm tr.td-link th > a,
.table-sm tr.td-link td > a {
    display: block; /* make it fill the whole space */
}

.table tr.td-link th > a:empty:after,
.table tr.td-link td > a:empty:after {
    content: "\200b"; /* force empty link to have height */
}

/**
    For usage on td where we want to fit the contained button
    <td>
        <button>
    </td>
 */
.td-button-shrink {
    width: 1%;
    white-space: nowrap;
}

.td-button-shrink button {
    white-space: nowrap;
}

/**
    utility class
 */
.cursor-pointer {
    cursor: pointer;
}


/**
    to go with font-awesome icons
    fa, fa-lg, fa-2x
    also set up to work well with rounded X
 */
.btn-icon {
    padding: .1rem .45rem
}
.btn-icon-lg {
    padding: .25rem .5rem;
}
.btn-icon-2x {
    padding: .25rem .55rem;
}

/**
    floating icons in the bottom right corner
    looks best with fa-lg
 */
section.floating-actions {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 110;
}
section.floating-actions.vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
}
section.floating-actions .btn {
    margin: .5rem;
}
section.floating-actions .btn-floating {
    padding: 0;
    border-radius: 50%;
    margin: .5rem;
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
}
section.floating-actions .btn-floating:hover {
    box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
}
section.floating-actions .btn-floating.btn-lg {
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
}
/** copied from fa-lg */
section.floating-actions .btn-floating i {
    font-size: 1.33333em;
    line-height: .75em;
    vertical-align: -.0667em;
}

/**
    also recommended to add px-lg-5 to match that of .container-fluid on farmwise.html
 */
section.floating-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1038; /* right under the z-index of a dropdown (1039) */
    padding-top: 0;
    margin-left: 260px; /* from .content-page from left-menu */
}


/**
    a la overflow-auto and overflow-hidden, we add overflow-ellipsis
    sets content to a maximum width in rem (indicated by trailing number)
    and displays ellipsis
 */
.overflow-ellipsis-10 {
    max-width: 10rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


/**
    a la mw-100
 */
.mw-50 {
    max-width: 50%;
}

/**
    since max-width has taken the shortcut mw, we use the slightly more explicit minw
 */
.minw-100 {
    min-width: 100%;
}



/** doubles from mb-5, at 3rem */
.mb-6 {
    margin-bottom: 6rem !important;
}

/** but then continues on linearly here */
.mb-7 {
    margin-bottom: 7rem !important;
}

.mb-8 {
    margin-bottom: 8rem !important;
}

.mb-9 {
    margin-bottom: 9rem !important;
}

.mb-10 {
    margin-bottom: 10rem !important;
}

.text-outline-black {
    text-shadow: 1px 1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    -1px -1px 0 #000;
}

.text-outline-white {
    text-shadow: 1px 1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    -1px -1px 0 #fff;
}

.white-space-pre {
    white-space: pre-line;
}



/** allow p class to apply to tr, to apply to its td's */

tr.p-0 td {
    padding: 0;
}

td.pt-0 td,
td.py-0 td {
    padding-top: 0;
}

td.pr-0 td,
tr.px-0 td {
    padding-right: 0;
}

tr.pb-0 td,
tr.py-0 td {
    padding-bottom: 0;
}

tr.pl-0 td,
tr.px-0 td {
    padding-left: 0;
}

tr.p-1 td {
    padding: 0.25rem;
}

tr.pt-1 td,
tr.py-1 td {
    padding-top: 0.25rem;
}

tr.pr-1 td,
tr.px-1 td {
    padding-right: 0.25rem;
}

tr.pb-1 td,
tr.py-1 td {
    padding-bottom: 0.25rem;
}

tr.pl-1 td,
tr.px-1 td {
    padding-left: 0.25rem;
}

tr.p-2 td {
    padding: 0.5rem;
}

tr.pt-2 td,
tr.py-2 td {
    padding-top: 0.5rem;
}

tr.pr-2 td,
tr.px-2 td {
    padding-right: 0.5rem;
}

tr.pb-2 td,
tr.py-2 td {
    padding-bottom: 0.5rem;
}

tr.pl-2 td,
tr.px-2 td {
    padding-left: 0.5rem;
}

tr.p-3 td {
    padding: 1rem;
}

tr.pt-3 td,
tr.py-3 td {
    padding-top: 1rem;
}

tr.pr-3 td,
tr.px-3 td {
    padding-right: 1rem;
}

tr.pb-3 td,
tr.py-3 td {
    padding-bottom: 1rem;
}

tr.pl-3 td,
tr.px-3 td {
    padding-left: 1rem;
}

tr.p-4 td {
    padding: 1.5rem;
}

tr.pt-4 td,
tr.py-4 td {
    padding-top: 1.5rem;
}

tr.pr-4 td,
tr.px-4 td {
    padding-right: 1.5rem;
}

tr.pb-4 td,
tr.py-4 td {
    padding-bottom: 1.5rem;
}

tr.pl-4 td,
tr.px-4 td {
    padding-left: 1.5rem;
}

tr.p-5 td {
    padding: 3rem;
}

tr.pt-5 td,
tr.py-5 td {
    padding-top: 3rem;
}

tr.pr-5 td,
tr.px-5 td {
    padding-right: 3rem;
}

tr.pb-5 td,
tr.py-5 td {
    padding-bottom: 3rem;
}

tr.pl-5 td,
tr.px-5 td {
    padding-left: 3rem;
}




.absolute-top-left {
    position: absolute;
    top: 0;
    left: 0;
}

.absolute-top-right {
    position: absolute;
    top: 0;
    right: 0;
}

.absolute-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
}

.absolute-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

.absolute-center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/** for progress-bar-indeterminate */
.progress {
    position: relative;
}

.progress-bar-indeterminate:before {
    content: "";
    position: absolute;
    background: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
.progress-bar-indeterminate:after {
    content: "";
    position: absolute;
    background: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s; }

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%; }
    60% {
        left: 100%;
        right: -90%; }
    100% {
        left: 100%;
        right: -90%; } }

/**
    super-slimmed down version of our own bootstrap-multiselect.css
 */
.multiselect-native-select .multiselect-all {
    border-bottom: 1px solid #e9ecef;
}
select[data-provide="multiselect"] {
    display: none;
}
.w-100 .multiselect-native-select .btn-group {
    width: 100%;
}
.multiselect-native-select .multiselect {
    text-align: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
}
.multiselect-native-select .multiselect-container {
    min-width: 100%;
}

.progress-xs {
    height: 2px;
}


.flex-grow-2 {
    flex-grow: 2;
}

.flex-grow-3 {
    flex-grow: 3;
}

.flex-grow-4 {
    flex-grow: 4;
}

.flex-grow-5 {
    flex-grow: 5;
}


.border-2 {
    border-width: 2px !important;
}

.border-3 {
    border-width: 3px !important;
}

.font-normal {
    font-size: 1rem;
}

.font-small {
    font-size: .9rem;
}

.font-smaller {
    font-size: .8rem;
}

.font-weight-normal {
    font-weight: normal;
}

.fw-card-fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    min-height: 100%;
}

.card-hover:hover {
    background-color: #f1f3fa
}