:root {
  --page-background-color: #f1f1f1;
  --page-foreground-color: #000000;
  --bloc-background-color: #ffffff;
  --bloc-foreground-color: #000000;
  --title-background-color: #eeeeee;
  --title-foreground-color: #000000;
  --select-background-color: #ffffff;
  --select-foreground-color: #000000;
  --input-text-background-color: #ffffff;
  --input-text-foreground-color: #000000;
  --input-text-border-color: #000000;
  --focus-background-color: #b9ebfb;
}

body
{
  background-color:#ffffff;
  margin:auto;
  font-family: sans-serif;
}

h1
{
   font-weight:400;
   font-size:26px;
}

h2
{
   font-weight:400;
   font-size:22px;
}

h3
{
   font-weight:400;
   font-size:18px;
}

.onoffswitch {
position:relative;
width:80px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
box-shadow: inset 10px 10px 5px 0px #cfcfcf;
border-radius: 10px;
}

.onoffswitch-checkbox {
display:none;
}

.onoffswitch-label {
display:block;
overflow:hidden;
cursor:pointer;
border:1px solid #DBD9D9;
width:80px;
}

.onoffswitch-inner {
width:200%;
margin-left:-100%;
-moz-transition:margin 0.3s ease-in 0s;
-webkit-transition:margin 0.3s ease-in 0s;
-o-transition:margin 0.3s ease-in 0s;
transition:margin 0.3s ease-in 0s;
}

.onoffswitch-inner > div {
float:left;
position:relative;
width:50%;
height:20px;
padding:0;
line-height:20px;
font-size:14px;
color:white;
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.onoffswitch-inner .onoffswitch-active {
padding-left:15px;
background-color:#F9F9F9;
color:#FFFFFF;
}
.onoffswitch-inner .onoffswitch-inactive {
padding-right:15px;
background-color:#F9F9F9;
color:#FFFFFF;
text-align:right;
}
.onoffswitch-switch {
width:40px;
margin:0;
text-align:center;
border:0 solid #999999;
border-radius:0;
position:absolute;
top:0;
bottom:0;
}
.onoffswitch-active .onoffswitch-switch {
background:#BFD63B;
left:0;
}
.onoffswitch-inactive .onoffswitch-switch {
background:#000000;
right:0;
}
.onoffswitch-active .onoffswitch-switch:before {
content:"";
position:absolute;
top:0;
left:40px;
border-style:solid;
border-color:#BFD63B transparent transparent #BFD63B;
border-width:15px 10px;
}
.onoffswitch-inactive .onoffswitch-switch:before {
content:" ";
position:absolute;
top:0;
right:40px;
border-style:solid;
border-color:transparent #000000 #000000 transparent;
border-width:15px 10px;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left:0;
 }

/*
-----------------------------------------------------------------------------------------------------------------------------------
tabs
-----------------------------------------------------------------------------------------------------------------------------------
*/

.container-tabs
{
   max-width: 90vw;
   vertical-align:bottom;
}

.title-tab
{
   background: #f1f1f1;
   border-radius: .5em .5em 0 0;
   border:1px solid #f1f1f1;
   height: 2.5em;
   line-height: 2.5em;
   margin-right: .25em;
   padding: 0 1em;
   display:inline-block;
   color: #000000;
   font-weight:900;
   vertical-align:bottom;
}

.title-tab-unselected
{
   background: #f1f1f1;
   border-radius: .5em .5em 0 0;
   border:1px solid #f1f1f1;
   height: 2.5em;
   line-height: 2.5em;
   margin-right: .25em;
   padding: 0 1em;
   display:inline-block;
   color: #000000;
   font-weight:100;
   font-size:14px;
   vertical-align:bottom;
}

.content-tabs
{
   background: #f1f1f1;
   border-radius: 0 .5em .5em .5em;
   position: relative;
   width: 100%;
   padding:30px;
}


/*
-----------------------------------------------------------------------------------------------------------------------------------
check box
-----------------------------------------------------------------------------------------------------------------------------------
*/

.my-custom-input-label-box input[type="checkbox"] {
	display:none;
}

.my-custom-input-label-box input + label {
	display: inline-block;
	width: 30px;
	height: 26px;
	cursor: pointer;
	background-image: url(/images/checkbox-unchecked.png);
	font-size:10px;
}

.my-custom-input-label-box input[type="checkbox"]:checked + label {
	background-image: url(/images/checkbox-checked.png);
}

.my-custom-input-label-box input[type="checkbox"]:disabled + label {
	background-image: url(/images/checkbox-disabled.png);
}

#checkbox_list_actions{
	z-index:11;
	background-color:#f4f6fb;
	border-top:1px solid #999999;
	display:none;
	position:fixed;
	bottom:-30vh;
	left:0;
	width:100vw;
	height:10vh;
	padding:20px;
	text-align:center;
	animation:checkbox_list_actions_move 1s;
}

@keyframes checkbox_list_actions_move{
    from {bottom: -30vh;} 
    to{bottom:0;} 
}

/*
-----------------------------------------------------------------------------------------------------------------------------------
tooltip
-----------------------------------------------------------------------------------------------------------------------------------
*/

.tooltip {
  position: relative;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding-left:20px;
  padding-right:20px;
  padding-top:10px;
  padding-bottom:10px;
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 50%;
  margin-left: -50%;
  opacity: 0;
  transition: opacity 0.3s;
  min-width:300px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-left: 20px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}