@CHARSET "UTF-8";

body {
	background-image: url("../images/bg-tile-login.png");
	font-family: arial;
	font-size: 12px;
	overflow-x: hidden;
	color: #c1c1c1;
}

legend {
	font-weight: bold;
}

button {
	color: #c1c1c1;
	border-radius: 3px;
}

input[type=text],input[type=password],input[type=number],textarea,.listBox {
	background: url("../images/bg-input.png");
	border: 1px solid rgba(23,23,23,0.9);
	color: #ffffff;
	padding-left: 5px;
	border-radius: 3px;
	text-transform: uppercase;
}

input[readonly="readonly"],textarea[readonly="readonly"],.listBox {
	border: 1px solid rgba(79,79,79,0.9);
	color: #c1c1c1;
}

textarea, .listBox {
	background: rgb(79, 79, 79) !important;
}

.bold {
	font-weight: bold;
}

.inputNoneCase {
	text-transform: none !important;
}

.inputRight {
	text-align: right;
	padding-right: 5px;
}

.styled-select select {
   	background: transparent;
	width: 268px;
	height: 30px;
	border: none;
	color: #c1c1c1;
	-webkit-appearance: none;
}

.styled-select select option{
   	background: #383838;
	width: 268px;
	height: 30px;
	color: #c1c1c1;
	-webkit-appearance: none;
}

.styled-select select option{
   	background: #383838;
	width: 268px;
	height: 30px;
	color: #c1c1c1;
	-webkit-appearance: none;
}
   
.styled-select {
	width: 240px;
	height: 30px;
	overflow: hidden;
	background: url("../images/arrow-down-combo.png") no-repeat right #383838;
	border: 1px solid rgba(23,23,23,0.9);
	border-radius: 3px;
}

#header{
	background-image: url("../images/header-bg.png");
	height: 34px;
	padding: 10px;
	margin: -8px -8px 0 -8px;
	width: 100%;
	display: block;
}

.red-button{
	background: url("../images/btn-sprite-red.png") 0 0 no-repeat;
	width: 100px;
	height: 30px;
	border: none;
}

.red-button:HOVER{
	background-position: 0 -32px;
	cursor: pointer;
}
.red-button:ACTIVE{
	background-position: 0 -64px;
}

.red-button-50 {
	background: url("../images/btn-sprite-red-50.png") 0 0 no-repeat;
	width: 50px;
	height: 25px;
	border: none;
}

.red-button-50:HOVER{
	background-position: 0 -27px;
	cursor: pointer;
}
.red-button-50:ACTIVE{
	background-position: 0 -54px;
}

.red-button-50[disabled] {
	cursor: default;
	opacity: 0.3;
}

.red-button-80 {
	background: url("../images/btn-sprite-red-80.png") 0 0 no-repeat;
	width: 80px;
	height: 25px;
	border: none;
}

.red-button-80:HOVER{
	background-position: 0 -27px;
	cursor: pointer;
}
.red-button-80:ACTIVE{
	background-position: 0 -54px;
}

.red-button-80[disabled] {
	cursor: default;
	opacity: 0.3;
}

.red-button-120 {
	background: url("../images/btn-sprite-red-120.png") 0 0 no-repeat;
	width: 120px;
	height: 25px;
	border: none;
}

.red-button-120:HOVER{
	background-position: 0 -27px;
	cursor: pointer;
}
.red-button-120:ACTIVE{
	background-position: 0 -54px;
}

.red-button-120[disabled] {
	cursor: default;
	opacity: 0.3;
}

.red-button-30 {
	background: url("../images/btn-sprite-red-30.png") 0 0 no-repeat;
	width: 30px;
	height: 25px;
	border: none;
}

.red-button-30:HOVER{
	background-position: 0 -27px;
	cursor: pointer;
}
.red-button-30:ACTIVE{
	background-position: 0 -54px;
}

.red-button-30[disabled] {
	cursor: default;
	opacity: 0.3;
}

.black-button{
	background: url("../images/btn-sprite-black.png") 0 0 no-repeat;
	width: 100px;
	height: 30px;
	border: none;
}

.black-button:HOVER{
	background-position: 0 -32px;
	cursor: pointer;
}
.black-button:ACTIVE{
	background-position: 0 -64px;
}

