/* UTILITY CLASSES */
/* Naming convention - start with a u-...
   These are generic css classes.
*/

/* utility classes for borders */
.u-border-none {
    border: none;
}

.u-border {
    border-width: 1px;
    border-style: solid;
    border-color: var(--primary-txt-color);
}

.u-border-medium {
    border-width: 2px;
    border-style: solid;
    border-color: var(--primary-txt-color);
}

.u-border-large {
    border-width: 4px;
    border-style: solid;
    border-color: var(--primary-txt-color);
}

.u-border-dashed-light {
    border-width: 1px;
    border-style: dashed;
    border-color: var(--primary-txt-color);
}

.u-border-dashed-medium {
    border-width: 2px;
    border-style: dashed;
    border-color: var(--primary-txt-color);
}

.u-border-dotted-light {
    border-width: 1px;
    border-style: dotted;
    border-color: var(--primary-txt-color);
}

.u-border-dotted-medium {
    border-width: 2px;
    border-style: dotted;
    border-color: var(--primary-txt-color);
}

.u-border-radius-small {
    border-radius: 1px;
}

.u-border-radius-medium {
    border-radius: 2px;
}

.u-border-radius-large {
    border-radius: 4px;
}

.u-border-radius-xl {
    border-radius: 6px;
}

.u-border-radius-round {
    border-radius: 50%;
}

.u-border-top {
    border-top: 1px solid var(--primary-txt-color);
}

.u-border-bottom {
    border-bottom: 1px solid var(--primary-txt-color);
}

.u-border-left {
    border-left: 1px solid var(--primary-txt-color);
}

.u-border-right {
    border-right: 1px solid var(--primary-txt-color);
}

.u-border-primary {
    border-color: var(--primary-color);
}

.u-border-secondary {
    border-color: var(--secondary-color);
}

.u-border-highlight {
    border-color: var(--highlight-color);
}

.u-border-neutral-color-2 {
    border-color: var(--neutral-color-2);
}

/* paddings - utility-(padding)-(direction)-(size) */
.u-pad-t-0 {
    padding-top: 0px;
}

.u-pad-b-0 {
    padding-bottom: 0px;
}

.u-pad-l-0 {
    padding-left: 0px;
}

.u-pad-r-0 {
    padding-right: 0px;
}

.u-pad-x-0 {
    padding-left: 0px;
    padding-right: 0px;
}

.u-pad-y-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.u-pad-t-s {
    padding-top: 5px;
}

.u-pad-b-s {
    padding-bottom: 5px;
}

.u-pad-l-s {
    padding-left: 5px;
}

.u-pad-r-s {
    padding-right: 5px;
}

.u-pad-x-s {
    padding-left: 5px;
    padding-right: 5px;
}

.u-pad-y-s {
    padding-top: 5px;
    padding-bottom: 5px;
}

.u-pad-t-m {
    padding-top: 10px;
}

.u-pad-b-m {
    padding-bottom: 10px;
}

.u-pad-l-m {
    padding-left: 10px;
}

.u-pad-r-m {
    padding-right: 10px;
}

.u-pad-x-m {
    padding-left: 10px;
    padding-right: 10px;
}

.u-pad-y-m {
    padding-top: 10px;
    padding-bottom: 10px;
}

.u-pad-t-lg {
    padding-top: 15px;
}

.u-pad-b-lg {
    padding-bottom: 15px;
}

.u-pad-l-lg {
    padding-left: 15px;
}

.u-pad-r-lg {
    padding-right: 15px;
}

.u-pad-x-lg {
    padding-left: 15px;
    padding-right: 15px;
}

.u-pad-y-lg {
    padding-top: 15px;
    padding-bottom: 15px;
}

.u-pad-t-xl {
    padding-top: 20px;
}

.u-pad-b-xl {
    padding-bottom: 20px;
}

.u-pad-l-xl {
    padding-left: 20px;
}

.u-pad-r-xl {
    padding-right: 20px;
}

.u-pad-x-xl {
    padding-left: 20px;
    padding-right: 20px;
}

.u-pad-y-xl {
    padding-top: 20px;
    padding-bottom: 20px;
}

.u-pad-0 {
    padding: 0px;
}

.u-pad-s {
    padding: 5px;
}

.u-pad-m {
    padding: 10px;
}

.u-pad-lg {
    padding: 15px;
}

.u-pad-xl {
    padding: 20px;
}

/* special sizes */
.u-pad-b-50 {
    padding-bottom: 50px;
}

/* margins - utility-(margin)-(direction)-(size) */
.u-mar-t-0 {
    margin-top: 0px;
}

.u-mar-b-0 {
    margin-bottom: 0px;
}

.u-mar-l-0 {
    margin-left: 0px;
}

.u-mar-r-0 {
    margin-right: 0px;
}

.u-mar-x-0 {
    margin-left: 0px;
    margin-right: 0px;
}

.u-mar-y-0 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.u-mar-t-s {
    margin-top: 5px;
}

.u-mar-b-s {
    margin-bottom: 5px;
}

