* {
    margin: 0px;
    padding: 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.ui-tooltip.tooltip{
	background: #0a0a0a !important;
    font-size: 0.8rem !important;
    z-index: 99 !important;
    color: white !important;
    box-shadow: none !important;
    border: 0px !important;
    opacity: 1;
    text-align: center;
}
.tooltip:before{
	border-color: transparent transparent #0a0a0a !important;
}
html {
    box-sizing: inherit;
    font-family: calibri, arial, helvetica, sans-serif;
}

nav {
    width: 100%;
    background: #0B1862; 
    min-height: 42px;
    top: 0px;
    z-index: 2000;
    position:fixed;
}
.personal nav{
	background:#3a88d8;
}
.writting nav{
    position: fixed;
}
nav > div{
/*    overflow:hidden;*/
}
#logowrapper {
    height: 42px;
    float: left;
    display: block;
    width: 70px;
    position: relative;
}

#logowrapper .arrow {
    width: 5px;
    right: 5px;
    top: 50%;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid white;
    position: absolute;
}

#logowrapper .icon-wopik {
    font-size: 1.3rem;
    color: white;
    display: block;
    line-height: 42px;
    margin-left:7px;
}

#socialnetworkbadge {
    position: absolute;
    right: 15px;
    bottom: 0px;
    background: transparent;
}

#select-wopik {
    z-index: 100;
    list-style: none;
    position: absolute;
    display:block;
    left: 0px;
    top: 42px;
    background: white;
    -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
    margin-left:0px;
}

#select-wopik li {
    padding: 0px 10px;
}

#select-wopik a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 2rem;
    color: #0B1862;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    cursor: pointer;
}

#select-wopik li:first-child a {
    font-size: 1.3rem;
    margin-left: -8px;
    line-height: 50px;
}

#select-wopik img {
    width: 35px;
    height: 35px;
}

#select-wopik li:hover {
    background: #0B1862;
}

#select-wopik li:hover a {
    color: white;
}
.firstexp #select-wopik li:first-of-type a{
    pointer-events:none;
    opacity: 0.3;
}
.firstexp #select-wopik li:first-of-type:hover{
    background:none;
}
#search{
    width:23%;
}
#search.connect{
	width:10%;
}
#search.connect #id_searchbox{
	overflow: hidden;
}
#id_searchbox{
    width: 100%;
    max-width: 100%;
    margin:0px;
    resize: none;
    font-size:0.9rem;
}
#id_searchbox.alert{
	border:1px solid red;
	background:pink;
}
#search,
#id_searchbox {
    float: left;
    height:32px;
    position: relative;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    min-height:35px;
}
#id_searchbox::-webkit-input-placeholder {
    color: black;
}

#id_searchbox:-moz-placeholder {
    /* Firefox 18- */
    color: black;
    opacity: 1
}

#id_searchbox::-moz-placeholder {
    /* Firefox 19+ */
    color: black;
    opacity: 1
}

#id_searchbox:-ms-input-placeholder {
    color: black;
}

#id_searchbox:focus::-webkit-input-placeholder {
    color: gray;
}

#id_searchbox:focus:-moz-placeholder {
    color: gray;
    opacity: 1;
}

#id_searchbox:focus::-moz-placeholder {
    color: gray;
    opacity: 1;
}

#id_searchbox:focus:-ms-input-placeholder {
    color: gray;
}
/*SEARCH.SMALL*/
#search.small{
    width:30%;
}
#search.small #id_searchbox{
    font-size:0.9rem;    
    padding-right:30px;
    line-height:initial;
}

.Company #search.connect.small ~ #topik{
	width:13%;
}

#search.medium{
    width:calc(100% - 155px);
    height:70px;
    position: relative;
}
#search.medium ~ .ddlist{
    width:30% !important;
    max-width:70px;
}
#search.medium #id_searchbox{
    height:70px;
    font-size:0.9rem;
    padding-right:30px;
    line-height:initial;
}
#search.large #id_searchbox{
    font-size:0.9rem;
    padding-right:30px;
    line-height:initial;
}
#search.large ~ *:not([id="searchExt"]){
    max-width:70px;
    min-width:70px;
    margin-left: 5px;
}
#search.large ~ .languageList {
    max-width:initial !important;
}
#search.large ~ #filtercontainer{
    margin-left:3px;
}
#search.medium ~ #topik{
    float:left;
    clear:left;
    width:66px !important;
    margin-top:-34px !important;
}
#search.medium ~ #filtercontainer{
    float:right !important;
    margin-top:-42px !important;
    width:89px;    
}
#search.medium ~ #filtercontainer > span{
    width:100%;
    display: block;
}
#search.large{
    width:calc(100% - 80px);
    height:auto;
    min-height:150px;
    position: relative;
    float:right;
}
#search.large #id_searchbox{
    min-height:150px;
}
#searchExt {
    position: relative;
    clear:both;
    padding: 5px;
    width: 100%;
    min-height:40px;
    height:auto;
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    background: white;
    border-top: none;
}
/* Para barra absoluta
#searchExt{
    position:relative;
    clear:both;
    padding:5px;
    width:100vw;
    height:40px;
    top:5px;
    left:-73px;
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    background: white;
    border-top: none;
    display: block !important;
}*/

#searchExtToggler {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 35px;
    z-index: 1;
    cursor: text;
}
#searchExt *,
#searchAdv * {
    font-size: 0.75rem;
    height: 30px;
    padding: 8px 12px;
    line-height: 0.75rem;
    margin-bottom: 0px;
}
#searchExt #createbtn{
	width:20%;
}
.firstexp #searchExt label[for="upload"]{
    pointer-events: none;
    opacity: .25;
}
#searchAdv *{
    margin-bottom:5px;
}
#searchExt p {
    display: block;
    padding: 8px 5px !important;
    width: 20px;
    float: left;
}

