/* CSS Document */

@font-face{
    font-family: Montserrat;
    /* src: url('ArtlistSans-Regular.woff2'); */
	src: url('Montserrat-Regular.otf');
	/* src: url('Inder-Regular.otf'); */

}

@font-face{
    font-family: NunitoSans-Black;
	src: url('NunitoSans-Black.ttf');


}

.homeTitle{
    font-family: NunitoSans-Black !important;
    /* letter-spacing: 0.03rem; */
    /* color:rgb(103, 158, 236); */
}



.bodyBack {
    /* background: var(--body_light); */

    background:linear-gradient(to bottom, var(--tone_0) 40%,var(--body_light) 100%);

    background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;

    /* background-image:-moz-radial-gradient(70% 60%, ellipse cover, var(--body_light) 0%, var(--body_dark) 49%);
	background-image: -webkit-radial-gradient(70% 60%, ellipse cover, var(--body_light) 0%, var(--body_dark) 49%);
	background-image: radial-gradient(ellipse at 70% 60%, var(--body_light) 0%, var(--body_dark) 49%);
	background-image: 
	-webkit-radial-gradient(70% 60%, ellipse cover, var(--body_light) 0%, var(--body_dark) 49%); */


	/* background-image: url("../_gui/logo-large-bw.png"), -moz-radial-gradient(70% 60%, ellipse cover, var(--tone_7) 0%, var(--tone_3) 49%);
	background-image: url("../_gui/logo-large-bw.png"),-webkit-radial-gradient(70% 60%, ellipse cover, var(--tone_7) 0%, var(--tone_3) 49%);
	background-image: url("../_gui/logo-large-bw.png"),radial-gradient(ellipse at 70% 60%, var(--tone_7) 0%, var(--tone_3) 49%);
	background-image: 
	url("../_gui/logo-large-bw.png"),-webkit-radial-gradient(70% 60%, ellipse cover, var(--tone_7) 0%, var(--tone_3) 49%); 
	
	background-repeat: no-repeat, no-repeat;
	background-size: contain,cover;
	background-position: 50% 50%,50% 50%; */


}

.sectionBack {
    /* background: var(--body_light); */

    background: var(--body_back_image), linear-gradient(to bottom, var(--tone_0) 60%,var(--body_light) 100%);

    background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;

    /* background-image:-moz-radial-gradient(70% 60%, ellipse cover, var(--body_light) 0%, var(--body_dark) 49%);
	background-image: -webkit-radial-gradient(70% 60%, ellipse cover, var(--body_light) 0%, var(--body_dark) 49%);
	background-image: radial-gradient(ellipse at 70% 60%, var(--body_light) 0%, var(--body_dark) 49%);
	background-image: 
	-webkit-radial-gradient(70% 60%, ellipse cover, var(--body_light) 0%, var(--body_dark) 49%); */


	/* background-image: url("../_gui/logo-large-bw.png"), -moz-radial-gradient(70% 60%, ellipse cover, var(--tone_7) 0%, var(--tone_3) 49%);
	background-image: url("../_gui/logo-large-bw.png"),-webkit-radial-gradient(70% 60%, ellipse cover, var(--tone_7) 0%, var(--tone_3) 49%);
	background-image: url("../_gui/logo-large-bw.png"),radial-gradient(ellipse at 70% 60%, var(--tone_7) 0%, var(--tone_3) 49%);
	background-image: 
	url("../_gui/logo-large-bw.png"),-webkit-radial-gradient(70% 60%, ellipse cover, var(--tone_7) 0%, var(--tone_3) 49%); 
	
	background-repeat: no-repeat, no-repeat;
	background-size: contain,cover;
	background-position: 50% 50%,50% 50%; */


}


.displayBox{
    box-sizing:border-box;
}

.displayTable {
    display: table; 
	border-collapse: collapse;
	
}


.displayTable > div { 
    display: table-row; 
	
	

}

.displayTable > div > div { 
    display: table-cell;
	box-sizing: border-box;
    padding:8px;
	
}


.label{
    float:left;
    width:60px;
    height:30px;
    line-height:30px;
    color:var(--tone_c);
    font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight:normal;
}