.black-button.black-button-small{
	background: url("../images/btn-sprite-black-small.png") 0 0 no-repeat;
	width: 37px;
}

.black-button.black-button-small:HOVER{
	background-position: 0 -32px;
	cursor: pointer;
}
.black-button.black-button-small:ACTIVE{
	background-position: 0 -64px;
}

#grid-header{
	padding: 5px;
	height: 30px;	
	background: url("../images/grid-header-bg.png");
	border: 1px solid rgba(23,23,23,0.9);
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
}

.grid-header{
	padding: 5px;
	height: 30px;	
	background: url("../images/grid-header-bg.png");
	border: 1px solid rgba(23,23,23,0.9);
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
}

.gridHeader {
	padding: 5px;
	height: 30px;	
	background: url("../images/grid-header-bg.png");
	border: 1px solid rgba(23,23,23,0.9);
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
}

.gridHeaderVariable {
	float: left;
	width: 100%;                        /* para falta de suporte */  
	width: -webkit-calc(100% - 450px);  /* para Chrome */
	width: -moz-calc(100% - 450px);     /* para Firefox */
	width: calc(100% - 450px);          /* para suporte nativo */	
}

.gridHeaderFixed {
	float: right;
	width: 450px;
}

.gridProtocolHeaderFixed {
	float: right;
	width: 330px;
}

.search {
	height: 100%;
	width: 100%;
}

.searchGridArea > .ui-jqgrid > .ui-jqgrid-view {
	height: 100% !important;
	width: 100% !important;
}

.searchNoResult {
	width: 100%;
	text-align: center;
	font-size: 18px;
	margin-top: 20px;
}

.searchGridArea {
	height: 100%;                        /* para falta de suporte */  
	height: -webkit-calc(100% - 42px);  /* para Chrome */
	height: -moz-calc(100% - 42px);     /* para Firefox */
	height: calc(100% - 42px);          /* para suporte nativo */	
	width: 100%;
}

.inputFilter {
	border-radius: 3px;
	float: left;
	height: 26px;
	width: 100%;                        /* para falta de suporte */  
	width: -webkit-calc(100% - 20px);  /* para Chrome */
	width: -moz-calc(100% - 20px);     /* para Firefox */
	width: calc(100% - 20px);          /* para suporte nativo */	
}

.inputFilterWithButton {
	border-radius: 3px;
	float: left;
	height: 26px;
	width: 100%;                        /* para falta de suporte */  
	width: -webkit-calc(100% - 61px);  /* para Chrome */
	width: -moz-calc(100% - 61px);     /* para Firefox */
	width: calc(100% - 61px);          /* para suporte nativo */	
}

.filterIcon {
	width: 50px;
	height: 30px;
	border: none;
	position: absolute;
	top: 42px;
	left: 100%;                        /* para falta de suporte */  
	left: calc(100% - 520px);          /* para suporte nativo */
	left: -webkit-calc(100% - 522px);  /* para Chrome */
	left: -moz-calc(100% - 521px);     /* para Firefox */
}

.filterIcon:HOVER {
	background-position: 0 -32px;
	cursor: pointer;
}

.filterIcon:ACTIVE {
	background-position: 0 -64px;
}

.filterIconDisabled {
	background: url("../images/btn-sprite-filter-disable.png") 0 0 no-repeat;
}

.filterIconEnabled {
	background: url("../images/btn-sprite-filter-enable.png") 0 0 no-repeat;
}

.dateFrom {
	height: 20px;
	width: 105px;
	margin-left: 19px;
	font-size: 12px;
	color: #c1c1c1 !important;
}

.dateFromButton {
	position: absolute;
	left: 122px;						/* para falta de suporte */  
	left: calc(122px);					/* para suporte nativo */
	left: -webkit-calc(121px);			/* para Chrome */
	left: -moz-calc(121px);				/* para Firefox */
}

.dateTo {
	height: 20px;
	width: 105px;
	margin-left: 20px;
	font-size: 12px;
	color: #c1c1c1 !important;
}

.dateToButton {
	position: absolute;
	left: 258px;						/* para falta de suporte */  
	left: calc(258px);					/* para suporte nativo */
	left: -webkit-calc(256px);			/* para Chrome */
	left: -moz-calc(256px);				/* para Firefox */
}

