.btn-block{
	width: 100%;
}


.btn {
  background-color: var(--button-color);
  color: var(--text-color);
	padding: 8px 13px;
	margin-top: 3px;
	margin-bottom: 3px;
  	box-sizing: border-box;
	border-radius: 8px;

	font-family: 'Ubuntu', sans-serif;
	font-size: 16px;
	font-weight: 600;
	border-radius: 10px;
	cursor: pointer;

}


.uppercase{
	text-transform: uppercase;

}

.btn-brand{
	text-transform: uppercase;

	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	color: var(--text-color);
	display: inline-block;
	position: relative;

	border:  2px solid #eeeeee23;
	transition: all 0.2s linear;

/*  background: transparent linear-gradient(138deg, var(--accent-color) 0%, var(--shadow-color) 50%, var(--accent-color) 100%) 0% 0% no-repeat padding-box;*/
/*  background: transparent linear-gradient(138deg, #8937F399 0%, #F243B299 100%) 0% 0% no-repeat padding-box;*/
  background: var(--accent-color);
  opacity: 0.88;
  
  color: #fff !important;
  text-transform: uppercase;



}

.btn-brand:active, 
.btn-brand:visited, 
.btn-brand:focus, 
.btn-brand:hover, 
.btn-brand:active:hover, 
.btn-brand:visited:hover, 
.btn-brand:focus:hover {
/*	background-color: var(--shadow-color);*/
	background-color: hsl(var(--application-hue), 60%, 30%);

	color: var(--text-color);
	outline: none;
	border-radius: 0;
	border:  2px solid var(--accent-color);
}


.btn-outline {
	text-transform: uppercase;
	background-color: transparent;
	cursor: pointer;
	font-size: 16px;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	color: var(--text-color);
	display: inline-block;
	position: relative;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	border: solid 1px var(--accent-color);
	transition: all 0.2s linear;
	padding: 5px 8px;
	margin: 1px;
}

.btn-outline:active, 
.btn-outline:visited, 
.btn-outline:focus, 
.btn-outline:hover, 
.btn-outline:active:hover, 
.btn-outline:visited:hover, 
.btn-outline:focus:hover {
	background-color: var(--accent-color);
	color: #eee;
	outline: none;
	border-radius: 0;
}



.btn-danger{
	border:  2px solid #a22;
}




.btn-gradient {
    font-size: 14px !important;
    border: 1px solid var(--g2);
    background: linear-gradient(165deg,#fe3db0c2,#a26dccde,#5585DB);
    background-size: 720px;
    border-radius: 10px;
    padding: 10px 15px !important;
    color: white;
    text-transform: uppercase;

    display: inline-block;
    width: 100%;
    max-width: 360px;
    margin-top: 6px;
    border-radius: 6px;
    background-position:360px;  

    transition: background 0.2s ease-out;  
}

.btn-gradient:hover {
    background-position:720px;  
}

.btn-gradient:hover{
    background: linear-gradient(165deg,#fe3db0c2,#a26dccde,#5585DB);
}



.btn-profile {
    font-size: 14px !important;
    border: 1px solid #FFFFFF66;
    background-size: 720px;
    border-radius: 10px;
    padding: 10px 15px !important;
    color: white;
    text-transform: uppercase;
    display: inline-block;
    width: 100%;
    margin-top: 6px;
    border-radius: 6px;
    background-position:360px;  
    transition: background 0.2s ease-out;  
}

.btn-profile:hover {
    background-position:720px;  
    border: 1px solid var(--accent-color);
}

.btn-profile:hover{
    background: linear-gradient(165deg,var(--g3),var(--g2),var(--g3));
}


.btn-big-square{
    background-color: #FFFFFF11;
    border: 1px solid #FFFFFF33;
    width: 280px;
    margin: 20px;
}

.btn-big-square:hover{
    background-color: #FFFFFF22;
    border: 1px solid #FFFFFF44;
}


.btn-not-yet-available{
    opacity: 0.3;
}



.btn{
    cursor: pointer;
}

.btn{
    cursor: pointer;
}

.btn-profile {
    font-size: 14px !important;
    border: 1px solid var(--g3);
    background-color: #00000033;
    background-size: 720px;
    border-radius: 10px;
    padding: 10px 15px !important;
    color: white;
    text-transform: uppercase;

    display: inline-block;
    width: 100%;
    margin-top: 6px;
    border-radius: 6px;
    background-position:360px;  

    transition: background 0.2s ease-out;  
}

.btn-gradient {
    font-size: 14px !important;
    border: 1px solid var(--g2);
    background: linear-gradient(165deg,#fe3db0c2,#a26dccde,#5585DB);
    background-size: 720px;
    border-radius: 10px;
    padding: 10px 15px !important;
    color: white;
    text-transform: uppercase;

    display: inline-block;
    width: 100%;
    margin-top: 6px;
    border-radius: 6px;
    background-position:360px;  

    transition: background 0.2s ease-out;  
}

.btn-gradient:hover {
    background-position:720px;  
}

.btn-gradient:hover{
    background: linear-gradient(165deg,#fe3db0c2,#a26dccde,#5585DB);
}

.btn-profile {
    font-size: 14px !important;
    border: 1px solid #FFFFFF66;
    background-size: 720px;
    border-radius: 10px;
    padding: 10px 15px !important;
    color: white;
    text-transform: uppercase;

    display: inline-block;
    width: 100%;
    margin-top: 6px;
    border-radius: 6px;
    background-position:360px;  

    transition: background 0.2s ease-out;  
}

.btn-profile:hover {
    background-position:720px;  
    border: 1px solid var(--g1);
}

.btn-profile:hover{
    background: linear-gradient(165deg,var(--g3),var(--g2),var(--g3));
}