A{
    text-decoration:none;
}

.cursor{

	cursor:pointer;

}

.cursorDown{
	cursor: s-resize;
}

.cursorUp{
	cursor: n-resize;
}

.clear{
	clear:both;
}

body{
font-family: Montserrat;
}

.gradientDarkUp{

background: -moz-linear-gradient(top,  rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.7) 49%);
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.7) 49%);
background: linear-gradient(to bottom,  rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.7) 49%);

}


.homeText{
font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
}

.homeText1d {
font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	font-size: 53px;
	line-height:63px;
	font-weight:normal;
}

.homeText1c {
font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	font-size: 43px;
	font-weight:normal;
}


.homeText1b {
font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	font-size: 33px;
	font-weight:normal;
}

.homeText1 {
font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight:normal;
}

.homeText2 {
	font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	font-size: 19px;
	font-weight:normal;
}

.homeText3c {
	font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;

	font-weight:normal;
}

.homeText3b {
	font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;

	font-weight:normal;
}

.homeText3 {
	font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;

	font-weight:normal;
}

.homeText4b {
	font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;

	font-weight:normal;
}

.homeText4 {
	font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;

	font-weight:normal;
}

.homeText5 {
	font-family:  Montserrat, Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;

	font-weight:normal;
}

.homeText6 {
	font-family:  Montserrat, Verdana, Arial, Helvetica, sans-serif;
	font-size: 8px;

	font-weight:normal;
}

.homeText7 {
	font-family:  Montserrat, Verdana, Arial, Helvetica, sans-serif;
	font-size: 7px;

	font-weight:normal;
}


/* end of custom icons */
.disp1 { display:block}
.disp2 { display:none}

.text_center{
    text-align:center;
}

.textBold {

	font-weight: bold;
}


.textItalic{
font-style:italic;

}



.deepShadow{
	-moz-box-shadow: 12px 32px 18px rgba(0,0,0,.2) ;
	-webkit-box-shadow: 12px 32px 18px rgba(0,0,0,.2) ;
	box-shadow: 12px 32px 18px rgba(0,0,0,.2) ;

}

.deepShadowLeft{
	-moz-box-shadow: -12px 32px 18px rgba(0,0,0,.2) ;
	-webkit-box-shadow: -12px 32px 18px rgba(0,0,0,.2) ;
	box-shadow: -12px 32px 18px rgba(0,0,0,.2) ;

}

.shadowLeft {
	-moz-box-shadow: -8px 8px 8px /*{global-box-shadow-size}*/ 			rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
	-webkit-box-shadow: -8px 8px 8px /*{global-box-shadow-size}*/ 		rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
	box-shadow: -8px 8px 8px /*{global-box-shadow-size}*/ 				rgba(0,0,0,.2) /*{global-box-shadow-color}*/;


}

.shadowDown {
	-moz-box-shadow: 0px 8px 10px rgba(0,0,0,.2);
	-webkit-box-shadow: 0px 8px 10px rgba(0,0,0,.2);
	box-shadow: 0px 8px 10px rgba(0,0,0,.2) ;

}

.shadowRight {
	-moz-box-shadow: 8px 0px 10px rgba(0,0,0,.2);
	-webkit-box-shadow: 8px 0px 10px rgba(0,0,0,.2);
	box-shadow: 8px 0px 10px rgba(0,0,0,.2);

}

.shadowUp {
	-moz-box-shadow: 0px -4px 10px rgba(0,0,0,.2);
	-webkit-box-shadow: 0px -4px 10px rgba(0,0,0,.2);
	box-shadow: 0px -4px 10px rgba(0,0,0,.2) ;

}

.flatShadow{
	-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.1) ;
	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.1) ;
	box-shadow: 0px 0px 10px rgba(0,0,0,.1) ;

}

.flatShadowLarge{
	-moz-box-shadow: 0px 0px 16px rgba(0,0,0,.3) ;
	-webkit-box-shadow: 0px 0px 16px rgba(0,0,0,.3) ;
	box-shadow: 0px 0px 16px rgba(0,0,0,.3) ;

}