#searchExt #searchurl {
    width: 100%;
    float: left;
    padding-right:20px;
    height:30px;
    position: relative;
}
.suggestiontoggler{
    display: none;
}
.suggestiontoggler:after{
    content:"";
    width:5px;
    border-top:5px solid black;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    top:45%;
    position: absolute;
    left:0px;
    right:0px;
    margin:auto;
}
.Largeurl .suggestiontoggler{
    display: block !important;
    width: 30px;
    position: absolute;
}
.Largeurl .close-button{
    right:30px !important;
}
#urlsuggestion{
    position: absolute;
    display: block;
    background: white;
    left:40px;
    top:35px;
    overflow: hidden;
    height:auto;
}
#urlsuggestion .optgroup{
    display: block;
    width:100%;
    float: left;
    margin:0px !important;
    padding:0px !important;
}
.optgroup input{
    display: inline-block !important;
    float: left;
}
.optgroup label {
    display: inline-block;
}
#searchExt .Largeurl{
    width: 86.7% !important;
    margin-bottom: 5px !important;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

#searchExt > div:nth-child(4){
    padding:0px;
    margin:0px 5px;
    width: 18%;
    margin-left:5px;
    float:left;
    position: relative;
}
.firstexp #searchExt label[for="submit"]{
    pointer-events:none;
    opacity:.25;
}
#searchExt label[for="upload"]{
    width:10%;
    padding:8px 0px;
    font-size:0.6rem;
}
#searchExt label[for="upload"] span{
    padding:0px;
}
#searchExt label[for='submit']{
    width:22%;
    padding:8px 0px;
}
#searchExt #searchbtn{
    width:22%;
    padding:8px 0px;
}
#searchExt select {
    width: 75px;
    float: left;
    border: none;
}
.no-button {
    border: none;
    background: none !important;
    color: black !important;
}

.no-button:hover {
    background: none;
}

#preview {
    background: white;
    height: auto;
    position: absolute;
    top: 100%;
    left: 0px;
    right: 0px;
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}
#preview img {
    height: 100%;
    padding: 0px !important;
    margin-right: 10px;
    float: left;
    width: 23%;
}

#preview #textpreview {
    float: left;
    width: 73%;
    padding: 0px !important;
    height: auto;
}

#preview #textpreview h4 {
    font-weight: bold;
    padding: 0px !important;
    height: auto;
    margin-bottom: 5px;
    color: #0b1862;
    padding-right:15px;
}

#preview #textpreview p {
    width: 100%;
    padding: 0px !important;
    margin: 0px;
    font-size: 0.75rem;
    height: auto;
    margin-bottom: 5px;
}

#preview #textpreview p:nth-child(2) {
    color: #2199e8 !important;
}
#preview .close-button{
    right:0px;
    top:0px;
}
#preview .close-button{
    font-size: 1rem;
    right: 0px;
    top: 0px;
}
#searchAdv {
    background: white;
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0px;
    height: auto;
    padding: 5px !important;
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}
#searchAdv> *{
    margin-right:1%;
}
#id_form_name_listen_alt, #id_alt_name_listen_form{
	padding:0px !important;
	margin:0px 0px 5px 0px !important;
}
#id_alt_name_listen_form .input-group-button{
	padding:0px;
}
.dategroup:last-child .input-group-label{
    padding:5px !important;
}
#ddpublic {
    position: relative;
    width: 10%;
    margin: 0px 5px ;
    color: #0b1862;
    padding: 0px !important;
    text-align:center;
    text-indent: -5px;
}

#ddpublic #publictoggler {
    cursor: pointer;
    padding: 8px 0px;
    width: 100%;
    height:100%;
    display: block;
    margin-left:0px;
}
#publiclist {
    position: absolute;
    width: 180px;
    left: -50px;
    height: 105px;
    padding: 0px !important;
    background: white;
    -webkit-box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.3);
    z-index: 5;
    display: none;
}
#publiclist label {
    width: 100%;
    height: 30px;
    margin: 0px;
    position: relative;
    float: left;
    margin-top: 5px;
    cursor: pointer;
}

#publiclist label:hover {
    background: #0b1862;
    color: white;
}

#publiclist label .icon {
    float: left;
    width: 20%;
    padding: 0px !important;
}

#publiclist label .texto {
    float: left;
    width: 80%;
    padding: 0px !important;
}
#publictoggler span {
    top:-3px;
    text-align:center;
    padding: 0px;
}
#searchExt #reset, #searchExt > p{
    display: none;
}
#livesin .input-group-label,
#post-location .input-group-label,
#distance .input-group-label, .dategroup .input-group-label{
    padding: 0px;
    background: none;
    border: none;
}
#post-location .input-group-label{
    font-size:0.8rem;
}
#distance .input-group-label{
    padding-right:5px;
}
.dategroup button, #livesin button, #post-location button, #searchurl~button, #id_searchbox~button{
        top:0px;
        right:0px;
        padding:0px !important;
        display:none;
    }
#id_searchbox~button span{
    padding:5px 12px;
    vertical-align: middle;
    display:inline-block;
    margin-top:-3px;
}
.dategroup button span, #livesin button span, #post-location button span, #search button span{
    font-size: 1rem !important;
}
#livesin input,
#post-location input {
    margin: 0px;
    width: 100%;
}
#searchAdv .dategroup{
    float:left;
    width:18%;
    padding:0px;
}
#searchAdv .dategroup input{
    padding: 8px 5px;
}
#searchAdv .dategroup .input-group-label{
    padding:0px;
    padding-right:5px;
}
#searchAdv #livesin,
#searchAdv #post-location {
    width: 36.5%;    
    float: left;
    padding: 0px;
    margin-right: 1%;
    position: relative;
}

