* { box-sizing: border-box; }
html, body { font-family: 'Rubik', sans-serif;	font-weight: 400; font-size: 16px; color:var(--dark); margin: 0; padding: 0;  }

.content{  width: 100%;  margin: 0 auto;  }


:root{ 
--text  : #626262; 
--dark  : #626262; 
--light : #F6F6F6; 
--lity  : #FAFAFA;
--lite  : #EEEEEE; 
--gold  : #FFDC00; 
--pink  : #FF0066; 
--mint  : #92FCA4;
--aqua  : #5bc7bc; 
--blue  : #191765; 
--bluew : #2F4858; 
--dirk  : #734C54; 
}

.color-text   { color: var(--text); }
.color-light  { color: var(--light); }
.color-lite   { color: var(--lite); }
.color-gold   { color: var(--gold); }
.color-pink   { color: var(--pink); }
.color-aqua   { color: var(--aqua); }
.color-mint   { color: var(--mint); }
.color-blue   { color: var(--blue); }
.color-bluew  { color: var(--bluew); }
.color-white  { color: white; }
.color-black  { color: black; }

.color-text  p { color: var(--text); }
.color-light p { color: var(--light); }
.color-lite  p { color: var(--lite); }
.color-gold  p { color: var(--gold); }
.color-pink  p { color: var(--pink); }
.color-aqua  p { color: var(--aqua); }
.color-mint  p { color: var(--mint); }
.color-blue  p { color: var(--blue); }
.color-bluew p { color: var(--bluew); }
.color-white p { color: white; }
.color-black p { color: black; }

a.color-text   { color: var(--text); }
a.color-dark   { color: var(--text); }
a.color-light  { color: var(--light); }
a.color-lite   { color: var(--lite); }
a.color-gold   { color: var(--gold); }
a.color-pink   { color: var(--pink); }
a.color-aqua   { color: var(--aqua); }
a.color-mint   { color: var(--mint); }
a.color-blue   { color: var(--blue); }
a.color-bluew  { color: var(--bluew); }
a.color-white  { color: white; }
a.color-black  { color: black; }

.blue-links a       { color: var(--blue); }
.blue-links a:visit { color: var(--blue); }


.bg-text      { background-color: var(--pinky); }
.bg-lity      { background-color: var(--lite); }
.bg-light     { background-color: var(--light); }
.bg-lite      { background-color: var(--lite); }
.bg-gold      { background-color: var(--gold); }
.bg-pink      { background-color: var(--pink); }
.bg-aqua      { background-color: var(--aqua); }
.bg-mint      { background-color: var(--mint); }
.bg-blue      { background-color: var(--blue); }
.bg-bluew     { background-color: var(--bluew); }
.bg-white     { background-color: white; }
.bg-black     { background-color: black; }


.font-text { font-family: 'Mukta', sans-serif; }

.font-400{ font-weight: 400; }
.font-500{ font-weight: 500; }
.font-600{ font-weight: 600; }
.font-700{ font-weight: 700; }
.font-800{ font-weight: 800; }


.btn{ background-color: black; }
.btn-dark { background-color: var(--dark); }
.btn-lite { background-color: var(--lite); }
.btn-grey { background-color: var(--grey); }
.btn-pink { background-color: var(--pink); }
.btn-blue { background-color: var(--blue); }
.bg-white{ background-color: white; }
.bg-black{ background-color: black; }

.btn,
.btn-dark,
.btn-grey,
.btn-lite,
.btn-pink{ display:inline-block; padding:8px 16px; font-size:14px; font-500; border:0; 
		   border-radius:5px; color:white; text-decoration: none; }	
