/*-----------widget 1 & 2 styles---------------*/
.FS1 {
    font-size: 26px;
    color: #444;
    line-height: 1.5em;
    font-weight: 400
}

.FS2 {
    font-size: 12px;
    color: rgba(34,34,34,0.6);
    font-style: italic;
}

.FS3 {
    font-size: 17px;
    /* color: #222; */
    font-weight: 400;
    line-height: 1.15em;
}

.mar-b {
    margin-bottom: 7px;
}

.clamp-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}


.q2-widget1:not(.blank) {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 0px; /*0.5em*/
    box-shadow: none; /*0px 2px 8px rgba(0,0,0,0.17)*/
    max-height: 140px;
    min-height: 6.5em;
    display: flex;
    align-items: stretch;
    & table.q2-wid-outer-Tbl

{
    width: 100%;
    height: auto;
    border: none;
    & td

{
    vertical-align: bottom;
    &.q2-wid-icon-td

{
    width: 45px;
    height: 45px
}

&.q2-wid-title-td {
    max-width: 0px;
    vertical-align: top;
    & h3

{
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 5px;
}

}

&.q2-wid-info {
    vertical-align: bottom
}

& .q2-wid-moreInfoBtn {
    text-align: right;
    color: #666;
    vertical-align: bottom;
    cursor: pointer;
    &.active

{
    border: solid 1px #eaeaea;
    color: var(--background1);
    background: #f9f9f9;
    text-align: center;
    border-radius: 3px;
    max-width: fit-content;
    padding: 0px 10px;
    margin-left: auto;
}

}

& > * {
    margin: 0px;
}

}
}
}

.q2-widget1.blank {
    height: auto;
    width: 100%;
    min-width: calc(20% - 10px);
    max-width: calc(80% - 10px);
    min-height: 95px;
    background-color: #eee;
    border-bottom: solid 1px #ddd;
}

.q2-widget2 {
    width: 100%;
    background-color: #fff;
    padding: 0px; /*0.5em*/
    /*box-shadow: 0px 2px 8px rgba(0,0,0,0.17);*/
    box-shadow: none;
    padding: 0px;
    height: 100%;
    display: flex;
    align-items: stretch;
    & .table.q2-wid-outer-Tbl

{
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    flex-wrap: wrap;
    /* align-items: flex-start; */
    align-content: flex-start;
    /* height: 100%; */

    & .tr

{
    display: flex;
    flex: 0 0 100%;
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    align-self: self-end;
    /* margin-top: auto; */

    &.q2-wid-inner-Tbl

{
    align-items: flex-start;
    height: calc(320px - 1em - 45px - 20px);
    overflow: auto;
    margin-bottom: 0px;
    margin-top: 0px;
    align-self: flex-start;
    margin-top: 5px;
    & table.inner-tbl

{
    width: 100%;
    margin: 0px;
    border-collapse: separate;
    & thead

{
    position: sticky;
    margin-bottom: 0;
    top: 0;
    z-index: 1;
    background-color: #fff;
    /*outline:solid 1px;
                        outline-offset:-3px;*/

    & th.inner-tbl-th

{
    /* border-bottom: 1px solid #222; */
    padding: 13px 8px;
    background: #647585;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
}

}

& .tb-container {
    min-height: 100px;
    overflow: auto;
    resize: vertical; /* only for demo */

    & .inner-tbl-tr

{
    background-color: #f2f2f2;
}

& td.inner-tbl-td {
    padding: 10px 8px;
    font-size: 12px;
    background-color: #fff;
    border-bottom: solid 1px #ddd;
    height: 1em;
}

}

& tfoot {
    position: sticky;
    margin-top: 0;
    bottom: 0;
    z-index: 1;
    background-color: #fff;
    /*outline:solid 1px;
                        outline-offset:-3px;*/
    & td

{
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
}

& td.inner-tbl-td {
    padding: 10px 8px;
}

}

& thead .FS3, & tfoot .FS3 {
    font-size: 14px;
}

&.footer-tbl {
    min-height: 100%;
}

}
}

& .td.q2-wid-info {
    font-size: 12px;
}

}

& .td {
    display: flex;
    align-items: flex-end;
    &.q2-wid-icon-td

{
    width: 45px;
    height: 45px
}

&.q2-wid-title-td {
    width: calc(100% - 45px);
    align-self: center;
    & h1

{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    font-size: 17px;
    color: #666;
}

}

&.q2-wid-info {
    flex-wrap: wrap;
}

&.q2-wid-moreInfoBtn {
    text-align: right;
    color: #666;
    width: 46px;
    height: 1.5em;
    margin-left: auto;
    justify-content: flex-end;
    cursor: pointer;
    &.active

{
    border: solid 1px #eaeaea;
    color: var(--background1);
    background: #f9f9f9;
    text-align: center;
    border-radius: 3px;
    justify-content: center;
    max-width: fit-content;
    padding: 0px 10px;
}

}
}
}
}

.widget-tt-wrap {
    display: none;
    position: absolute;
    padding: 5px;
    background: #fff;
    /* box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.17); */
    font-size: 12px;
    width: max-content;
    max-width: 80%;
    border: solid 1px #e2e2e2;
    border-radius: 3px;
    &::after

{
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #999;
}

}


@media(min-width:769px) {
    .q2-widget2 {
        /*height: 450px;*/
        & .widget2_bottom_line

{
    position: relative;
    bottom: 0px;
    width: 100%
}

}
}

@media(max-width:768px) {
    .q2-widget1, .q2-widget2 {
        min-width: inherit !important;
        max-width: inherit !important;
        flex: 0 0 100% !important;
        width: 100% !important;
    }

        .q2-widget2 table {
            width: 100% !important;
        }

        .q2-widget2 .table .FS1 {
            font-size: 20pt;
            white-space: normal !important;
        }

        .q2-widget2 table th.FS3, .q2-widget2 table td.FS3 {
            font-size: 12pt;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .widget2_bottom_line {
        position: relative;
        bottom: 0px;
        width: 100%;
    }

    .q2-wid-moreInfoBtn {
        display: none;
    }
}