#searchAdv #distance {
    width: 23%;
    padding: 0px;
    float: left;
    margin:0px 1%;
    position: relative;
}
#searchAdv #distance select{
    width: 100%;
    background: none;
    text-align: center;
    color:white;
}
#searchAdv #distance option{
    color:black;
}
#distance span{
    display: block;
    position: absolute;
    left:0px;
    right:0px;
    text-align:center;
    pointer-events: none;
    padding:8px 0px;
    background:white;
}
#distance .wrapper {
    padding: 0px;
    position: relative;
}
#distance .wrapper:after {
    content: '';
    position: absolute;
    width: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    right: 0px;
    left: 0px;
    top: 80%;
    margin: auto;
    pointer-events: none;
}
#searchAdv #date1, #searchAdv #date2{
    width:100%;
}
#searchAdv .dategroup{
    width:49%;
    position: relative;
    float: left;
    padding: 0px;
    margin-right: 1%;
}
/*SearchAdv custom status*/
.listenTitle #livesin, .listenTitle #distance, .listenTitle #post-location, .listenTitle .dategroup{
    display: none;
}
#searchAdv .tags,#searchAdv .description{
    display: none;
}
.listenTitle #searchAdv > .tags, .listenTitle #searchAdv > .description{
    display: table;
    width: 49%;
    position: relative;
    float: left;
    padding: 0px;
    margin-right: 1%;
}
.listenTitle .tags input, .listenTitle .description input{
    margin-bottom:0px !important;
}
#language {
    border: none;
    color: white;
    float: left;
    line-height: 30px;
    cursor: pointer;
    padding-left: 0px;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    text-indent: 0px !important;
    display: block;
    height:100%;
}
#langfilter {
    height: 30px;
    width: 100%;
    display: none;
    font-size: 0.8rem;
    position: relative;
}

.languageList {
    position: absolute;
    background: white;
    text-align: center;
    top: 37px;
    max-height: 170px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.3);
    left: -5px;
    z-index: 1500;
}

.languagexpanded {
    width: 299px;
}

.langcontainer {
    width: 93px;
    float: left;
}

.languageList label {
    display: block;
    padding: 5px 20px;
    color: #0b1862;
    background: white;
    width: 100%;
    margin: 0px !important;
    font-size: 0.8rem;
}

.personal .languageList label:hover,
.personal .languageList label:hover a,
.personal .languageList label a:hover,
.personal .languageList #other:hover,
.personal .otherlangs label:hover {
    background: #3a88d8;
    color: white;
}

.languageList label:hover,
.languageList #other:hover,
.otherlangs label:hover {
    background: #0b1862;
    color: white;
}

.languageList #other {
    width: 100%;
    margin: 0px;
    padding: 8px;
}
.languageList #otherlangs {
    display: none;
}
#otherlangs label {
    width: 93px;
    float: left;
    padding: 5px 0px;
}

nav > #otherlangs {
    max-height: 140px;
    overflow: auto;
    width: 100vw;
    position: absolute;
    top: 42px;
    min-height: 42px;
    background: white;
    -webkit-box-shadow: 2px 10px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 10px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 10px 10px rgba(0, 0, 0, 0.3);
}

nav > #otherlangs label {
    text-align: center;
    margin: 0px !important;
    padding: 0px 10px;
    float: left;
    padding: 10px 5px;
}
.ddlist {
    width: 13%;
    position: relative;
    height: 35px;
}
.ddlist:after{
    top:80% !important;
    left:0px;
    right:0px !important;
    margin:auto;
}
.ddlist:after,
#publictoggler:after,
#filtertoggler:after{
    content: '';
    position: absolute;
    width: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid white;
    right: 5px;
    top: 40%;
}

#publictoggler:after, #filtertoggler:after {
    border-top-color: #0b1862;
    top:80%;
    left:50%;
    -webkit-transform: translatex(-50%);
    -ms-transform: translatex(-50%);
    -o-transform: translatex(-50%);
    transform: translatex(-50%);
}
#filtertoggler:after{
    border-top-color:white;
}
#publictoggler:before{
    width:100%;
    display: block;
}

#id_select_category {
    float: left;
    width: 93%;
    height: 32px;
    margin: 5px 0px 10px 0px; 
    position: relative;
}

#id_select_emotion {
    float: left;
    width: 5%;
    height: 32px;
    margin: 5px 0px 10px 0px; 
    position: relative;
}

#topik, #id-subject-topik {
    float: left;
    width: 8%;
    height: 30px;
    margin: 5px 0px 10px 0px;
    position: relative;
}
#topik #topikbox{
    margin:0px !important;
    height:35px;
    background: white;
    color: black;
    display: none;
}
.Company #search.connect ~ #topik{
	width: 38%;
}
.Company #topik #topikbox.connect{
	display:block !important;
}
#topik .badge{
	position: absolute;
    right: 0px;
    bottom: 0px;
    height: 8px;
    width: 8px;
    min-width: initial;
}

