html {

  position:relative;
  min-height: 100%;
}

body {margin-top:50px; margin-bottom: 60px; background: #f7f7f7;font-family: "exo 2";}


a {color:#fc575e}

h1{border-bottom: 1px solid #ddd;padding: 20px 0;margin-bottom: 20px; font-weight: 300;}

h2{margin-top: 10px; margin-bottom: 10px;font-weight: 300; font-size: 26px; line-height: 30px}

h3{margin-top: 10px; margin-bottom: 10px;font-weight: 300; font-size: 22px;}

.navbar-footer {
  position: absolute;
  width: 100%;
border-radius: 0px;
  bottom: 0;
  margin-bottom: 0;
  height: 60px;
}

.margin-top{margin-top: 20px;}


.navbar-header{float:none;text-align: center;}
	
	/* top bar */
	.navbar {text-transform: uppercase;background-color: #00001e;border: none}
	.navbar a  {color:#000;font-weight: 300;text-decoration: none}
	.navbar-default .navbar-brand {color:#000;font-weight: bold;margin:0;line-height:50px;float:none; margin-left: auto; margin-right: auto; width: 60px; float: none; }

        .navbar-brand-footer { font-size: 14px;}
        .navbar{background-color: #ff474e}
	.icon{margin-bottom: 8px;margin:0;padding: 15px 15px; float:right;}
    
	    .back{float:left;background-color: #feaf8d;}
	    .search{background: #fb7b74; float:left;}
            .logo{float:left; padding:5px;}
	    
	    .tw{background: #3fc6f3}
	    .fb{background: #0d9be5}
    
    
    /* toggle button */
    .navbar-toggle{border: none;margin:0;padding: 18px 15px; border-radius: 0px;float:left;}
    .navbar-default .navbar-toggle,
	.navbar-default .navbar-toggle:hover,
	.navbar-default .navbar-toggle:focus {background-color: #ff474e;}
	.navbar-default .navbar-toggle .icon-bar {background-color: #000;}
	
	
	/* Position where the element is fixed */
	.affix {/*top: 100px;*/ width: 180px; }
	#affix {width: 180px;}

	.nav li a {border-bottom: 1px solid #ddd; color:#7b7a7e;}
	.nav li a i {margin-right:10px;}
    

    /* list */ 
    .ux-mood{font-size: 18px; font-weight: 300;margin-bottom: 40px}
    .ux-mood li{margin-bottom: 10px}
    .upper{text-transform: uppercase; font-weight: bold}



        .sidebar-offcanvas ul li{background-color: #ff474e; margin:0}
        .sidebar-offcanvas ul li a{color:#000;padding: 10px 0px 10px 10px ;margin:0;font-size: 15px;border-bottom: 0px solid #d6474d;border-radius:inherit;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.2s ease-in-out;
                -ms-transition: all 0.2s ease-in-out;
                -o-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;}
        .sidebar-offcanvas ul li a:hover{color:#fff;padding: 10px 0px 10px 15px;background:#54303a;border-radius:inherit;}
        .sidebar-offcanvas ul li a:focus{color:#fff;padding: 10px 0px 10px 15px;background:#000000;border-radius:inherit;}
	.sidebar-offcanvas ul li a.active{padding: 10px 0px 10px 15px;border:none; border-radius:inherit;}
	.sidebar-offcanvas ul li ul li i{margin-left: 15px;}

        /* .nav{margin-top: 0px;} */
        /* .nav > li > a:hover,
            .nav > li > a:focus{background-color: #ff625f} */



  .list-first-element{padding-top:10px; border-radius:10px 10px 0 0}
  .list-last-element{border-radius: 0 0 10px 10px}

.form-actions {
    text-align: center;
}

img.logo-ten2 {
	width: 40px;
	height: 40px; 
	border-radius: 20%;
}
img.logo-promo {
	background:none;
	width: 100px;
	height: 36px;
        border-radius: 5px;
	
}
img.logo-hera {
        background:none;
        width: 100px;
        height: 36px;
        border-radius: 5px;

}

.sidebar-header {
	text-align: center;
	padding-bottom: 10px;
	font-size: 20px;
}

.login-wall
{
    margin: 20px 5px 5px 5px;
    padding: 40px 20px 20px 20px;
    background-color: #e7e7e7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.my-row-archive {
	border: 0px;
	border-radius: 10px;
	padding: 5px 0 5px 0;
	margin: 5px 0 5px 0;
}
.my-row-archive:hover {
        padding: 5px 0 5px 0;
        margin: 5px 0 5px 0;
	background-color: #ddd;
}
.my-row-thread {
        border: 0px;
        border-radius: 10px;
        padding: 5px 0 5px 0;
        margin: 5px 0 5px 0;
}

.my-archive {
	display: table-cell;
}
.my-archive-header {
        width: 32px;
}

.my-sidebar-header {
        width: 16px;
}

.my-archive-smstext {
word-wrap: break-word;
}


.my-modal-center {
}

.theme-selector {
	padding: 20px 40px;
	transition: 0.25s all ease-out;
}
.theme-selector div {
        padding: 20px 0px;
	text-align: center;
}


.theme-selector:hover {
	background-color: #d1d1d1;
	padding: 20px 20px;
	transition: 0.25s all ease-out;
	
}
.theme-selector:active {
        background-color: #a1a1a1;
	transition: 0.25s all ease-out;
}

.my-label-info {
	vertical-align: text-top;
	font-size: 50%;
}

.my-panel-heading-clickable {
	cursor: pointer;
}
.my-panel-heading-clickable:hover {
	background-color: #ddd;
}
.recharge-tier {
transition: background-color 0.5s ease;
transition: border 0.5s ease;
        cursor: pointer;
background-color: #ececec;
border: 5px solid #e3e3e3;
border-radius: 8px;
padding: 8px;
margin-bottom: 20px;
background: linear-gradient(to bottom, #e3e3e3 0%, #e3e3e3 33%,#ececec 34%,#ececec 100%);

}
.recharge-tier p {
margin:0;
}
.recharge-tier h3 {
width: 100%;
margin-bottom: 0px;
margin-top: 5px;
margin: auto;
text-align: center;
}
.recharge-tier:hover {
background-color: #e3e3e3;
border: 5px solid #ececec;
}

.recharge-tier:active {
background-color: #e3e3e3;
border: 5px solid #ececec;
}
.recharge-tier.selected {
background-color: #e3e3e3;
border: 5px solid #ececec;
}
.recharge-tier h3 span {
transition: background 0.5s ease;
transition: border 0.5s ease;
display: block;
width: 100px;
height: 100px;
border-radius: 100px;
border: 5px solid #e3e3e3;
box-shadow: 0 8px 20px #999 inset, 0 5px 0 #ddd inset;
text-align: center;
vertical-align:middle;
padding: 20px 0 0 0;
margin: auto;
background: #ececec;

}
.recharge-tier.selected h3 span {
box-shadow: 0 8px 20px #ddd inset, 0 5px 0 #999 inset;
}

.recharge-tier-square h3 span {
width: 100px;
height: 100px;
padding: 30px 0px 0 0px;
border: 0px solid #e3e3e3;
background: inherit;
box-shadow: 0 0 0 #999 inset, 0 0 0 #ddd inset;
border-radius: 0;
}
.recharge-tier-square h3 span input {
text-align: center;
}

.col-user-choice {
padding-left: 5px;
padding-right: 5px;
}


.icon-validation {

position: absolute;
right: 25px; 
bottom: 10px;
    -webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
}

.icon-valid {
color: green;
}

.icon-invalid {
color: red;
}

.input-validation:invalid + i.icon-invalid {opacity: 1; z-index: 10;}
.input-validation:invalid + i + i.icon-valid {opacity: 0; z-index: -10;}

.input-validation:valid + i.icon-invalid {opacity:0; z-index:-10;}
.input-validation:valid + i + i.icon-valid { opacity:1; z-index: 10;}

.city-tier {
transition: background-color 0.5s ease;
transition: border 0.5s ease;
        cursor: pointer;
background-color: #ececec;
border: 4px solid #e3e3e3;
border-radius: 8px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
margin-bottom: 5px;
text-align: center;
text-transform: uppercase;

}
.city-tier:hover {
background-color: #e3e3e3;
border: 4px solid #ececec;
}

.city-tier:active {
background-color: #e3e3e3;
border: 4px solid #ececec;
}
.city-tier.selected {
background-color: #e3e3e3;
border: 4px solid #ececec;

}

.message-tier {
transition: background-color 0.5s ease;
transition: border 0.5s ease;
cursor: pointer;
background-color: #ececec;
border: 4px solid #e3e3e3;
border-radius: 8px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
margin-bottom: 5px;
text-align: center;


}
.message-tier:hover {
background-color: #e3e3e3;
border: 4px solid #ececec;
}

.message-tier:active {
background-color: #e3e3e3;
border: 4px solid #ececec;
}
.message-tier.selected {
background-color: #e3e3e3;
border: 4px solid #ececec;
}
.messages-container {
display: none;
}
.messages-container.show {
display: block;
}
.hour-range-container {
display: none;
}
.hour-range-container.show {
display: block;
}
.sms-code-container {
display: none;
}
.sms-code-container.show {
display: block;
}

.smspreview {
background-color: #ececec;
    border: 4px solid #e3e3e3;
    border-radius: 8px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
}

.help-content {
	text-align: justify;
}

.bubble
{
position: relative;
padding: 6px 6px;
background: #CCC;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 16px;
}
.bubble-contact {
	margin-top: 5px;
	margin-bottom: 5px;
}

.bubble-users {
        margin-top: 5px;
        margin-bottom: 5px;
	display: none;
}

.template-row {
	display: none;
}

.bubble footer {
padding-top: 2px;
padding-left: 4px;
font-style: italic;
font-size: 11px;
}

.bubble-mt
{
-webkit-border-radius: 4px 0px 4px 4px;
-moz-border-radius: 4px 0px 4px 4px;
border-radius: 4px 0px 4px 4px;
}

.bubble-mt:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 6px  0 6px 11px ;
border-color: transparent #CCC;
display: block;
width: 0;
z-index: 1;
right: -10px;
top: 10px;
}

.text-highlight {
	border-bottom: 1px dashed #444; 
	text-decoration: none;
}

/* Modifica per avere il triangolo in alto  e con grafica diversa */
.bubble-mt:after
{
border-width: 0px  0px 11px 11px;
top: 0px;
}

.bubble-mt-commented:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 6px  0 6px 11px ;
border-color: transparent #7F7F7F;
display: block;
width: 0;
z-index: 0;
right: -11px;
top: 10px;
}


.bubble-mo
{
-webkit-border-radius: 0px 4px 4px 4px;
-moz-border-radius: 0px 4px 4px 4px;
border-radius: 0px 4px 4px 4px;
}

.bubble-mo:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 6px 11px 6px 0;
border-width: 0px  11px 11px 0px;
border-color: transparent #CCC;
display: block;
width: 0;
z-index: 1;
left: -10px;
top: 0px;
}

/* Modifica per avere il triangolo in alto  e con grafica diversa */
.bubble-mo:after
{
border-width: 0px  11px 11px 0px;
top: 0px;
}

.bubble-mo-commented:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 6px 11px 6px 0;
border-color: transparent #7F7F7F;
display: block;
width: 0;
z-index: 0;
left: -11px;
top: 15px;
}

.bubble-no
{
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}


.bubble-no:after
{
content: '';
position: absolute;
border-style: solid; 
border-width: 6px  0 6px 11px ;
border-color: transparent #CCC;
display: block;
width: 0;
z-index: 1;
right: -10px;
top: 10px;
}

/* Modifica per avere il triangolo in alto  e con grafica diversa */
.bubble-no:after
{
border-width: 0px  0px 11px 11px;
top: 0px;
}

.bubble-no-commented:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 6px  0 6px 11px ;
border-color: transparent #7F7F7F;
display: block;
width: 0;
z-index: 0;
right: -11px;
top: 10px;
}




/*
.container {
    width: 95%;
}*/
.icon-rotation {
	-moz-transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
.icon-rotation.invert {
	-moz-transform:rotate(-180deg);
	-webkit-transform:rotate(-180deg);
	transform:rotate(-180deg);
}
/*

#last_sms_bubble.fade {
    opacity: 0;
    -webkit-transition: opacity 1.5s linear;
    -o-transition: opacity 1.5s linear;
    transition: opacity 1.5s linear;

}

#last_sms_bubble.fade.in {
	opacity: 1;
}
*/
.lastrow.fade {
    opacity: 0;
    -webkit-transition: opacity 1.5s linear;
    -o-transition: opacity 1.5s linear;
    transition: opacity 1.5s linear;

}

.lastrow.fade.in {
        opacity: 1;
}

.my-form-group-condensed { 
	margin-bottom: 2px;
}


.well {
background-color: #ececec;
border: 2px solid #e3e3e3;
border-radius: 8px;
}


.blockquote-bank {
    padding: 2px 10px;
    margin: 0 0 15px;
    font-size: 14px;
    border-left: 0px solid #eee;
}
.blockquote-bank p {
    margin: 0 0 0 0;
}
.blockquote-bank footer cite {
   font-weight: bold; 
}


textarea {
    max-width: 100%; 
}

/* .slidecheckboxThree */
.slidecheckboxThree {
  width: 80px;
  height: 26px;
  background: #333;
  
  position: relative;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slidecheckboxThree:after {
  content: 'NO';
  color: #000;
  position: absolute;
  right: 10px;
  z-index: 0;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.slidecheckboxThree:before {
  content: 'SI';
  color: #27ae60;
  position: absolute;
  left: 10px;
  z-index: 0;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
}
.slidecheckboxThree label {
  display: block;
  width: 34px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  background: #fcfff4;
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.slidecheckboxThree input[type=checkbox] {
  visibility: hidden;
}
.slidecheckboxThree input[type=checkbox]:checked + label {
  left: 43px;
}

/* end .slideThree */



/* ROUNDED ONE */
.roundedOne {
	width: 28px;
	height: 28px;
	background: #fcfff4;

	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
	margin: 8px auto;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;

	-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	position: relative;
}

.roundedOne label {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	left: 4px;
	top: 4px;

	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

	background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
	background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
	background: -o-linear-gradient(top, #222 0%, #45484d 100%);
	background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
	background: linear-gradient(top, #222 0%, #45484d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.roundedOne label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	background: #00bf00;

	background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
	background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
	background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
	background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
	background: linear-gradient(top, #00bf00 0%, #009400 100%);

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	top: 2px;
	left: 2px;

	-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}

.roundedOne label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.roundedOne input[type=checkbox]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
.roundedOne input[type=checkbox] {
margin: 8px 8px 0;
}

/* end roundedone */




#top-link-block.affix-top {
    position: fixed; /* allows it to "slide" up into view */
    bottom: -180px; /* negative of the offset - height of link element */

    right: 20px; /* padding from the left side of the window */ 
    width: 120px;


        /* transition */
        -webkit-transition: 1s;
        -moz-transition: 1s;
        transition: 1s;
}
#top-link-block.affix {

    position: fixed; /* keeps it on the bottom once in view */
    bottom: 60px; /* height of link element */
    right: 20px; /* padding from the left side of the window */
    width: 120px;
    z-index: 1000;

        /* transition */
        -webkit-transition: 1s;
        -moz-transition: 1s;
        transition: 1s;
}
.my-ricez-badge {
	border-radius: 4px;
}


/* collapsed sidebar styles */
@media screen and (max-width: 767px) {

	
	.affix {position: static;}
	#affix{width: 100%;}
  
	.sidebar-offcanvas{-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		
		width:60%;
		background-color: #ff474e;
		z-index: 51;
		margin: 0; padding: 0;
		position: fixed;
		top:50px;
		left: -60%;
	}


	
	.sidebar-offcanvas ul li{margin:0}
	.sidebar-offcanvas ul li a{color:#000;padding: 5px 10px;margin:0;font-size: 15px;border:none}
	
        .sidebar-offcanvas ul li a:hover{color:#fff;padding: 5px 10px;background:#54303a;border:none; border-radius:0}
        .sidebar-offcanvas ul li a:focus{color:#fff;padding: 5px 10px;background:#000000;border:none; border-radius:0}
	.sidebar-offcanvas ul li a.active{padding: 5px 20px;border:none; border-radius:0;}
	
	.nav{margin-top: 0px;}
	.nav > li > a:hover, 
	.nav > li > a:focus{background-color: #ff625f}
	.navbar-brand { font-size: 14px;}
        .navbar-brand-footer { font-size: 12px;}
        /* toggle button */
    .navbar-toggle{border: none;margin:0;padding: 18px 1px; border-radius: 0px;float:left;}

       @media (orientation:landscape) {
                .sidebar-offcanvas{
                 width: 35%;
                 left: -35%;
                 height: 200%;
                }

       		.sidebar-offcanvas ul li a{font-size: 15px;} 
        }
.bubble {
font-size: 14px;
}

.bubble footer {
font-size: 10px;
}
	
.theme-selector {
        padding: 5px 10px;
}
.theme-selector div {
        padding: 5px 0px;
}


.theme-selector:hover {
        padding: 5px 5px;

}

.my-row-archive {
}

.active {
	left: 0;
}

img.logo-promo {
	background:none; 
	width: 50px; 
	height: 18px;
        margin-top: 10px;
}

img.logo-hera {

        background:none;
        width: 50px;
        height: 18px;
        margin-top: 10px;
}

 
}