.normalShadow{
	-moz-box-shadow: 8px 8px 8px rgba(0,0,0,.2);
	-webkit-box-shadow: 8px 8px 8px rgba(0,0,0,.2);
	box-shadow: 8px 8px 8px rgba(0,0,0,.2);
}

.normalShadowLight{
	-moz-box-shadow: 8px 8px 8px rgba(0,0,0,.2);
	-webkit-box-shadow: 8px 8px 8px rgba(0,0,0,.2);
	box-shadow: 8px 8px 8px rgba(0,0,0,.2);
}


.flatShadowBlue{
	-moz-box-shadow: 0px 0px 20px rgba(0,0,255,.7) ;
	-webkit-box-shadow: 0px 0px 20px rgba(0,0,255,.7) ;
	box-shadow: 0px 0px 20px rgba(0,0,255,.7) ;
	

}

.flatShadowMain{
	-moz-box-shadow: 0px 0px 20px rgba(255, 152, 5, 0.7) ;
	-webkit-box-shadow: 0px 0px 20px rgba(255, 152, 5,.7) ;
	box-shadow: 0px 0px 20px rgba(255, 152, 5,.7) ;

}

.innerflatShadow{
	-moz-box-shadow: inset 0px 0px 12px 			rgba(1, 57, 121,0.3);
	-webkit-box-shadow: inset 0px 0px 12px 			rgba(1, 57, 121,0.3);
	box-shadow: inset 0px 0px 12px 			rgba(1, 57, 121,0.3);

}


.cornersAll{
	-moz-border-radius: 24px;
	-webkit-border-radius: 24px;
	border-radius: 24px;

}

.corner-top-left {
	-moz-border-radius-topleft: 		24px /*{global-radii-blocks}*/;
	-webkit-border-top-left-radius: 	24px /*{global-radii-blocks}*/;
	border-top-left-radius: 			24px /*{global-radii-blocks}*/;

}
.corner-top-right {
	-moz-border-radius-topright: 		24px /*{global-radii-blocks}*/;
	-webkit-border-top-right-radius: 	24px /*{global-radii-blocks}*/;
	border-top-right-radius: 			24px /*{global-radii-blocks}*/;

}
.corners-left {
	-moz-border-radius-topleft: 		24px /*{global-radii-blocks}*/;
	-webkit-border-top-left-radius: 	24px /*{global-radii-blocks}*/;
	border-top-left-radius: 			24px /*{global-radii-blocks}*/;
	-moz-border-radius-bottomleft: 		24px /*{global-radii-blocks}*/;
	-webkit-border-bottom-left-radius: 	24px /*{global-radii-blocks}*/;
	border-bottom-left-radius: 			24px /*{global-radii-blocks}*/;
}

.corners-right {
	-moz-border-radius-topright: 		24px /*{global-radii-blocks}*/;
	-webkit-border-top-right-radius: 	24px /*{global-radii-blocks}*/;
	border-top-right-radius: 			24px /*{global-radii-blocks}*/;
	-moz-border-radius-bottomright: 		24px /*{global-radii-blocks}*/;
	-webkit-border-bottom-right-radius: 	24px /*{global-radii-blocks}*/;
	border-bottom-right-radius: 			24px /*{global-radii-blocks}*/;
}

.corner-top-left {
	-moz-border-radius-topleft: 		24px /*{global-radii-blocks}*/;
	-webkit-border-top-left-radius: 	24px /*{global-radii-blocks}*/;
	border-top-left-radius: 			24px /*{global-radii-blocks}*/;

}