#topik > i{
	color: white;
    text-align: center;
    font-size: 1.5rem;
    display: block;
    width: 100%;
}
#topik ul{
    display: none;
    width: 100%;
    left: 0px;
    position: fixed;
    top: 45px;
    background: white;
    z-index: 99;
    max-height: calc( 100vh - 45px);
    overflow: auto;
    -webkit-box-shadow: 2px 10px 10px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 2px 10px 10px rgba(0, 0, 0, 0.3);
	box-shadow: 2px 10px 10px rgba(0, 0, 0, 0.3);
}
#topik ul li:not(:last-child){
    border-bottom:1px solid #3a88d8;
}
#topik ul li{
	position: relative;
}
#topik ul li:not(:last-child){
    display: block;
    border-bottom: 1px solid #3a88d8;
}
#topik ul li a{
    display: block;
    font-size: 0.9rem;
}
#topik ul li:hover a, #topik ul li:hover button{
    background: #3a88d8;
    color:White !important;
}
#topik ul li button{
	position: absolute;
    right: 10px;
    top: 10px;
    background: transparent;
    color: #3a88d8;
    display: none;
}
#topik ul li.activated button{
	display: block;
}
#filtercontainer #filtertoggler{
    width:100%;
    display: block;
}
#filtercontainer  span{
    display: table-cell;
    height: 42px;
    width: 42px;
    padding: 10px;
    color:white;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 100%;
    z-index: 1;
}
#wopikFilter {
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
    background: #0B1862;
    width: 100%;
    z-index: 1;
    overflow:auto;
    display:none;
    height:100vh;
}
.personal #wopikFilter{
	background: #3a88d8;
}
#wopikFilter li{
    width:100%;
}
#wopikFilter li span{
    line-height:40px;
}
#wopikFilter .icono {
    float: left;
    text-align: Center;
    text-decoration: none;
    list-style: none;
    height: 40px;
    margin: 5px 0px;
}
#wopikFilter .icono a {
    color: white;
    font-size: 0.8rem;
    text-align: center;
    float: left;
    width: 40px;
    padding: 10px;
    margin-left: 5px;
}
#wopikFilter .icono a:not([class='icon-listen']) {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.firstexp #wopikFilter .icono a.icon-person, .firstexp #wopikFilter .icono a.icon-person ~ span{
    pointer-events: none;
    opacity: 0.3;
}
#wopikFilter span {
    display: block;
    width: 84%;
    float: left;
    font-size: 0.8rem;
    padding: 0px;
    text-align: left;
    padding-left: 10px;
}
#wopikFilter span.types{
    line-height: 40px;
    display: inline;
    float: none;
    padding-left: 0px;
    color:#0B1862;
}

.smallSize {
    width: 95px !important;
}

.title-margin {
    margin: 5px 2.5px !important;
}

.icono {
    width: 46px;
    padding: 0px;
    text-align: center;
}
#user-menu {
    float: right;
    list-style: none;
    margin: 0px;
    height: 42px;
    width: 37px;
    position: relative;
}
.Company #search.connect ~ #user-menu{
	display:none;
}
#submenu{
    z-index: 100;
}
#search.small ~ #user-menu, #search.medium ~ #user-menu, #search.large ~ #user-menu{
    display:none;
}
#user-menu>li:first-child {
    display: none;
}
#user-menu:after {
    content: "";
    display: block;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    position: absolute;
    left: -8px;
    height: 35px;
    top: 50%;
    -webkit-transform: translatey(-50%);
    -moz-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    -o-transform: translatey(-50%);
    transform: translatey(-50%);
}

#user-menu > li {
    height: 100%;
    width: 100%;
    float: left;
    line-height: 42px;
    display: block;
    float: left;
}

#user-menu li>a {
    line-height: 42px !important;
}

#user-menu li a {
    width: 50%;
    line-height: 30px;
    float: left;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    position: relative;
}

.userimg {
    border-radius: 50%;
    border: 1px solid white;
    height: 30px;
    width: 30px;
}

#submenu {
    position: absolute;
    margin: auto;
    background: white;
    list-style: none;
    right: 0px;
    top: 100%;
    width:147px;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
#search.small ~ #user-menu, #search.medium ~ #user-menu, #search.large ~ #user-menu{
    display:none !important;
}
#submenu li {
    text-align: center;
    padding: 0px 20px;
    width: 100%;
    display: block;
    overflow: hidden;
    height: 42px;
    font-size:0.8rem;
    line-height:42px;
    font-weight:bold;
}

#submenu li:hover {
    background: #0B1862;
}

#submenu li:hover a {
    color: white;
}

#submenu li a {
    color: #0B1862;
    width: 100% !important;
    text-align: center;
    display: block;
    font-size: 0, 8rem !important;
    padding: 0px 10px !important;
}

#submenu li:first-child a {
    line-height: initial !important;
    margin-top: 5px;
}
.hidden {
    display: none !important;
}

.disabled {
    opacity: 0.5;
}

input.disabled {
    pointer-events: none;
}

.filter-active {
    background: white !important;
    color: #0B1862 !important;
    border-radius:0px !important;
}
.filter-active ~ span{
	background:white;
	color: #0B1862 !important;
	max-height:40px;
}

.icone {
    color: black;
    pointer-events: none;
}
#advanced {
    width: 10%;
    padding: 5px !important;
    color: #0B1862;
    font-size: 1rem;
}
#advanced:hover {
    color: #0b1862 !important;
}

div.ui-datepicker {
    font-size: 10px;
}

.body {
    margin: auto;
    left: 0px;
    right: 0px;
}
.writting .overlay{
    height:100vh;
    position: fixed;
    top:0px;
    left:0px;
    width:100%;
    overflow-y: visible;
    background: rgba(0,0,0,0.3);
    z-index:6;
    overflow:hidden;
}

#FirstExpInfo {
    text-align: center;
    padding: 30px 20px;
    color: white;
    background: #0b1862;
    top:0px;
    height:auto !important;
    min-height:auto !important;
}

