/* display */
.display-none {display: none}
.display-block {display: block}
.display-inline-block {display: inline-block}

/* flex */

.flex {display: flex;}
.flex-col {flex-direction: column}
.flex-row {flex-direction: row}
.flex-wrap {flex-wrap: wrap}
.flex-nowrap {flex-wrap: nowrap}
.align-items-center {align-items: center}
.justify-content-center {justify-content: center} 
.justify-content-end {justify-content: flex-end} 

/* typgraphy */

.text-left {text-align: left}
.text-right {text-align: right}
.text-center {text-align: center}
.word-break-all {word-break: break-all}
.text-underline {text-decoration: underline}
.bold {font-weight: bold}

/* margin */

.m-0 {margin: 0}
.m-5 {margin: 5px}
.m-10 {margin: 10px}
.m-15 {margin: 15px}
.m-20 {margin: 20px}
.m-auto {margin: auto}
.ml-5 {margin-left: 5px}
.mr-5 {margin-right: 5px}
.ml-10 {margin-left: 10px}
.mr-10 {margin-right: 10px}
.ml-15 {margin-left: 15px}
.mr-15 {margin-right: 15px}
.ml-20 {margin-left: 20px}
.mr-20 {margin-right: 20px}
.mt-5 {margin-top: 5px}
.mb-5 {margin-bottom: 5px}
.mt-10 {margin-top: 10px}
.mb-10 {margin-bottom: 10px}
.mt-15 {margin-top: 15px}
.mb-15 {margin-bottom: 15px}
.mt-20 {margin-top: 20px}
.mb-20 {margin-bottom: 20px}

/* padding */

.p-0 {padding: 0}
.p-5 {padding: 5px}
.p-10 {padding: 10px}
.pt-5 {padding-top: 5px}
.pb-5 {padding-bottom: 5px}
.pt-10 {padding-top: 10px}
.pb-10 {padding-bottom: 10px}

/* width */

.w-1\/2 {width: 25%}
.w-1\/3 {width: 33.3333%}
.w-2\/3 {width: 75%}
.w-full {width: 100%;}

/* height */

.h-24 {height: 24px}
.h-26 {height: 26px}
.h-28 {height: 28px}
.h-30 {height: 30px}
.h-32 {height: 32px}
.h-34 {height: 34px}
.h-36 {height: 36px}
.h-full {height: 100%}

/* color */

.color-error {color: red}
.color-success {color: green}
.color-warning {color: #e85506}
.color-white {color: white} 
.color-blue {color: #0088cc} 

/* background */

.bg-error {background-color: red}
.bg-success {background-color: green}
.bg-warning {background-color: #e85506}
.bg-none {background-color: transparent}

/* other */
.otl-black {outline: 1px solid black}
.otl-blue {outline: 1px solid blue}
.otl-red {outline: 1px solid blue}
.otl-green {outline: 1px solid green}

/* cursor */
.cursor-pointer {cursor: pointer}

/* borders */
.border-none {
	border: none;
}
.border-radius-5 {
	border-radius: 5px;
}