.corners-top {
	-moz-border-radius-topleft: 		24px /*{global-radii-blocks}*/;
	-webkit-border-top-left-radius: 	24px /*{global-radii-blocks}*/;
	border-top-left-radius: 			24px /*{global-radii-blocks}*/;
	-moz-border-radius-topright: 		24px /*{global-radii-blocks}*/;
	-webkit-border-top-right-radius: 	24px /*{global-radii-blocks}*/;
	border-top-right-radius: 			24px /*{global-radii-blocks}*/;
}
.corners-bottom {
	-moz-border-radius-bottomleft: 		24px /*{global-radii-blocks}*/;
	-webkit-border-bottom-left-radius: 	24px /*{global-radii-blocks}*/;
	border-bottom-left-radius: 			24px /*{global-radii-blocks}*/;
	-moz-border-radius-bottomright: 	24px /*{global-radii-blocks}*/;
	-webkit-border-bottom-right-radius: 24px /*{global-radii-blocks}*/;
	border-bottom-right-radius: 		24px /*{global-radii-blocks}*/;
	}

.corner-bottom-left {
	-moz-border-radius-bottomleft: 		24px /*{global-radii-blocks}*/;
	-webkit-border-bottom-left-radius: 	24px /*{global-radii-blocks}*/;
	border-bottom-left-radius: 			24px /*{global-radii-blocks}*/;
	}

.boxRoll{
	cursor:pointer;
}

.boxRoll:hover {
	-moz-box-shadow: 0px 0px 20px var(--main);
	-webkit-box-shadow: 0px 0px 20px var(--main);
	box-shadow: 0px 0px 20px var(--main);

	cursor: pointer;
}

.linkRoll{
	cursor:pointer;
}

.linkRoll:hover {

	-moz-box-shadow: 0px 0px 20px var(--main);
	-webkit-box-shadow: 0px 0px 20px var(--main);
	box-shadow: 0px 0px 20px var(--main);

	cursor: pointer;
	color: var(--tone_0);
}


.linkRollReverse{
	cursor:pointer;
}

.linkRollReverse:hover {

	-moz-box-shadow: 0px 0px 20px var(--main);
	-webkit-box-shadow: 0px 0px 20px var(--main);
	box-shadow: 0px 0px 20px var(--main);

	cursor: pointer;
	color: var(--main);
}


.basicRoll{
	cursor:pointer;
	color:var(--tone_0);
}

.basicRoll:hover {

	color:var(--main);
}

.borderRoll{
	cursor:pointer;
	/* border:thin solid rgba(0,0,0,0); */
    
}

.borderRoll:hover {

	/* border:thin solid var(--hilite_1); */
    /* -moz-box-shadow: inset 0px 0px 12px 			rgba(79, 208, 255, 0.8);
	-webkit-box-shadow: inset 0px 0px 12px 			rgba(79, 208, 255, 0.8);
	box-shadow: inset 0px 0px 12px 			rgba(79, 208, 255, 0.8); */
    background: rgb(168, 195, 255,0.3)
}
.innerRoll{
	cursor:pointer;
    
	/* border:thin solid rgba(0,0,0,0); */
    
}

.innerRoll:hover {

    color: var(--tone_0);
  background: var(--hilite_1);
  
}

.zoomRoll{
    cursor:pointer;
    background-color:var(--glassDark);
    -webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);

    z-index:1000;
}

.zoomRoll:hover{
    cursor:pointer;
    border:thin solid var(--tone_0);
    /* color:var(--tone_0); */
    box-shadow: -1px -1px 8px var(--main), 1px -1px 8px var(--main), -1px 1px 8px var(--main), 1px 1px 8px var(--main);

    background-color:var(--backBlur);
    animation: scaleZoomRoll 0.5s forwards;
    z-index:2000;
}

@keyframes scaleZoomRoll {
	0% { transform: scale(1); }
	100% { transform: scale(1.15); }
}

.zoomRollSmall{
    cursor:pointer;
    background-color:var(--glassDark);
    -webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);

    z-index:1000;
}

.zoomRollSmall:hover{
    cursor:pointer;
    border:thin solid var(--tone_0);
    /* color:var(--tone_0); */
    box-shadow: -1px -1px 8px var(--main), 1px -1px 8px var(--main), -1px 1px 8px var(--main), 1px 1px 8px var(--main);

    /* background-color:var(--backBlur); */
    animation: scaleZoomRollSmall 0.5s forwards;
    z-index:2000;
}

@keyframes scaleZoomRollSmall {
	0% { transform: scale(1); }
	100% { transform: scale(1.15); }
}

