/* UTILITY CLASSES */
.box-shadow { box-shadow: 0px 0px 4px var(--neutral-color-2); }
/* utility classes for borders */
.border { border-width: 1px; border-style: solid; border-color: var(--primary-txt-color); }
.border-none { border: none; }
.border-medium { border-width: 2px; border-style: solid; border-color: var(--primary-txt-color); }
.border-large { border-width: 4px; border-style: solid; border-color: var(--primary-txt-color); }
.border-dashed-light { border-width: 1px; border-style: dashed; border-color: var(--primary-txt-color); }
.border-dashed-medium { border-width: 2px; border-style: dashed; border-color: var(--primary-txt-color); }
.border-dotted-light { border-width: 1px; border-style: dotted; border-color: var(--primary-txt-color); }
.border-dotted-medium { border-width: 2px; border-style: dotted; border-color: var(--primary-txt-color); }
.border-radius-small { border-radius: .5rem; }
.border-radius-medium { border-radius: 1rem; }
.border-radius-large { border-radius: 1.5rem; }
.border-radius-xl { border-radius: 2rem; }
.border-radius-round { border-radius: 50%; }
.border-top { border-top: 1px solid var(--primary-txt-color); }
.border-bottom { border-bottom: 1px solid var(--primary-txt-color); }
.border-left { border-left: 1px solid var(--primary-txt-color); }
.border-right { border-right: 1px solid var(--primary-txt-color); }
.border-primary { border-color: var(--primary-color); }
.border-secondary { border-color: var(--secondary-color); }
.border-highlight { border-color: var(--highlight-color); }
/* paddings - utility-(padding)-(direction)-(size) */
.pad-t-0 { padding-top: 0px; }
.pad-b-0 { padding-bottom: 0px; }
.pad-l-0 { padding-left: 0px; }
.pad-r-0 { padding-right: 0px; }
.pad-x-0 { padding-left: 0px; padding-right: 0px; }
.pad-y-0 { padding-top: 0px; padding-bottom: 0px; }
.pad-t-s { padding-top: .5rem; }
.pad-b-s { padding-bottom: .5rem; }
.pad-l-s { padding-left: .5rem; }
.pad-r-s { padding-right: .5rem; }
.pad-x-s { padding-left: .5rem; padding-right: .5rem; }
.pad-y-s { padding-top: .5rem; padding-bottom: .5rem; }
.pad-t-m { padding-top: 1rem; }
.pad-b-m { padding-bottom: 1rem; }
.pad-l-m { padding-left: 1rem; }
.pad-r-m { padding-right: 1rem; }
.pad-x-m { padding-left: 1rem; padding-right: 1rem; }
.pad-y-m { padding-top: 1rem; padding-bottom: 1rem; }
.pad-t-lg { padding-top: 1.5rem; }
.pad-b-lg { padding-bottom: 1.5rem; }
.pad-l-lg { padding-left: 1.5rem; }
.pad-r-lg { padding-right: 1.5rem; }
.pad-x-lg { padding-left: 1.5rem; padding-right: 1.5rem; }
.pad-y-lg { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pad-t-xl { padding-top: 2rem; }
.pad-b-xl { padding-bottom: 2rem; }
.pad-l-xl { padding-left: 2rem; }
.pad-r-xl { padding-right: 2rem; }
.pad-x-xl { padding-left: 2rem; padding-right: 2rem; }
.pad-y-xl { padding-top: 2rem; padding-bottom: 2rem; }
.pad-0 { padding: 0px; }
.pad-s { padding: .5rem; }
.pad-m { padding: 1rem; }
.pad-lg { padding: 1.5rem; }
.pad-xl { padding: 2rem; }
/* margins - utility-(margin)-(direction)-(size) */
.mar-t-0 { margin-top: 0px; }
.mar-b-0 { margin-bottom: 0px; }
.mar-l-0 { margin-left: 0px; }
.mar-r-0 { margin-right: 0px; }
.mar-x-0 { margin-left: 0px; margin-right: 0px; }
.mar-y-0 { margin-top: 0px; margin-bottom: 0px; }
.mar-t-s { margin-top: .5rem; }
.mar-b-s { margin-bottom: .5rem; }
.mar-l-s { margin-left: .5rem; }
.mar-r-s { margin-right: .5rem; }
.mar-x-s { margin-left: .5rem; margin-right: .5rem; }
.mar-y-s { margin-top: .5rem; margin-bottom: .5rem; }
.mar-t-m { margin-top: 1rem; }
.mar-b-m { margin-bottom: 1rem; }
.mar-l-m { margin-left: 1rem; }
.mar-r-m { margin-right: 1rem; }
.mar-x-m { margin-left: 1rem; margin-right: 1rem; }
.mar-y-m { margin-top: 1rem; margin-bottom: 1rem; }
.mar-t-lg { margin-top: 1.5rem; }
.mar-b-lg { margin-bottom: 1.5rem; }
.mar-l-lg { margin-left: 1.5rem; }
.mar-r-lg { margin-right: 1.5rem; }
.mar-x-lg { margin-left: 1.5rem; margin-right: 1.5rem; }
.mar-y-lg { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.mar-t-xl { margin-top: 2rem; }
.mar-b-xl { margin-bottom: 2rem; }
.mar-l-xl { margin-left: 2rem; }
.mar-r-xl { margin-right: 2rem; }
.mar-x-xl { margin-left: 2rem; margin-right: 2rem; }
.mar-y-xl { margin-top: 2rem; margin-bottom: 2rem; }
.mar-0 { margin: 0px; }
.mar-s { margin: .5rem; }
.mar-m { margin: 1rem; }
.mar-lg { margin: 1.5rem; }
.mar-xl { margin: 2rem; }
/* utility classes for line-height */
.lh-m { line-height: 1rem; }
.lh-lg { line-height: 1.5rem; }
.lh-xl { line-height: 2rem; }
/* utility classes for display */
.display-block { display: block; }
.display-flex { display: flex; }
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }
.display-none { display: none; }
.display-table { display: table; }
.gap { gap: 2rem;}
/* utility classes for flex alignment */
.flex-justify-content-center { display: flex; justify-content: center; }
.flex-justify-content-end { display: flex; justify-content: flex-end; }
/* utility classes for overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
/* utility classes for positioning */
.position-absolute { position: absolute; }
.position-relative { position: relative; }
.position-fixed { position: fixed; }
.position-static { position: static; }
.top { top: 0; }
.right { right: 0; }
.bottom { bottom: 0; }
.left { left: 0; }
/* z-indexes */
.z-index-1 { z-index: 1; }
.z-index-2 { z-index: 2; }
.z-index-3 { z-index: 3; }
.z-index-4 { z-index: 4; }
.z-index-5 { z-index: 5; }
/* utility classes for floating */
.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }
.clear { clear: both; }
.clear::after { clear: both; display: block; content: ""; }
/* utility classes for colours */
.main-bg-color { background-color: var(--primary-color); }
.primary-bg-color { background-color: var(--primary-color); }
.secondary-bg-color { background-color: var(--secondary-color); }
.highlight-bg-color { background-color: var(--highlight-color); }
.light-bg-color { background-color: var(--light-color); }
.success-bg-color { background-color: var(--success-color); }
.info-bg-color { background-color: var(--info-color); }
.alert-bg-color { background-color: var(--alert-color); }
.error-bg-color { background-color: var(--error-color); }
.primary-txt-color { color: var(--primary-txt-color); }
.secondary-txt-color { color: var(--secondary-txt-color); }
.link-txt-color { color: var(--primary-color); }
.error-txt-color { color: var(--dark-error-color); }
.highlight-txt-color { color: var(--highlight-color); }
.light-txt-color { color: var(--light-color); }
/* utility classes for text */
.txt-left { text-align: left; }
.txt-right { text-align: right; }
.txt-center { text-align: center; }
.txt-break { word-break: break-word; overflow-wrap: break-word; }
.txt-wrap { white-space: normal; }
.txt-nowrap { white-space: nowrap; }
.txt-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.txt-uppercase { text-transform: uppercase; }
.txt-italic { font-style: italic; }
.txt-strong { font-weight: bold; }
.txt-medium { font-weight: 600; }
.txt-light { font-weight: 300; }
.txt-decoration-none { text-decoration: none; }
.txt-small { font-size: .75rem; }
.txt-regular { font-size: 1rem; }
.txt-medium { font-size: 1.5rem; }
.txt-large { font-size: 1.75rem; }
.txt-xlarge { font-size: 2rem; }
.small, small {font-size: 90%;}
/* widths */
.width-25 { width: 25%; }
.width-50 { width: 50%; }
.width-75 { width: 75%; }
.width-100 { width: 100%; }
/* height */
.height-25 { height: 25%; }
.height-50 { height: 50%; }
.height-75 { height: 75%; }
.height-100 { height: 100%; }
/* opacity */
.opacity-20 { opacity: 0.2; }
.opacity-50 { opacity: 0.5; }
.opacity-80 { opacity: 0.8; }
/* background */
.bg-size-cover { background-size: cover; }
.bg-size-contain { background-size: contain; }
.bg-no-repeat { background-repeat: no-repeat; }
.bg-position-bottom-left { background-position: bottom left; }
.bg-position-bottom-right { background-position: bottom right; }
.bg-position-top-left { background-position: top left; }
.bg-position-top-right { background-position: top right; }