#FirstExpInfo p span {
    font-size: 1.5rem;
}
#FirstExpInfo p span.styleupload{
    font-size:1rem;
    margin:0px;
}
#FirstExpInfo p span.styleurl{
    display: inline-block;
    background: white;
    color: gray;
    padding:3px 10px;
    margin:0px;
    font-size:1rem;    
    color:#0b1862;
}
#FirstExpInfo p .icon-wopik {
    margin-right: 20px;
}
#FirstExpInfo button.close-button {
    background:dimgray;
    color:#0b1862;
    font-weight:bold;
    width:20px;
    height:20px;
    border-radius:50%;
    line-height: 22px;
    font-size: 1rem;
}
#FirstExpInfo .accept{
    background: #8064a2;
    margin-right:20px;
}
#FirstExpInfo .accept:hover{
    background: #604b79;
}
#FirstExpAction, #waitMessageModal, #warningMessageModal {
    background: #0b1862;
    min-height:initial;
    height:auto;
    overflow: hidden;
    margin-bottom:15px; 
}
#warningMessageModal{
	margin-top:50% !important;
	top:initial !important;
}
#waitMessageModal p, #warningMessageModal p{
	color:white;
}
#FirstExpAction  input{
    float: left;
    clear:left;
    display: inline-block;
    height:1.2rem;
    width:15px;
    margin-top:7px;
    font-weight: bold;
}
#FirstExpAction  label{
    float: left;
    color:white;
    width:calc(100% - 40px);
    margin:0px important;
    padding:0px important;
}
#FirstExpAction  label i{
    font-size: 1.2rem;
    display: inline-block;
}
#FirstExpAction label span.selected{
	display:none;
}
#FirstExpAction input:checked + label span.selected{
	display:inline;
	font-weight: 400;
}
span.selected b{
	font-size: 1.1rem;
	font-weight: bold;
}
#FirstExpAction input:checked + label span.unselected{
	display:none;
}
#FirstExpAction label span.highlighted{
    background: #fff;
    color: #0b1862;	
    font-weight: bold !important;
}
#FirstExpAction  label span{
    padding:5px;
    font-weight: bold;
}

#FirstExpAction .continue{
    clear:both;
    display: block;
    float: right;
}
#FirstExpAction .continue{
    background:gray;
    pointer-events:none;
}
#FirstExpAction input:checked[value=icon-globe] ~ .continue{
    background: #8064a2 !important;
    pointer-events:auto !important;
}
/* ==================================== TARGET FORM  ============================================= */
.boxed{
	border: 1px solid gray;
	padding:15px;
	clear:both;
	margin-bottom:10px;
}
form + p, .boxed + p{
	display: block;
	clear:both;
}
.boxed input[type="checkbox"]{
	clear:left;
	float:left;
	margin-top: 5px;
}
.boxed input[type="checkbox"] + p, .boxed input[type="checkbox"] + label{
	width: 85%;
	float:left;
}
input[type="radio"] {
	clear:left;
	float:left;
	margin-top:5px;
}
input[type="radio"] + label {
	width: 80%;
	float:left;
}
.button-container{
	text-align: right;
}
#user_list i, #information_list i, #category_list i{
	display: block;
}
#custom-categorization ~ .boxed, #custom-survey-categorization ~ .boxed, #other-posts ~ .boxed, #language-custom ~ .boxed{
	display: none;
}
#custom-categorization:checked ~ .boxed, #custom-survey-categorization:checked ~ .boxed, #other-posts:checked ~ .boxed, #language-custom:checked ~ .boxed{
	display: block;
}
/* ==================================== LISTEN TITLE INFO  ============================================= */

#ListenTitleInfo{    
    text-align: left;
    padding: 30px 20px;
    color: white;
    background: #0b1862;
    height:initial;
    overflow: hidden;
    min-height:initial;
}

#modifyTopikModal{
	background: #0b1862;
    height: initial;
    top: 50px !important;
    min-height: initial;
    color: white;
}
#modifyTopikModal label{
	color:white;
}

/* FOOTER */
footer {
    width: 100%;
	background: #303030;
    position: relative;
}
footer a{
	color:white;
	text-align: center;
}
footer img{
	position: relative;
	display: block;
	margin:auto;
}
/*CONTENT*/

.body{
    background: #f9f9f9 !important;
    min-height:calc(100vh - 49px);
    padding:95px 0px 0px;;
}
/* #id_keyword_alert{
	display: none;
} */
/* WORD CLOUD */
#tagsCloud{
	border: 1px solid #ddd;
	width:100%;
}
#tagsCloud #cloudTitle{
	text-align: center;
	font-weight: bold;
	margin-top:5px;
	font-size: 1.2rem;
}
/* ===================================== SIDEBAR ========================================== */
#sidebar{
	padding: 0px 0px 10px;
	position: fixed;
	top:45px;
	z-index: 2;
	width:100%;
}
/*#sidebar ul{
  border-collapse: separate;
  border-spacing: 5px;
}*/
#sidebar li{
	height:40px;
	border: 1px solid rgba(0,0,0,0.1);
	background: white;
}
#sidebar a{
	padding: 0px;
	border:none;
	text-align: center;
}
#sidebar a.active, #sidebar a span.active{
	color: #3a88d8;
}
#sidebar a:before{
	display: block;
	width:100%;
	margin:0px;
}
#sidebar .icon-metrics:before{
	font-size:24px;
}
#sidebar .icon-reach:before{
	line-height:40px;
	font-size: 24px;
}
/* #sidebar a span{ */
/* 	display:none; */
/* } */
#sidebar a#cancelBtn, #sidebar #id_btn_continue, #sidebar #connectBtn{
	width: 100%;
	line-height:40px;
	padding:0px;
}
/*SORT BUTTON*/
/*#sidebar li.sort{
	width:15% !important;
}*/
#sidebar li.sort button{
	text-align: center;
    width: 100%;
    background: none;
    color: Gray;
    font-size: 24px;
    padding: 0px;
}
#sidebar #togglers{
	width:100%;
	background:White;
	display: none;
	overflow: hidden;
	-webkit-box-shadow: 2px 10px 10px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 2px 10px 10px rgba(0, 0, 0, 0.3);
	box-shadow: 2px 10px 10px rgba(0, 0, 0, 0.3);
}
#sidebar #togglers li{
	width:20%;
	float:left;
	border:none;
	
}
#sidebar #togglers li a{
	padding: 0.7rem 1rem;
	color:gray;
}
#sidebar #togglers li i{
	margin-left:0px;
	font-size: 1rem !important;
}
#sidebar #togglers .icon-reach:before{
	line-height:1 !important;
	font-size:1rem !important;
}
/* CONTENT */