/*  .textArea{

	background-color:var(--hilite_2);
	  -moz-border-radius: 10px;
	  -webkit-border-radius: 10px;
	  border-radius: 10px;
      border: 1px solid var(--hilite_1);
	
	  padding:5px;
	  padding-left:8px;
	  font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	  font-size: 12px;
	  line-height:12px;
	  font-weight:normal;
   -moz-box-shadow:inset 0px 0px 4px rgba(0,0,0,.2) ;
	-webkit-box-shadow: inset 0px 0px 4px rgba(0,0,0,.2) ;
	box-shadow: inset 0px 0px 4px rgba(0,0,0,.2) ;
}
*/

.file-select {
	border-collapse: separate;
	overflow: hidden;
  
	border: 1px solid var(--hilite_1);
	padding: 5px 15px;

	background-color:var(--hilite_2);
	color:var(--tone_0);

	
	-moz-appearance:none !important;
	-webkit-appearance: none !important; 
	appearance: none !important;
	padding-right: 2rem !important;

	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	cursor:pointer;

    font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	  font-size: 13px;
	  line-height:13px;
	  font-weight:normal;
}

.styled-select {
	border-collapse: separate;
	overflow: hidden;
  
	border: 1px solid var(--hilite_1);
	padding: 5px 15px;

	background: var(--select_box_icon_mini);
	/* background-color:var(--hilite_2); */
	color:var(--tone_0);

	background-repeat: no-repeat;
	background-position: calc(100%) 8px !important;
	-moz-appearance:none !important;
	-webkit-appearance: none !important; 
	appearance: none !important;
	padding-right: 2rem !important;

	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	cursor:pointer;
}

.styled-select-mini {
	border-collapse: separate;

	padding: 5px;
	padding-left:8px;
	
	background: var(--select_box_icon_mini);
	border: 1px solid var(--hilite_1);
	background-color:var(--hilite_2);
	color:var(--tone_0);
	background-repeat: no-repeat;
	background-position: calc(100%) 5px !important;
	-moz-appearance:none !important;
	-webkit-appearance: none !important; 
	appearance: none !important;
	padding-right: 2rem !important;

	font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	  font-size: 12px;
	  line-height:12px;
	  font-weight:normal;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	cursor:pointer;
}

.styled-select-large {
	border-collapse: separate;

	padding: 8px;
	padding-left:8px;
	
	background: var(--select_box_icon_mini);
	border: 1px solid var(--tone_0);
	background-color:var(--hilite_2);
	color:var(--tone_0);
	background-repeat: no-repeat;
	background-position: calc(100%) 12px !important;
	-moz-appearance:none !important;
	-webkit-appearance: none !important; 
	appearance: none !important;
	padding-right: 2rem !important;

	font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	  font-size: 18px;
	  line-height:18px;
	  font-weight:normal;

	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	cursor:pointer;
}

.styled-select-mini-dark {
	border-collapse: separate;

	padding: 5px;
	padding-left:8px;
	
	background: var(--select_box_icon_mini);
	border: 1px solid var(--tone_c);
	background-color:var(--tone_5);
	color:var(--tone_0);
	background-repeat: no-repeat;
	background-position: calc(100%) 5px !important;
	-moz-appearance:none !important;
	-webkit-appearance: none !important; 
	appearance: none !important;
	padding-right: 2rem !important;

	font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	  font-size: 12px;
	  line-height:12px;
	  font-weight:normal;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	cursor:pointer;
}


.styled-select-blank {
	
	border-collapse: separate;

	padding: 5px;
	padding-left:2px;
	
	background:none;
	border: 1px solid var(--tone_c);
	color:var(--tone_0);
	
	-moz-appearance:none !important;
	-webkit-appearance: none !important; 
	appearance: none !important;
	padding-right: 2rem !important;

	font-family: Montserrat, Verdana, Arial, Helvetica, sans-serif;
	  font-size: 12px;
	  line-height:12px;
	  font-weight:normal;


}

.borderWarning{
    border: 2px solid #f00;
}

.glassHilite{
	background-color:var(--glassHilite);

}