#input-search {
	border-radius: 3px;
	float: left;
	height: 26px;
	width: 100%;                        /* para falta de suporte */  
	width: -webkit-calc(100% - 20px);  /* para Chrome */
	width: -moz-calc(100% - 20px);     /* para Firefox */
	width: calc(100% - 20px);          /* para suporte nativo */	
}

#search-icon{
	width: 50px;
	height: 30px;
	border: none;
	position: absolute;
	top: 42px;
	left: 100%;                        /* para falta de suporte */  
	left: calc(100% - 520px);          /* para suporte nativo */
	left: -webkit-calc(100% - 522px);  /* para Chrome */
	left: -moz-calc(100% - 521px);     /* para Firefox */
}

#search-icon:HOVER{
	background-position: 0 -32px;
	cursor: pointer;
}

#search-icon:ACTIVE{
	background-position: 0 -64px;
}

.search-icon-disabled{
	background: url("../images/btn-sprite-filter-disable.png") 0 0 no-repeat;
}

.search-icon-enabled{
	background: url("../images/btn-sprite-filter-enable.png") 0 0 no-repeat;
}

.icon-arrow-down{
	margin: -28px 18px 0 0; 
	width: 25px; 
	float:right; 
	cursor: pointer;
}

#date-from {
	height: 20px;
	width: 105px;
	margin-left: 19px;
	font-size: 12px;
	color: #c1c1c1 !important;
}

#date-from-button {
	position: absolute;
	left: 133px;						/* para falta de suporte */  
	left: calc(133px);					/* para suporte nativo */
	left: -webkit-calc(132px);			/* para Chrome */
	left: -moz-calc(132px);				/* para Firefox */
}

#date-to {
	height: 20px;
	width: 105px;
	margin-left: 20px;
	font-size: 12px;
	color: #c1c1c1 !important;
}

#date-to-button {
	position: absolute;
	left: 269px;						/* para falta de suporte */  
	left: calc(269px);					/* para suporte nativo */
	left: -webkit-calc(267px);			/* para Chrome */
	left: -moz-calc(267px);				/* para Firefox */
}

#tabsHeader {
	height: 30px;
	max-width: 100%;                        /* para falta de suporte */  
	max-width: -webkit-calc(100% - 300px);  /* para Chrome */
	max-width: -moz-calc(100% - 300px);     /* para Firefox */
	max-width: calc(100% - 300px);          /* para suporte nativo */	
	position: absolute;
	right: 20px;
	top: 4px;
	text-align: right;
	font-size: 12px;
	overflow: hidden;
}

#tabsHeaderView {
	height: 30px;
	max-width: 100%;                        /* para falta de suporte */  
	max-width: -webkit-calc(100% - 300px);  /* para Chrome */
	max-width: -moz-calc(100% - 300px);     /* para Firefox */
	max-width: calc(100% - 300px);          /* para suporte nativo */	
	position: absolute;
	right: 50%;
	top: 13px;
    color: #e8575a;
    font-weight: bold;
	text-align: right;
	font-size: 12px;
	overflow: hidden;
	display:none;
}

#tabsHeaderSelect {
	height: 196px;
	max-width: 100%;                        /* para falta de suporte */  
	max-width: -webkit-calc(100% - 300px);  /* para Chrome */
	max-width: -moz-calc(100% - 300px);     /* para Firefox */
	max-width: calc(100% - 300px);          /* para suporte nativo */	
	position: absolute;
	right: 7px;
	top: 9px;
	text-align: left;
	font-size: 12px;
	overflow: hidden;
}