.u-mar-l-s {
    margin-left: 5px;
}

.u-mar-r-s {
    margin-right: 5px;
}

.u-mar-x-s {
    margin-left: 5px;
    margin-right: 5px;
}

.u-mar-y-s {
    margin-top: 5px;
    margin-bottom: 5px;
}

.u-mar-t-m {
    margin-top: 10px;
}

.u-mar-b-m {
    margin-bottom: 10px;
}

.u-mar-l-m {
    margin-left: 10px;
}

.u-mar-r-m {
    margin-right: 10px;
}

.u-mar-x-m {
    margin-left: 10px;
    margin-right: 10px;
}

.u-mar-y-m {
    margin-top: 10px;
    margin-bottom: 10px;
}

.u-mar-t-lg {
    margin-top: 15px;
}

.u-mar-b-lg {
    margin-bottom: 15px;
}

.u-mar-l-lg {
    margin-left: 15px;
}

.u-mar-r-lg {
    margin-right: 15px;
}

.u-mar-x-lg {
    margin-left: 15px;
    margin-right: 15px;
}

.u-mar-y-lg {
    margin-top: 15px;
    margin-bottom: 15px;
}

.u-mar-t-xl {
    margin-top: 20px;
}

.u-mar-b-xl {
    margin-bottom: 20px;
}

.u-mar-l-xl {
    margin-left: 20px;
}

.u-mar-r-xl {
    margin-right: 20px;
}

.u-mar-x-xl {
    margin-left: 20px;
    margin-right: 20px;
}

.u-mar-y-xl {
    margin-top: 20px;
    margin-bottom: 20px;
}

.u-mar-0 {
    margin: 0px;
}

.u-mar-s {
    margin: 5px;
}

.u-mar-m {
    margin: 10px;
}

.u-mar-lg {
    margin: 15px;
}

.u-mar-xl {
    margin: 20px;
}

.u-mar-x-xl-neg {
    margin-left: -20px;
    margin-right: -20px;
}

/* utility classes for display */

.u-display-block {
    display: block;
}
.u-display-flex {
    display: flex;
}
.u-display-inline {
    display: inline;
}
.u-display-inline-block {
    display: inline-block;
}
.u-display-none {
    display: none;
}
.u-display-table {
    display: table;
}

/* utility classes for flex alignment */
.u-flex-justify-content-center {
    display: flex;
    justify-content: center;
}

.u-flex-justify-content-end {
    display: flex;
    justify-content: flex-end;
}

/* utility classes for overflow */
.u-overflow-auto {
    overflow: auto;
}
.u-overflow-hidden {
    overflow: hidden;
}
.u-overflow-y-hidden {
    overflow-y: hidden;
}
.u-overflow-x-hidden {
    overflow-x: hidden;
}

/* utility classes for positioning */
.u-position-absolute {
    position: absolute;
}

.u-position-relative {
    position: relative;
}

.u-position-fixed {
    position: fixed;
}

.u-position-static {
    position: static;
}


/* utility classes for floating */
.u-float-left {
    float: left;
}
.u-float-right {
    float: right;
}
.u-float-none {
    float: none;
}
.u-clear {
    clear: both;
}
.u-clear::after {
    clear: both;
    display: block;
    content: "";
}


/* utility classes for colours */
.u-main-bg-color {
    background-color: var(--primary-color);
}
.u-primary-bg-color {
    background-color: var(--primary-color);
}
.u-secondary-bg-color {
    background-color: var(--secondary-color);
}
.u-highlight-bg-color {
    background-color: var(--highlight-color);
}
.u-success-bg-color {
    background-color: var(--success-color);
}
.u-info-bg-color {
    background-color: var(--info-color);
}
.u-alert-bg-color {
    background-color: var(--alert-color);
}
.u-error-bg-color {
    background-color: var(--error-color);
}


.u-primary-txt-color {
    color: var(--primary-color);
}
.u-secondary-txt-color {
    color: var(--secondary-color);
}
.u-error-txt-color {
    color: var(--dark-error-color);
}
.u-success-txt-color {
    color: var(--interviews-color);
}

.u-neutral-txt-color {
    color: var(--neutral-color-5);
}


/* utility classes for text */
.u-txt-left {
    text-align: left;
}
.u-txt-right {
    text-align: right;
}
.u-txt-center {
    text-align: center;
}

.u-txt-break {
    word-break: break-word;
    overflow-wrap: break-word;
}
.u-txt-wrap {
    white-space: normal;
}
.u-txt-nowrap {
    white-space: nowrap;
}
.u-txt-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.u-txt-uppercase {
    text-transform: uppercase;
}
.u-txt-italic {
    font-style: italic;
}
.u-txt-strong {
    font-weight: bold;
}
.u-txt-light {
    font-weight: 300;
}
.u-txt-decoration-none {
    text-decoration: none;
}

.u-font-size-s {
    font-size: 12px;
}
.u-font-size-m {
    font-size: 14px;
}

/* remove the underline from the hover state of anchor tags */
a.u-no-underline:hover {
    text-decoration: none;
}