/* Main Container
----------------------------------------------------------------------- */
//.typerocket-container .contextual-help-tabs-wrap .help-tab-content {
//    padding-bottom: 20px;
//}

.typerocket-container {
    box-sizing: border-box;
    clear: both;

    &:after {
        content: '';
        display: block;
        clear: both;
    }
}

/* Grid
----------------------------------------------------------------------- */
.tr-flex-tight {
    display: flex;
    flex-flow: wrap;
    box-sizing: border-box;

    > * {
        box-sizing: border-box;
        padding: 0 5px;
    }

    > :first-child {
        padding-left: 0;
    }

    > :last-child {
        padding-right: 0;
    }
}

.tr-flex-list {
    display: flex;
    box-sizing: border-box;

    > * {
        flex: 1;
        box-sizing: border-box;
        padding: 0 5px;
    }

    > :first-child {
        padding-left: 0;
    }

    > :last-child {
        padding-right: 0;
    }
}

.tr-flex-justify {
    justify-content: flex-start
}

/* Helpers
----------------------------------------------------------------------- */
.tr-mr-10 { margin-right: 10px; }
.tr-ml-10 { margin-left: 10px; }
.tr-mb-10 { margin-bottom: 10px; }
.tr-mt-10 { margin-top: 10px; }
.tr-my-10 { margin-top: 10px; margin-bottom: 10px; }
.tr-mx-10 { margin-left: 10px; margin-right: 10px; }
.tr-m-10 { margin: 10px; }
.tr-m-20 { margin: 20px; }

.tr-pr-10 { padding-right: 10px; }
.tr-pl-10 { padding-left: 10px; }
.tr-pb-10 { padding-bottom: 10px; }
.tr-pt-10 { padding-top: 10px; }
.tr-py-10 { padding-top: 10px; padding-bottom: 10px; }
.tr-px-10 { padding-left: 10px; padding-right: 10px; }
.tr-p-10 { padding: 10px; }
.tr-p-20 { padding: 20px; }

.tr-d-inline { display: inline; }
.tr-d-inline-block { display: inline-block; }
.tr-d-block { display: block; }

.tr-w-100 { width: 100% }
.tr-w-50 { width: 50% }
.tr-w-25 { width: 25% }
.tr-w-10 { width: 10% }

.tr-sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.tr-fl { float: left; }
.tr-fr { float: right; }

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}