#sort-togglers{
	display: none;
}
#wopiks{
	width:100%;
	padding:0px;
}
.wopik{
	display:block;
	position: relative;
	overflow: hidden;
	border: 1px solid #d9d9d9;
	border-bottom:0px;
}
.wopik .topbar{
	overflow: hidden;
	display: block;
	background:white;
	border-bottom: 1px solid #d9d9d9;
}
.wopik .topbar .topik{
	width:100%;
}
.wopik .topbar .subject{
	width:75%;
	overflow: hidden;
}
.topik li:first-child{
	background: #3a88d8;
}
.topik li:first-child a{
	color:white !important;
}
.topik li:nth-child(2){
	border-right: 1px solid #d9d9d9;
}
.metrics .menu{
	height:100%;
	line-height: 1;
	text-align: center;
	height:39px;
}
.wopik .metrics{
	display: none;
	width:100%;
}
.metrics li a, .metrics span, .metrics i{
	color:#969696;
	margin-right:0px !important;
	padding:0px !important;
	font-size: 14.4px;
	margin-bottom:0px !important
}
.metrics i.active{
	color: #3A88D8;
} 
.MetricsToggler a{
	border-left: 1px solid #3a88d8;
	padding-left:10px !important;
	padding-right:10px !important;
}
.content{
	overflow: hidden;
	padding:10px 0px;
}
.content a:last-child{
	clear:both;
	float:left;
}
.content p{
	margin-bottom:0px;
}
.content a{
	display: block;
	position: relative;
}
.wopik .topbar .metrics{
	background: #f9f9f9;
}
.wopik .topbar .metrics li {
    float: left;
    min-height:50px;
    padding: 10px 0px;
    padding-left: 0px;
    padding-right: 0px;
    background: transparent;
    color: #3a88d8;
    display: inline-block;
}
/* =================================================== WOPIK LISTEN ================================================ */
.wopikListen .input-group{
	margin-bottom:0px;
}
.wopikListen .topbar .wopikToggler {
	padding: 0.7rem 0.8rem;
}
.wopikListen #updateMetrics, .wopikListen #CSVexport{
	padding: 5px 0px;
}
.wopikListen #updateMetrics{
	padding-right:5px;
}
.wopikListen #CSVexport{
	padding-left:5px;
}
.wopikListen #updateMetrics a{
	padding: 0.5rem 0px;
    border: 1px solid #3a88d8;
    width: 100%;
    text-align: center;
    font-size: 0.6rem;
}
.wopikListen #CSVexport button{
	width:100%;
	font-size: 0.6rem;
}
.wopikListen #searchDates fieldset input{
	width:100%;
}
.wopikListen #searchDates fieldset:first-of-type{
	padding-right:5px;
}
.wopikListen #searchDates fieldset:first-of-type .small-3{
	padding-left:0px;
}
.wopikListen .content #Keywords #more{
	padding:.21rem;
	display: none;
}
/* ==================================== WOPIKER TARGET MODAL ============================================= */
#wopiker-target-actions{
	background: #0b1862;
	height:auto;
	min-height:auto;
}
#wopiker-target-actions p{
	color:white;
}
#wopiker-target-actions input[type=radio]{
	clear:left;
}
#wopiker-target-actions label{
	float:left;
	width:calc(100% - 37px);
	color:white;
}
/* ==================================== WOPIKER TARGET INFORMATION ============================================= */
#wopikers-information{
	background: #0b1862;
	height: auto;
	min-height:auto;
}
#wopikers-information p{
	color:white;
	width: 95%;
}
#wopikers-information ul li{
	float:left;
	width:calc(100% - 37px);
	color:white;
}
#wopikers-information .button{
	float:right;
}
/* ==================================== TARGET SELECTOR ============================================= */
#target-selector{
	background:White;
	padding:0.5rem;
}
#target-selector a{
	display:block;
}
#target-selector a.disabled{
	pointer-events:none;
}
/* ============================================= EXTRA INFO ================================================= */
#searchExt .extra-info{
	height:auto;
	background:#0b1862;
	padding:5px;
	margin-top:5px;
	color:white;
}
#searchExt .extra-info span{
	padding:0px;
	height:auto;
	display: block;
}
/* =================================================== SOCIAL NETWORK PERCENTILE  ================================================ */
#social-network-percentile{
	height:auto !important;
	min-height:auto !important;
}
/* =================================================== WOPIKERS TARGET PROFILE ================================================ */
#target-form-error{
	clear:both;
	margin-top:35px;
	padding:0px;
}
#target-form-error .close-button{
	top:0px;
	right:0px;
}
#target-form-error p{
	width:90%;
}
.basic-target, .basic-target > *, .basic-target > *> *{
	height:auto;
	padding:0px;
}
.basic-target .columns, #basic-target-showcase .columns{
	padding-top: 5px !important;
}
.basic-target .input-group-label, #basic-target-showcase .input-group-label{
	background:none;
	border:none;
}