.glassHiliteVirtualDevice{
	background-color:rgba(168, 248, 255,0.8);

}

.glassMain{
	background-color: var(--glass_main);

}

.glassWhite{
	background-color:rgba(255,255,255,0.8);

}

.glassBlack{

	background-color:rgba(0,0,0,0.8);
}

.glassDark{

	background-color:var(--glassDark);
}

.glassExtraDark{

	background-color:var(--glassExtraDark);
}

.blur {
-webkit-filter: blur(10px); -moz-filter: blur(10px);
-o-filter: blur(10px); -ms-filter: blur(10px);
filter: url(#blur); filter: blur(10px);  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}



@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
	.backBlur {
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}

	.glassExtraDark{

		background-color:var(--glassExtraDark);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}

	.glassDark{

		background-color:var(--glassDark);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}

	.glassBlack{

		background-color:rgba(0, 0, 0, 0.8);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}

	.glassWhite{
		background-color:rgba(255,255,255,0.1);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	
	}
    .glassMain{
		background-color:var(--glass_main);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	
	}

    .glassHilite{
        background-color:var(--glassHilite);
        -webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
    }

	.glassHiliteVirtualDevice{
		background-color:rgba(168, 248, 255, 0.2);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	
	}

  }

.underline {
	text-decoration: underline;
}


.loader_white {
	border: 3px solid var(--hilite_2);
	border-radius: 50%;
	border-top: 3px solid var(--tone_0);

	-webkit-animation: loaderSpin 1s linear infinite; /* Safari */
	animation: loaderSpin 1s linear infinite;
  }

.loader {
	border: 4px solid var(--main);
	border-radius: 50%;
	border-top: 4px solid var(--tone_0);

	-webkit-animation: loaderSpin 1s linear infinite; /* Safari */
	animation: loaderSpin 1s linear infinite;
  }

  @-webkit-keyframes loaderSpin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes loaderSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }

  .loaderSlow {
	border: 4px solid var(--tone_5);
	border-radius: 50%;
	border-top: 3px solid var(--main);

	-webkit-animation: loaderSpin 10s linear infinite; /* Safari */
	animation: loaderSpin 10s linear infinite;
  }

  @-webkit-keyframes loaderSpin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes loaderSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }




 /* Tooltip container */
.tooltip-up {
  
}

.tooltip-up::after {
	content: " ";
	position: absolute;
	top: 100%; /* At the bottom of the tooltip */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: rgb(168, 195, 255,0.3) transparent transparent transparent;
  
}

.tooltip-down {
  
}

.tooltip-down::after {
	content: " ";
	position: absolute;
	bottom: 100%; /* At the bottom of the tooltip */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent rgb(168, 195, 255,0.3) transparent;
  
}

.box80{
    width:80%;
    box-sizing:border-box;
  
}

.box70{
    width:70%;
    box-sizing:border-box;
  
}

.box60{
    width:60%;
    box-sizing:border-box;
  
}

.box40{
    width:40%;
    box-sizing:border-box;
  
}

.box50{
    width:50%;
    box-sizing:border-box;
   
}

.box33{
    width:33%;
    box-sizing:border-box;
   
}

.box30{
    width:30%;
    box-sizing:border-box;
}

.box25{
    width:25%;
    box-sizing:border-box;
}

.box20{
    width:20%;
    box-sizing:border-box;
}

.box10{
    width:10%;
    box-sizing:border-box;
}

.box16{
    width:16%;
    box-sizing:border-box;
}

.box5{
    width:5%;
    box-sizing:border-box;
}

@media screen and (max-width: 700px) {
    .box80{
        width:100%;
    
    }

    .box70{
        width:100%;
    
    }

    .box60{
        width:100%;
    
    }

    .box40{
        width:100%;
    
    }

    .box50{
        
        width:100%;
    }

    .box33{
        width:100%;
    
    }


    .box30{
        width:100%;
    }

    .box25{
        width:100%;
    
    }

    .box20{
        width:100%;
    
    }
    .box16{
        width:100%;
    }
    .box10{
        width:100%;
    }

    .box5{
        width:100%;
    }
}