.btn-lite{ color: #000; }

.btn-line{ display:inline-block; padding:8px 16px; font-size:14px; font-500; border:2px solid; 
		   border-radius:5px;  text-decoration: none; color:#000; }	
.btn-line:hover{ opacity:0.7; }

.line-lite { color: var(--lite); }
.line-grey { color: var(--grey); }
.line-pink { color: var(--pink); }
.line-blue { color: var(--blue); }
.line-dark { color: var(--dark); }
.line-white{ color: white; }
.line-black{ color: black; }


@media ( max-width: 520px ) {
	.mobi-col-0 { width:0; }
	.mobi-col-5 { width:3% }
	.mobi-col-10{ width:8% }
	.mobi-col-15{ width:13% }
	.mobi-col-20{ width:18% }
	.mobi-col-25{ width:22% }
	.mobi-col-30{ width:28% }
	.mobi-col-35{ width:33% }
	.mobi-col-40{ width:38% }
	.mobi-col-45{ width:42% }
	.mobi-col-50{ width:48% }
	.mobi-col-60{ width:58% }
	.mobi-col-65{ width:63% }
	.mobi-col-70{ width:68% }
	.mobi-col-75{ width:73% }
	.mobi-col-80{ width:78% }
	.mobi-col-85{ width:84% }
}



.link-clean { text-decoration: none; }

.html-link-edit{ position:absolute; top:0; right:0; font-size:20px; text-decoration: none; }

.ctrl-btn,  
.ctrl-del  { position: absolute; cursor: pointer; top:0; right:0;  text-decoration: none; 
			 width:26px; height: 26px; text-align: center; line-height: 26px;font-size:18px;  }



/* - - - - -  forms - - - - -  */

input:focus, textarea:focus { outline: none; }

.input-label{ display: block; font-size:15px; line-height:24px; color: #b97088;  }	
.input-email,
.input-password,
.input-select,
.input-text{ display: block; width:100%; font-size:18px; border:3px solid #DDD; display: inline-block; 
	    	 padding:0 12px; height:48px; line-height: 42px; border-radius: 6px; }	



/* - - - - -  ctrl-block - - - - -  */
		  
.ctrl-block{ position: absolute; width:32px; height:32px; background: var(--pink); color: white; text-decoration: none; 
	         line-height: 32px; text-align: center; font-size:22px; border: 0; z-index: 80; }		

.hover-dad:hover .hover-kid{ opacity:1; }	         
.hover-kid{ opacity:0; }	         
	         
.top    { top:0; }  
.bottom { bottom:0; }  
.left   { left:0; }  
.right  { right:0; }  


/* - - - - -  comments - - - - -  */

.btn-comm{ display:inline-block; margin:10px 0 0; padding:4px 12px; background: #FFF;  border:1px solid #ccc; border-radius: 4px; }



/* - - - - -  venobox - - - - -  */

.vbox-figlio { box-shadow: none; background: transparent; border-radius:8px; }
.vbox-close { width: 60px; height: 60px; padding: 6px; font-size: 65px;  line-height:0.8; }


/* - - - - -  jconfirm - - - - -  */

.jc-white-theme { border: 3px solid #999999; border-radius: 10px; }
.jc-white-theme .jc-arrow-right { border-left-color: #999999; }
.jc-white-theme .jc-arrow-right { right: -24px; left: auto; bottom: auto; border-width: 12px; top: 50%; margin-top: -12px; }

/* - - - - -  webui popover - - - - -  */

.webui-dots { text-decoration: none; font-size:24px; line-height: 20px; font-weight:normal; border:none; cursor: pointer;   }
.webui-menu { color:#333; }
.webui-menu a{ display:block; line-height:1.5; text-decoration:none; color:#666; font-size: 16px; font-family:sans-serif;}
.webui-menu a:hover{ color:#2ab3ef; color:var(--pink); }
.webui-menu hr{ border:0; height:1px; background: #E4e4e4; margin:5px 0;}

.webui-popover { z-index:999; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.webui-popover.right>.arrow, 
.webui-popover.right-top>.arrow, 
.webui-popover.right-bottom>.arrow {  border-right-color: #999;  border-right-color: rgba(0,0,0,0.9); }