.basic-target .input-group-label :before, #basic-target-showcase .input-group-label :before{
	font-size: 1.2rem;
}
.basic-target .input-group-label i, #basic-target-showcase .input-group-label i{
	padding:0px;
}
#target-social-network .input-group-field label{
	float:left;
	padding:0px;
	height:auto;
}
#target-social-network .input-group-field label i{
	height:auto;	
	font-size: 2rem;
	color: rgba(0,0,0,.5);
	cursor: pointer;
	padding:0px;
}
#target-social-network .input-group-field label.active i{
	color: #0B1862;
}
/* ============================================= CRAWLER ================================================= */
#crawler {
	background: #969696;
	overflow: hidden;
	font-size: 1rem;
}
#crawler #id_button_more{
	border-radius:5px;
	padding: 0.3rem 1rem;
	float:left;
	margin-bottom:0px;
	font-size: 0.8rem;
	margin:5px;
}

#crawler input{
	display: inline-block;
    max-width: 60px;
    height: 1.8rem;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom:-5px;
    height:1.2rem;
}
#crawler #id_crawler_button{
	display: inline-block;
    font-size: 0.8rem;
    font-weight: bold;
	margin: 5px 0 0;
    padding:0.3rem;
    border-radius:5px;
    float:left !important;
}
#crawler #paid-crawler{
	clear:both;
	padding:0.3rem;
}
#crawler select{
	display: inline-block;
    max-width: 50px;
    height: 1.2rem;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom:0px;
    padding: 0px 5px;
}
/* =================================================== WOPIK TEAM ================================================ */
.wopikTeam #id_link_name_team{
	padding-right:0px;
}
.wopikTeam #id_link_name_team, .wopikTeam .message{
	display: inline-block;
	width: initial;
}
.wopikTeam .topbar .wopikToggler {
	padding: 0.7rem 0.8rem;
}
.wopikTeam .content .image{
	padding: 0px;
    min-width: 56px;
    max-width: 56px;
    padding-left: 1rem;
    max-height: 39px;
}
.wopikTeam .content .image img{
	width:100%;
	object-fit: contain;
}
.wopikTeam .content p{
	font-size: 0.9rem;
	margin-bottom: 0px;
}
.wopikTeam .content p b{
	color: #3a88d8;
}
.wopikTeam .small-10{
	max-width: 0px;
    overflow: hidden;
    padding-right: 30px;
    position: relative;
}
.wopikTeam #id_link_name_Team{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}
.wopikTeam .message{
	position: absolute;
    right: 0px;
    top: 0px;
    padding: 0.8rem 0.3rem;
}
/* =================================================== WOPIK COMPANY ================================================ */
.wopikCompany #id_link_name_company{
	padding-right:0px;
}
.wopikCompany #id_link_name_company, .wopikCompany .message{
	display: inline-block;
	width: initial;
}
.wopikCompany .topbar .wopikToggler {
	padding: 0.7rem 0.8rem;
}
.wopikCompany .content .image{
	padding: 0px;
    min-width: 56px;
    max-width: 56px;
    padding-left: 1rem;
    max-height: 39px;
}
.wopikCompany .content .image img{
	width:100%;
	object-fit: contain;
}
.wopikCompany .content p{
	font-size: 0.9rem;
	margin-bottom: 0px;
}
.wopikCompany .content p b{
	color: #3a88d8;
}
.wopikCompany .small-10{
	max-width: 0px;
    overflow: hidden;
    padding-right: 30px;
    position: relative;
}
.wopikCompany #id_link_name_company{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}
.wopikCompany .message{
	position: absolute;
    right: 0px;
    top: 0px;
    padding: 0.8rem 0.3rem;
}

/* =================================================== ACTIVATION MESSAGES ================================================ */
#AccountSelector{
    border: 1px solid #DDDDDD;
    padding: 1.25rem;
    text-align: center;
    font-weight: bold;
}
/* =================================================== ACTIVATION MESSAGES ================================================ */
#activationMessage{
    border: 1px solid #DDDDDD;
    padding: 1.25rem;
    margin: 1.125rem 0;
}
.reveal .error{
	border:1px solid #ff2a2a;
}
/* =================================================== WOPIK MESSAGE INFO ================================================ */
#target-message-info{
	height:initial !important;
	min-height:initial !important;
	background: #0b1862;
	color:white;
	border:none;
}
/* =================================================== DATABASE IMPORT ================================================ */
#id-survey-form{
	height:auto;
	clear:both;
	display:block;
	overflow: hidden;
}
#id-survey-form fieldset{
  position: relative;
  min-height:auto;
  height:auto;
}
#id-survey-form .input-look{
  width:100%;
  text-align: left;
  font-size: 0.7rem;
  border:1px solid lightgray;
  padding:8px;
  -webkit-box-shadow: inset 0px 1px 3px lightgray;
  -moz-box-shadow: inset 0px 1px 3px lightgray;
  box-shadow: inset 0px 1px 3px lightgray;
}
#id-survey-form:not(:last-of-type) input{
  padding-right:45px;
}
#id-survey-form fieldset:last-child input{
   max-height:30px;
   font-size: 0.7rem;
   padding-right: initial;
}
#id-survey-form label{
  width:15px;
  height:15px;
  border-radius:50%;
  position: absolute;
  top:8px;
  right:5px;
  background:green;
  padding:0px;
  margin:0px;
}
#id-survey-form input{
  margin-bottom:0px;
}
 #id-survey-form ::-moz-placeholder{
  color:black;
  opacity:1;
}
#id-survey-form ::-webkit-placeholder{
  color:black;
}
#id-survey-form ::-webkit-input-placeholder{
  color:black;
}
#id-survey-form input[type=checkbox]{
  display:none;
}
#id-survey-form input[type=checkbox]:checked ~ label{
  background:red;
}
#id-survey-form .add-more{
  position: absolute;
  top:6px;
  right:25px;
  background:gray;
  padding:4px 0.4rem;
  border-radius:50%;
  height:auto;
}
#id-survey-form fieldset{
	padding:0px;
}
#id-survey-form form{
	padding:0px;
	height:auto;
}
#id-suvery-form span{
	display: block;
    width: 77%;
    padding: 0px;
    height:auto;
}
#id-survey-form fieldset .cancel{
	display:none;
}
#id-survey-form fieldset .add-more{
	display: none;
}
#id-survey-form fieldset.active .add-more{
	display:block;
}
#id-survey-form fieldset.active .cancel{
	display:block;
}