#filters {
	width: 550px;
	height: 330px;
	padding: 10px;
	background: #282828;
	position: absolute;
	top: 139px;
	left: 20px;
	z-index: 3;
	border: 1px solid rgba(23,23,23,0.9);
	border-bottom-left-radius: 3px; 
	border-bottom-right-radius: 3px;
	
	/* 	DISABLE SELECTION*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.filters {
	width: 550px;
	height: 310px;
	padding: 10px;
	background: #282828;
	position: absolute;
	top: 139px;
	left: 20px;
	z-index: 3;
	border: 1px solid rgba(23,23,23,0.9);
	border-bottom-left-radius: 3px; 
	border-bottom-right-radius: 3px;
	
	/* 	DISABLE SELECTION*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.filtersWithButton {
	left: 60px;
}

.filterFieldset{
	border: 1px solid rgba(23,23,23,0.9);
	margin: 3px 9px 3px 0;
	padding-top: 15px;
	width: 530px;
}

.filterFieldset > legend{
	color: #c1c1c1;
}

.datepicker-button{
	background: url("../images/btn-sprites-calendar.png") 0 0 no-repeat;
	width: 30px;
	height: 24px;
	border: none;
	vertical-align: middle;
}

.datepicker-button:HOVER{
	background-position: 0 -24px;
	cursor: pointer;
}

.datepicker-button:ACTIVE{
	background-position: 0 -48px;
}

.datepicker-button:DISABLED{
	background-position: 0 -72px;
}

/****************/
/* RADIO BUTTON */
/****************/
div:not(#foo) > input[type='radio']{
    opacity: 0;
    float: left;
}

div:not(#foo) > input[type='radio'] + label {
    margin: 0;
    clear: none;
	padding-top: 5px;				/* para falta de suporte */  
	padding-top: calc(6px);			/* para suporte nativo */
	padding-top: -moz-calc(5px);	/* para Firefox */
	padding-top: -webkit-calc(5px);	/* para Chrome */
	padding-right: 0px;	
    padding-bottom: 4px;
    padding-left: 22px;
    cursor: pointer;
    background: url(off.png) left center no-repeat;
    background-size: 22px; 
}

div:not(#foo) > input[type='radio'] + label {
    background-image: url("../images/radiobox.png");
}

div:not(#foo) > input[type='radio']:disabled + label{
    background-image: url("../images/radiobox-disabled.png");
    color: #555555;
    cursor: auto;
}

div:not(#foo) > input[type='radio']:checked + label {
    background-image: url("../images/radiobox-checked.png");
}

div:not(#foo) > input[type='radio']:checked + label.radiobox-checked-red {
    background-image: url("../images/radiobox-checked-red.png");
}

div:not(#foo) > input[type='radio']:checked + label.radiobox-checked-yellow {
    background-image: url("../images/radiobox-checked-yellow.png");
}

div:not(#foo) > input[type='radio']:checked + label.radiobox-checked-blue {
    background-image: url("../images/radiobox-checked-blue.png");
}

/****************/
/* CHECKBOX */
/****************/
div:not(#foo) > input[type='checkbox']{
    opacity: 0;
    float: left;
}

div:not(#foo) > input[type='checkbox'] + label {
    margin: 0;
    clear: none;
    padding: 5px 0 4px 22px;
    cursor: pointer;
    background: url(off.png) left center no-repeat; 
    background-size: 17px;
}

div:not(#foo) > input[type='checkbox'] + label{
    background-image: url("../images/checkbox-unchecked.png");
}

div:not(#foo) > input[type='checkbox']:disabled + label{
    background-image: url("../images/checkbox-disabled.png");
    color: #555555;
    cursor: auto;
}

div:not(#foo) > input[type='checkbox']:checked + label{
    background-image: url("../images/checkbox-checked.png");
}

#current-page{
	padding-top: 7px; 
	padding-top: -webkit-calc(6px);
	background: url("../images/bg-position-pag.png");
	color: #c1c1c1;	
	height: 23px;
	height: -webkit-calc(24px);
	width: 115px;
	text-align: center;
	display: inline-block;
    font-size: 11px;
}

.currentPage {
	padding-top: 7px; 
	padding-top: -webkit-calc(6px);
	background: url("../images/bg-position-pag.png");
	color: #c1c1c1;	
	height: 23px;
	height: -webkit-calc(24px);
	width: 115px;
	text-align: center;
	display: inline-block;
}

/****************/
/*    EPEOPLE	*/
/****************/

/*==========================================*/
a.tooltip{
	position:relative;   
}

a.tooltip:hover{
	z-index:25; 
}

a.tooltip span{
	display: none;
}

