﻿/*develop */
.bg1, .bgred, .bg_red {background-color: red!important}
.bg2, .bgblue,.bg_blue {background-color: blue!important}
.bg3, .bgyellow,.bg_yellow {background-color: blue!important}


.abs_cover
	{
	position:absolute;
	top:0px;left:0px;
	width:100%;
	height:100%;
	}
.abs_cover.extra
	{
	height:calc(100% + 500px);
	}

.disableCover{
	opacity: 0.7;
	background-color: white;
}

.fontzero{
	font-size: 0;
	line-height: 0;
}

.float_left{float:left;}
.fixed {position:fixed;}
.i {display:inline;}
.b {display:block!important;}
.ib {display:inline-block;}

.iflex {display:inline-flex!important;}
.flex
	{
	display: -webkit-box!important;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -ms-flexbox!important;  /* TWEENER - IE 10 */
	display: -webkit-flex!important; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	display: flex!important;         /* NEW, Spec - Firefox, Chrome, Opera */
	}
.flexc {
	display:flex!important;
	flex-direction:column!important;
}
.fill
	{
	-webkit-flex: 2!important;
	-ms-flex: 2!important;
	flex:2!important;
	}


.no_resize{resize:none;}

/*cursor property*/
.p{cursor:pointer!important;}
.progress{cursor:progress!important;}
.drag{cursor: move!important;}
.ci{cursor:inherit!important;}
.ct{cursor:text!important;}

.nevent{pointer-events: none!important;}

.r {position:relative;}
.a {position:absolute;}
.OFF{display:none!important;}
.pre{white-space : pre-line;}
.rigid, .nowarp{white-space:nowrap;}
.unrigid {white-space:normal!important;}
.tac {text-align:center;}
.tar {text-align:right;}
.tal {text-align:left;}
.taj, .justify {text-align: justify;}
.jcc {justify-content: center;}

.bold{font-weight: bold!important;} 
.mauto{margin:auto;}

.mauto{margin:auto;}
.uppercase, .uc{text-transform: uppercase;}
.capitalize{text-transform: capitalize;}
._capitalize:first-letter{text-transform: uppercase;}  /*element mora biti block ili inline-block da bi radilo !!!*/


.n_ul{text-decoration: none!important;}
.ul{text-decoration: underline;}
.ul_h:hover{text-decoration: underline;}

.unselectable, .u
	{
    -moz-user-select: -moz-none!important;
    -khtml-user-select: none!important;
    -webkit-user-select: none!important;
    -o-user-select: none!important;
    user-select: none!important;
	}

.w100 {width:100% !important;}
.w50 {width:50% !important;}
.h100 {height:100% !important;}


.m0{margin:0px !important;}


.valign
	{
	/*@extend .flex;*/
	align-items:center; 
	}


.valign_inline
	{
	display:inline-flex;
	align-items:center;
	}

/*.valign_center-> use combination class: "valign jcc" */


.flexEnd
	{
	align-self:flex-end;
	}

.table_valign td
	{
	vertical-align: middle;
	}

a.reset{
	
}


.scrollX{
	overflow-x: auto!important;
}
.scrollY{
	overflow-y: auto!important;
}


/*cut border*/
.cB{border:none !important;}
.cBT{border-top:none !important;}
.cBB {border-bottom:none !important;}
.cBR {border-right:none !important;}
.cBL {border-left:none !important;}
.oB3 /*only border 3 */ 
	{
	border-top:none !important;
	border-left:none !important;
	border-right:none !important;
	}

/*cut margin */
.cM {margin:0px !important;}
.cMT{margin-top:0px !important;}
.cMB {margin-bottom:0px !important;}
.cMR {margin-right:0px !important;}
.cML {margin-left:0px !important;}

/*cut padding*/
.cP {padding:0px !important;}
.cPT{padding-top:0px !important;}
.cPB {padding-bottom:0px !important;}
.cPR {padding-right:0px !important;}
.cPL {padding-left:0px !important;}



/*
//ovo bi komotno mogao napraviti animation.scss

@-webkit-keyframes fadeOut {0%{opacity :1;}100% {opacity: 0;visibility:hidden;}}
@keyframes fadeOut  {0%{opacity :1;}100% {opacity: 0;visibility:hidden;}}

.fadeOut{animation: fadeOut 0.3s ease normal forwards;}

@-webkit-keyframes fadeIn {0%{opacity :0;}100% {opacity: 1;}}
@keyframes fadeIn  {0%{opacity :0;}100% {opacity: 1;}}

.fadeIn{animation: fadeIn 0.3s ease normal forwards;}


*/



/*
For use generic class like:

	USE: 					./generated_css.js  -> import after head tag: <script src="~/node_modules/bozoou_default_css/dist/generated_css.js"></script> 
	OR (CHECK UPDATE!!):	./generated_css.scss -> set in index.js -> import 'bozoou_default_css/dist/generated_css.scss';


.m0 .ml0, .mr0, .mt0, .mb0, .mh0, .mv0  
	range is: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100]
	dimension types is: [m, p]  m -> margin ; p -> padding;
	side type is: [null, l, r, t, b, h, v]  null-> allSide, l-left, r-right, t-top, b-bottom, v-vertical, h-horizontal
.T0, .T1 ... .L0, .L1 ....T-0, .T-1 ... relativ pomak for range: 0-15 , directions: T, B, L , R;
.r2 ... .r6   radius for range : 2-6
.ho10:not(:hover){opacity:0.3!important;}  not-hover opacity for range : [10,20,30,40,50,60,70,80,90];
.o10 opacity for range: [10,20,30,40,50,60,70,80,90]
.f50{font-size: 50%!important;}  range is [50, 55, 60, 65 ... 150]

*/