/* =================================================== DATABASE IMPORT ================================================ */
/* =============================================== FIRST PHASE DATA MAPPING =========================================== */
/* DATA MAPPING BLOCKS*/
.cells-holder{
	white-space:nowrap;
	width:100%;
	overflow: auto;
	vertical-align: top;
}
.card{
	overflow: hidden;
	display:inline-block;
	vertical-align: top;
	width: 99%;
	margin: 0px 10px;
	border: 1px solid #f7f7f7;
	border-bottom-left-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
	margin-bottom:20px;
}
.card-divider{
	padding:20px 0px;
	overflow: hidden;
	background: #dbdbdb;
}
.card-divider .skipped, .card-divider .active,  .card-divider .custom{
	display: none;
}
.card-divider .ready .field, .card-divider .ready .type, .card-divider .ready .actions{
	clear:both;
	width: 100%;
	display: block;
	text-align: center;
}
.card-divider .control{
	display: none;
}
.card-section label{
	float:left;
}
.card table{
	margin-bottom:0px;
	
}
.card table thead, tbody{
	border:none;
}
.card table tr:nth-of-type(even) td{
	background:white;
	border-top:1px solid #f7f7f7;
	border-bottom:1px solid #f7f7f7;
}
/*DATA MAPPING BLOCKS ACTIVE*/
.card.active{
	border:1px solid #afc6e9;
}
.card.active .card-divider{
	background: #87aade;
}
.card.active .skipped, .card.active .ready{
	display: none;
}
.card.active .active{
	display:block;
	text-align:center;
}
.card.active .active p{
	margin-top:1rem;
	white-space: initial;
}
.card.active .active h5{
	text-align: left;
}
.card.active .active .type{
	width:100%;
	display: block;
	clear: both;
	text-align: center;
}
.card.active .control{
	display: block;
	clear: both;
	margin-top:1rem;
	margin-bottom:0px;
}
.card.active .control .button{
	padding:5px 0px;
}
.card.active table thead{
	background: #afc6e9;
	border-top: 1px solid #afc6e9;
	border-bottom: 1px solid #afc6e9;
}

.card.active table tr:nth-of-type(even) td{
	background:white;
	border-top:1px solid #afc6e9;
	border-bottom:1px solid #afc6e9;
}
.card.active.custom .active{
	display:none;
}
.card.active.custom .custom{
	display:block;
}
/*DATA MAPPING BLOCKS ERROR*/
.card.error{
	border:1px solid #ff2a2a;
}
.card.error .card-divider{
	background: #ffaaaa;
}
.card.error table thead{
	background: #ffd5d5;
	border-top: 1px solid #ff2a2a;
	border-bottom: 1px solid #ff2a2a;
}
.card.error table tr:nth-of-type(even) td{
	background:white;
	border-top:1px solid #ff2a2a;
	border-bottom:1px solid #ff2a2a;
}
/*DATA MAPPING BLOCKS ERROR*/
.card.skipped .skipped{
	display: block;
	text-align: center;
}
.card.skipped .ready{
	display: none;
}
.card.skipped .skipped b{
	color:red;
	width:100%;
	text-align: center;
	display: block;
}
/*DATA MAPPING BLOCKS READY*/
.card.ready{
	border:1px solid #5aa02c;
}
.card.ready .card-divider{
	background: #8dd35f;
}
.card.ready select{
}
.card.ready table thead{
	background: #c6e9af;
	border-top: 1px solid #5aa02c;
	border-bottom: 1px solid #5aa02c;
}
.card.ready table tr:nth-of-type(even) td{
	background:white;
	border-top:1px solid #5aa02c;
	border-bottom:1px solid #5aa02c;
}

/* =============================================== DATA SELECTOR FOR ANALYSIS =========================================== */
.user-selection{
	padding:0px;
	float:left;
	clear:none;
	position: relative;
	border: 1px solid #999;
}
.tabs{
	display: none;
}
#userinfo{
	margin-bottom:1rem;
}
#userinfo.user-selection:after{
	content:"";
	position: absolute;
	display: block;
	height:100%;
	width:0px;
	border-left:1px solid #999;
	left:0px;
	right:0px;
	margin:auto;
}
#user-type-box{
	width:50%;
	float:left;
	padding:0px;
	display: block !important;
}
#user-type-box ~ #username-box{
	width:50%;
	float:left;
	padding:0px;
	display: block !important;
}
#username-box{
	width:100%;
}
.user-selection .header{
	background: #b3b3b3;
	padding: 0px 1rem;
}
.user-selection .content{
	padding:0px 1rem;
}

.user-selection .header h2{
	font-size: 1rem;
	font-weight: bold;
	padding:0.5rem 0px;
}
.user-selection .content input{
	display: inline-block;
}
.user-selection .content label{
	display: inline-block;
	width: initial !important;
}
.user-selection .content label ~ a{
display: block;	
float: left;
clear:none;
	}
/* =============================================== EXTRA DATA INPUT  =========================================== */

#extra-data .selectors{
	overflow: hidden;
}
#extra-data input[type=checkbox] + label + fieldset{
	display: none;
}
#extra-data input[type=checkbox]:checked + label+ fieldset{
	display: block;
}
#extra-data fieldset i{
	clear: left;
	display: block;
}
#extra-data fieldset i .button{
	display: inline-block;
    vertical-align: baseline;
    padding: 2px 5px;
    border-radius: 30px;
    margin-left: 0.5rem;
    margin-bottom:0px;
}