a.tooltip:hover span{ 
	display:block;
	position:absolute;
	font-size: 10px;
	padding:5px;
	border:1px solid #999;
	background:#777;
	color:#FFF;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

a.tooltip:link, a.tooltip:visited {
	text-decoration: none;
}
/*==========================================*/
.action-button{
	background: #000000 url("../images/btn-action.png") 0 0 no-repeat;
	background-position: 0px -23px;
	
	width: 28px;
	height: 22px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	border:none;
	vertical-align: bottom;
	
	padding-left: 4px;
}
.action-button:HOVER{
	background-position: 0px -46px;
	cursor: pointer;
}
.action-button:ACTIVE{
	background-position: 0px 0px;
}

.audio-button {
	background: #000000 url("../images/btn-action.png") 0 0 no-repeat;
	background-position: 0px -23px;
	width: 28px;
	height: 22px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:none;
	vertical-align: bottom;
	padding: 1px 4px;
}
	
.audio-button:HOVER {
	background-position: 0px -46px;
	cursor: pointer;
}

.audio-button:ACTIVE {
	background-position: 0px 0px;
}

.audio-button[disabled] {
	background-position: 0px -0px;
	cursor: default;
	opacity: 0.3;
}

audio {
	width: 240px;
	height: 55px;
}

fieldset{
    border: 1px solid #FFFFFF;
    margin-top: 2px;
}

.fieldsetMandatory {
    border: 2px solid #FF0000;
}

legend {
    color: #FFFFFF;
}

.circle-status {
	border: 1px solid white;
	border-radius: 8px;
	height: 13px;
	width: 13px;
}

.square-status {
	border: 1px solid white;
	height: 12px;
	width: 12x;
}

.rectangle-status {
	border: 1px solid white;
	height: 12px;
	width: 36px;
}

.logo-epeople {
	width: 380px;
	margin-left: 110px;
}

/*==========================================*/
/* DROPDOWN */
/*==========================================*/

.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

/*==========================================*/
/* NOTIFICATIONS */
/*==========================================*/

#notification{
	right		: 180px;
    top			: 40px;
	width		: 430px !important;
	overflow	: auto;
	max-height	: 363px;;
}

.notification-item{
	
    height: 55px;
    padding: 10px 0 0 12px;
    cursor	: pointer;
    border-bottom: solid 1px rgba(100, 100, 100, 1.30);
    
}

#item-notification :hover{
	
    background: #9c1f1f;
}

#header-notification{

	background: none;
	padding: 0px 0 0 10px;
}

#header-notification:hover{
	
	background: none !important;
}

hr.divider{
	border-top: 1px solid #8c8b8b;
}

#notification>h3 {
    display: block;
    color: #FFF;
    font-weight: bold;
    font-size: 13px;
    padding: 10px;
    margin: 0;
    border-bottom: solid 1px rgba(100, 100, 100, 1.30);
}

#notFound{
    height: 50px;	
	margin-left: 36%;
    margin-top: 10%;
}

.iconRead{
	
	float: right;
    display: inline-block;
    margin-right: 10px;
    cursor : pointer;	
}


/*==========================================*/
/* MENU */
/*==========================================*/

#menu {
	right: 22px;
	top: 40px;
}

#menuGrid {
	top: 108px;
	display: none;
}

#menuViewers {
	top: 108px;
	display: none;
}

.menuItem{
	display:table;
}
.menuItem div {
	display:table-cell;
	vertical-align: middle;
	padding-left: 5px;
}

/*==========================================*/

.delimitador {
	height: 100%;
	width: 100%;
}

.delimitadorCol1 {
	float: left;
	height: 100%;
	width: 325px;
}

.delimitadorCol2 {
	height: 100%;
	margin-left: 325px;
	overflow: auto;
}

.divLine {
	margin: 0 0 2px 0;
}

.divLineComponent {
	height: 20px;
	margin: 7px 0 2px 0;
}

.label {
	width: 200px;
	text-align: right;
	display:inline-block;
	padding-top: 4px;
}

.label160 {
	width: 160px;
	text-align: right;
	display:inline-block;
	padding-top: 4px;
}

.label50 {
	width: 50px;
	text-align: right;
	display:inline-block;
}

.label75 {
	width: 75px;
	display:inline-block;
}

.input50 {
	width: 50px;
	text-transform: uppercase;
}

.input80 {
	width: 80px;
	text-transform: uppercase;
}

.input150 {
	width: 150px;
	text-transform: uppercase;
}

.input200 {
	width: 200px;
	text-transform: uppercase;
}

.input250 {
	width: 250px;
	text-transform: uppercase;
}

.input300 {
	width: 300px;
	text-transform: uppercase;
}

.input400 {
	width: 400px;
	text-transform: uppercase;
}

.textarea400 {
	width: 400px;
	height: 100px;
}

.textarea500 {
	width: 500px;
	height: 100px;
}

.textarea600 {
	width: 600px;
	height: 100px;
}

/* ----------------------- */
/* Progress - Geral */
/* ----------------------- */
.progress-label{
	text-align: center;
	margin-top: 5px;
}


/* ----------------------- */
/* Progress - Osirix */
/* ----------------------- */
.progress-osirix-line{
	height:27px;
}

.progress-osirix-label{
	float:left; 
	width:75px; 
	margin-top:6px
}

.progress-osirix-group-progress-bar{
	margin-top:5px; 
	height:190px; 
	overflow:auto;
}

.progress-osirix-progress-bar{
	float:left; 
	width:150px;
}

.progress-osirix-action{
	float:left; 
	margin-top:3px; 
	margin-left:5px; 
	display:none;
}
/* ----------------------- */


@media only screen and (max-height: 520px) {
   #browserSupport {
        display: none;
    }
}

/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

.circle{
    border: 1px solid white;
	height: 10px;
	width: 10px;
	text-align: center;
	font-size:9px;
	vertical-align: middle;
	border-radius: 50%;
	background: #696969;
    margin-left: 10px;
    margin-bottom: 5px;
	
}


/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}


.divListbox {
    width: 301px;
    overflow-y: auto;
    height: 100px;
    display: inline-block;
    background: rgb(79, 79, 79) !important;
	border: 1px solid rgba(79,79,79,0.9);
    color: #c1c1c1;
	padding-left: 5px;
    border-radius: 3px;
    text-transform: uppercase;
}

.listDiv{
	
	width: 92%;
    float: left;
    display: inline-block;
}


.loader {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 margin-top: -100px;
	 margin-left: -100px;
	 border: 10px solid #f3f3f3;
	 border-radius: 50%;
	 border-top: 10px solid #3498db;
	 width: 60px;
	 height: 60px;
	 -webkit-animation: spin 2s linear infinite;
	 animation: spin 2s linear infinite;
}
	
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

.not-active {
   pointer-events: none;
   cursor: default;
}

.inputQuery{
	
    margin: 10px 0px;
    height: 18px;
    width: 300px;	
}

.container { 
	display: flex; 
   	flex-direction: row; 
    justify-content: center;
    align-items: center;
    position: relative;
/*     display:table; */
} 
.container p {
	*position: absolute;
	top: 50%;
	display: table-cell;
	vertical-align: middle;
    float: right;
    margin-right: 20px;
}
.container span {
	
	display:block;
	*position: relative;
	top: -50%;
}

.box { 
	width: auto;
    height: 600px;
    overflow : auto; 
    background-color: #47494a;
    padding: 0 0 0 10px;
    border-radius: 10px; 
}
.circle_img{
	
	cursor : pointer;
	margin-bottom: 7px;
}
.circle_img >img{
	width: 40px;
    height: 40px;
    border-radius: 100%;	
}
.circle_img:hover{
/* 	background-color: #ab2929; */
	background: linear-gradient(to bottom, #b72d2d 0%,#972222 100%);
}

.headerBox{

	border-radius: 10px;
	background-color: #47494a;
/* 	background-color:#2e2e2f; */
}

.headerBox>h2{
	
    margin-left: 10px;
}

.search-icon-input{
	cursor: pointer;
	position:relative;
	top: 1px;
	
}

.setNone{
	display : none;
}

.ytd-notification-topbar-button-renderer {
	position: absolute;
    top: 5px;
    right: 180px;
    color: white;
    background-color: #ff0000;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    line-height: 18px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
}


#selectable {
  list-style-type: none;
  padding: 0;
  margin: 10px 0 0 0;
}

#selectable>li {
/*   border: 1px solid #ddd; */
  margin-top: -1px; /* Prevent double borders */
/*   background-color: #f6f6f6; */
  padding: 12px;
}