/* 
    Created on : Mar 4, 2017, 7:54:46 AM
    Author     : Gio
*/

html {
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    min-height:100%;
}

#header_rail {
    width: 100%;
    height: auto;
    font-size:38px;
    font-weight:bold;
}
#header_rail a:hover {
    text-decoration:none;
    color:#337ab7;
}
.fb-login-button {
    float:right;
}

#user_account {
    float:right;
    cursor: pointer;
    position: relative;
}

#user_photo {
    border: 1px solid #337ab7;
}

#account_menu {
    position: absolute;
    border: 1px solid #337ab7;
    width: auto;
    height: auto;
    font-size: 14px;
    right: 0;
    font-weight:normal;
    padding: 15px;
    background: white;
    text-align: right;
    white-space: nowrap;
    border-radius: 4px;
    z-index:1000;
}

.content_frame {
    width: 100%;
    min-width: 1510px;
    display: flex;
    height: auto;
    min-height: calc(100vh - 160px);
    border: 1px solid gray;
    font-size: 14px;
    padding: 8px;
    border-radius: 3px;
}

.center_section {
    display:inline-block;
    vertical-align:top;
    width:calc(100% - 248px);
}

.log_center {
    margin-left:248px;
}

#streams_bay {
    width:100%;
    white-space: normal;
    padding-left: 4px;
}

.dashboard {
    height: auto;
    width:100%;
    white-space:nowrap;
    position: relative;
}

#log_control {
    position: absolute;
    top: -50px;
    right: 50px;
    color: rgb(225,15,15);
}

.log_button {
    background-color:rgb(225,15,15);
    border-color: rgb(200,0,0);
    color:white;
    width:110px;
}

.log_button:hover {
    background-color:rgb(200,15,15);
    border-color: rgb(200,0,0);
    color:white;
}
.log_button:focus, .log_button:active, .log_button:active:focus {
    color:white;
    box-shadow:none;
    outline:none;
}

.blinker, .log_status {display:inline-block;}

.log_status { margin-right: 20px; }

.readouts {
    display:inline-block;
    vertical-align:top;
    margin-right: 8px;
    width: calc(100% - 650px);
}

.live_controls {
    padding: 3px 0px;
    border-bottom: 1px solid lightgray;
    margin: 0px 5px 8px;
}

#live_radios {display:inline-block;}

.action_buttons {
    position: relative;
    margin-bottom:5px;
}

.lower_action_buttons {
    position: relative;
    margin-bottom:8px;
    padding-bottom: 8px;
    border-bottom: 1px solid lightgray;
}

.display_corner {
    display: inline-block;
}

.display_tab {
    display: inline-block;
    line-height: 42px;
    min-width: 180px;
    text-align: center;
    border: 1px solid lightgray;
    margin-right: 5px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    cursor: pointer;
    background:white;
    position:relative;
    z-index: 10;
}

.hero_info #mute_icon {
    display:inline-block;
    position:absolute;
    right:3px;
    cursor:pointer;
}

#combined_stream_info, #selected_stream_info, #log_stream_info, #hero_stream {
    min-width: 640px;
    height: auto;
    font-size: 14px;
    border: 1px solid lightgray;
    border-radius: 8px;
    position:relative;
    z-index:0;
    padding:3px;
    margin-bottom:5px;
}

.expander {
    display: inline-block;
    cursor: pointer;
    height: 64px;
    line-height: 64px;
    width: 80px;
    text-align: center;
    color: #655e5e;
}

.expander:hover {
    text-decoration: underline;
} 

#hero_stream {
    min-height: 445px;
}

.hero_info, .hero_footer {
    font-size:20px;
    padding: 0px 3px;
    max-width: 624px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height:36px;
}

.hero_info img {
    margin-right:15px;
}

.hero_footer {
    font-size:18px;
}
.corner_container {
    white-space:normal;
}

#empty_stream {
    text-align: center;
    line-height: 200px;
    width: 635px;
}

.icon_menu {
    width: 58px;
    display: inline-block;
    vertical-align:top;
    margin-top: 70px;
}

.menu_item {
    cursor: pointer;
    margin-bottom: 20px;
    height:50px;
    width:50px;
    margin-left:5px;
    padding-top:5px;
    text-align:center;
    border: 1px solid white;
}

.menu_item_youtube:hover { border: 1px solid #ff0000; }
.menu_item_twitch:hover { border: 1px solid #6441a5; }
.menu_item_facebook:hover { border: 1px solid #3d5999; }
.menu_item_neutral:hover { border: 1px solid rgb(101,94,94); }
.menu_item_live:hover { border: 1px solid rgb(0,128,0); }

#corner_iframe {
    display: inline-block;
    vertical-align:top;
    padding-top: 4px;
    padding-left: 2px;
}

.readout_title {
    font-size:16px;
    padding-left:14px;
    padding-top:2px;
    color:white;
    background: #969696;
    line-height: 32px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.table_title span {
    font-style: italic;
}
.readout_frame {
    border: 1px solid lightgray;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    min-height:200px;
    margin-bottom:8px;
    padding:5px;
}
.empty_table {
    text-align:center;
    line-height: 150px;
}
.dash_table {
    vertical-align:top;
    display:block;
    padding-top: 5px;
}

.table_head, .table_row {line-height:14px;}

.search_row {line-height:15px;}

.table_foot { line-height: 22px;}

.table_head {
    font-weight:bold;
    cursor: pointer;
}

.table_head .platform, .table_head .channel, .table_head .live_name, .table_head .off_name, .table_head .search_name, .table_head .num, .table_head .date, .table_head .percent, .table_head .big_num {
    text-decoration: underline;
}
.table_foot {
    font-weight:bold;
}

#live_table .table_row:hover{
    outline: 1px solid #337ab7;
    cursor: pointer;
}

.dash_table .icon, .dash_table .platform, .dash_table .channel,.dash_table .live_name,.dash_table .search_name, .dash_table .off_name, .dash_table .date,.dash_table .num, .dash_table .big_num, .dash_table .percent {   
    padding: 0 3px;
    display: inline-block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.dash_table .date, .dash_table .num, .dash_table .big_num, .dash_table .percent {
    text-align: right;
}

.dash_table .icon img {
    position: relative;
    top: 3px;
    cursor: pointer;
    vertical-align: initial;
}
    
.dash_table .icon { width:23px;}

.dash_table .platform { width: 72px;}

.dash_table .channel { width:135px;}

.dash_table .live_name {
    width: calc(100% - 525px);
    min-width: 150px;}

.dash_table .off_name {
    width: calc(100% - 338px);
    min-width: 150px;
}

.dash_table .search_name {
    width: calc(100% - 338px);
    min-width: 150px;
}

.dash_table .date { width: 85px;}

.dash_table .percent {width: 57px;}

.dash_table .num {width: 65px;}

.dash_table .big_num {width: 85px;}

#combined_graph {
    display: inline-block;
    font-size:14px;
}

#left_nav_rail {
    position: relative;
    margin-right: 8px;
    width: 240px;
    height: auto;
    display: inline-block;
    vertical-align:top;
    border-radius:8px;
}

#collection_selection, #individual_selection {
    width:auto;
    height: auto;
    display:block;
    vertical-align:text-top;
    padding: 5px;
    border: 1px solid lightgray;
    border-radius:8px;
    white-space:nowrap;
}
#collection_selection {
    margin-bottom: 8px;
}

#collection_select {
    display: inline-block;
    width: 190px;
    padding: 6px 6px;
    cursor:pointer;
}

#tab_holder {
    margin: 15px 0px 10px 0px;
}

#tab_holder .tab {
    display:inline-block;
    cursor:pointer;
    min-width: 76px;
    border-bottom: 5px solid lightgray;
    min-height:38px;
    text-align: center;
}
.platform_pane form.url_select {
    margin-left: 0px;
    margin-bottom: 5px;
}

.stream_select_button img {
    position:relative;
    top: -2px;
}

.stream_select_button, .action_button {
    height: 50px;
    width: 130px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    background-color: rgba(211, 211, 211, 0.3)
}

.stream_select_button:hover, .action_button:hover, .dash_button:hover{
    border-color: rgba(0, 140, 251, .8);
}

.stream_select_button:hover, .action_button:hover {
    background-color: rgba(211, 211, 211, 0.5);
}

.stream_select_button:focus, .action_button:focus {
    outline:none;
}

.action_button {
    font-size:14px;
    height:35px;
    width:110px;
    padding:5px;
}

.lower_button {
    font-size:12px;
    height:26px;
    width:80px;
    padding:0px;
}

.dash_action {
    display: inline-block;
    float:right;
    margin-top: -5px;
}

.dash_button {
    float: right;
    height: 26px;
    font-size: 12px;
    padding: 0;
    width: 80px;
    margin-right: 4px;
    background: white;
    color: #333;
    margin-top: 2px; 
    border-radius:4px;
}

.stream_text {
    font-weight:bold;
    font-size:16px;
    margin-bottom: 8px;
    padding: 0px;
    min-height:0px;
    height:20px;
}
.stream_select {
    width: 150px;
    display: inline-block;
}

.selection_popup {
    position: absolute;
    top: 178px;
    left: 200px;
    width: auto;
    height: auto;
    border: 2px solid #afafaf;
    border-radius: 6px;
    background-color: white;
    padding:13px 8px;
}
.selection_popup .popup_text {
    font-weight: bold;
    font-size: 16px;
    margin: 7px 0px 4px 78px;
}

#collection_window {
    position: absolute;
    top: 18px;
    left: 155px;
    min-width: 320px;
    width: auto;
    min-height: 63px;
    height:auto;
    border: 2px solid #afafaf;
    border-radius: 6px;
    background-color: white;
    padding:13px 10px;
    z-index:1000;
    font-weight:normal;
}

#collection_window .info{
    font-size:16px;
    font-weight: bold;
    color: green;
    line-height:38px;
}

#collection_window .chk_label {
    display:block;
    text-align:left;
    font-weight: normal;
    font-size:14px;
    margin-bottom:0;
    margin-top:4px;
    cursor: pointer;
}

#footer {
    padding:20px;
}
#container {
    width: 100%;
    padding: 10px 20px;
    position: relative;
    min-height: calc(100vh - 80px);
}

.widget_holder {
    display: inline-block;
    margin:1px;
}

.widget_holder.selected {
    background-color: #337ab7;
}

.widget_holder:hover {
    background-color: #337ab7;
}

.area {
    width: 290px;
    height: 224px;
    margin: 4px;
    border: 1px solid;
    display: inline-block;
    vertical-align:top;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    overflow:hidden;
}

.close_button {
    cursor: pointer;
    position: absolute;
    top: 3px;
    right: 3px;
}

#collection_window .close_button, .selection_popup .close_button, #search_window .close_button {
    top: 3px;
    right: 3px;
}

.min_max_button {
    cursor: pointer;
    position: absolute;
    top: 3px;
    right: 30px;
}

.main-panel {
    display: inline-block;
    background-color: white;
}

.logo-holder {
    height:40px;
    margin-bottom:3px;
    padding-left:4px;
}
.logo-holder_min {
    font-size:18px;
    margin-bottom:3px;
}
.dropdown_min {
    display: inline-block;
}

.platform_min {
    font-size: 14px;
    display: inline-block;
    height:36px;
    line-height:36px;
    vertical-align:top;
    overflow:hidden;
    text-overflow: ellipsis;
}

.platform_min img {
    margin-right:10px;
    vertical-align: text-bottom;
}

.input-area {
    display: block;
    height: 34px;
    width: 230px;
    padding: 3px;
}

.select_holder {
    display:block;
}

.reload_link {
    position:absolute;
    font-size:12px;
    right: 0px;
    top: 22px;
    cursor:pointer;
}

.glyphicon-star-empty, .glyphicon-star {
    cursor: pointer;
}

.area .glyphicon-star-empty, .area .glyphicon-star {
    font-size: 24px;
    position: absolute;
    right: 30px;
    top: 2px;
}

#dashboard .glyphicon-star-empty, #dashboard .glyphicon-star {
    font-size: 17px;
    top:2px;
}

.input-area option, .selection_popup option {
    font-style: normal;
}

#collection_select option {
    font-style: normal;
    color:rgb(85,85,85);
}

#collection_display .coll_group {
    margin-bottom:8px;
    position:relative;
}

#collection_display .coll_title, .pane_list .coll_title {
    font-weight:bold;
    text-decoration:underline;
    color: #337ab7;
}

#collection_display .coll_item, .pane_list .coll_item {
    cursor: pointer;
    height: 20px;
    position:relative;
}

#collection_display .coll_item .coll_ratio {
    display:inline-block;
    vertical-align:top;
}

.coll_tooltip {
    position:fixed;
    border: 1px solid #337ab7;
    background:white;
    z-index: 100;
    padding:8px 10px;
    border-radius:4px;
}
.coll_tooltip_item {
    
}

.coll_tooltip_item .tt_name {
    display:inline-block;
    margin-right: 10px;
    min-width: 80px;
}

.coll_tooltip_item .tt_count {
    display:inline-block;
    float:right;
}

.pane_list .coll_item .green_dot {
    font-size: 12px;
    display:inline-block;
    vertical-align: top;
    padding-top: 1px;
}

#collection_display .coll_item .viewer_count, .pane_list .coll_item .viewer_count {
    float:right;
    margin-right:5px;
}

#collection_display .coll_item .coll_name, .pane_list .coll_item .item_name {
    display:inline-block;
    overflow:hidden;
    text-overflow: ellipsis;
}

#collection_display .coll_item .coll_name { 
    max-width:130px;
}
.pane_list .coll_item .item_name {
    max-width:150px;
}
    
#collection_display .coll_item .coll_name:hover, .pane_list .coll_item .item_name:hover {
    text-decoration:underline;
}

.iframe_holder {
    display: block;
}
.stream_select_card {
    height: 315px;
    width: 560px;
    padding: 25px;
    border: solid 2px #ff0000;
    margin-bottom: 5px;
    overflow-y: scroll;
}

#container .area .bottom-panel {
    display: block;
    vertical-align:top;
    padding: 2px;
    height: auto;
}
#container .stream {
    height:315px;
    width:560px;
    display:inline-block;
}
#container .stream_min {
    height:180px;
    width:320px;
    display:inline-block;
}

#container .control_bar {
    font-size:24px;
    width: 100%;
    display: inline-block;
    font-weight: bold;
    padding: 0px 3px 0px 3px;
}
#container .control_bar_min {
    font-size:14px;
    width: 100%;
    display: inline-block;
    padding: 0px 3px 0px 5px;
}
    
.control_bar .viewdetails, .control_bar_min .viewdetails {
    margin-top: -2px;
    display: inline-block;
}
.control_bar .info_button {
    line-height: 20px;
    padding: 1px 4px;
    float: right;
    margin-left: 5px;
}

.control_bar .carat_symbol {
    vertical-align:text-top;
    line-height: 24px;
}

#container .views {
    display: inline-block;
    font-size: 18px;
    margin-left: 5px;
    vertical-align: top;
}

#search_box {
    margin-bottom:8px;
    border-bottom: 1px solid lightgray;
}

#search_radios {
    padding: 2px 0px 4px;
    color: #337ab7;
}
#search_window {
    position: absolute;
    height:auto;
    min-height: 200px;
    min-width: 600px;
    width:auto;
    top: 60px;
    left: 0;
    border: solid 1px #337ab7;
    border-radius:8px;
    background: white;
    padding: 20px 12px 12px;
    z-index: 100;
}

.search_block {
    display:block;
    margin-bottom:5px;
}

.search_block .no_results {
    min-height: 60px;
    line-height: 60px;
    color: gray;
    padding-left: 20px;
}

.search_item {
    cursor:pointer
}

.search_thumb_frame {
    width:320px;
    height:180px;
    display:inline-block;
    border: 1px solid lightgray;
    margin-top:5px;
    color: lightgray;
    line-height:180px;
    text-align:center;
}

.search_thumb {
    position:absolute;
    top:5px;
    right: -320px;
}

.search_logo {
    padding-left:22px;
    margin-bottom: 4px;
}

.search_check, .search_check input[type=checkbox] {
    margin: 0;
    vertical-align:middle;
}

.search_table_contents {
    display:flex;
}

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

.search_table tbody tr:hover{
    outline: 1px solid #337ab7;
}

.search_load_button {
    position:absolute;
    right:334px;
    top:10px;
}

.url_select {
    display: inline-block;
}
.url_select .form-group {
    vertical-align:text-top;
}

.url_select .url-text {
    font-size:16px;
    vertical-align:middle;
}

.url_select .url-input{
    padding: 2px 5px;
    height: 32px;
    width: 170px;
    vertical-align:text-top;
}

.url_select .url-button {
    margin-left: 4px;
    height: 33px;
    padding: 6px 10px;
    border-color:inherit;
    vertical-align:text-top;
}

.dropdown_select {
    display: inline-block;
    width: 180px;
    padding: 6px 6px;
    cursor: pointer;
}


.views .viewerbox {
    border: 1px solid #2e6da4;
    font-size: 24px;
    display: inline-block;
    width: 124px;
    height:64px;
    margin-right:8px;
    vertical-align:top;
    border-radius:3px;
}
.views .viewerbox:last-of-type {
    margin-right: 0px;
}
.viewerbox .viewlabel {
    font-size:13px;
    color: white;
    text-align: center;
    display:block;
}
.viewerbox .viewcount {
    font-size:22px;
    font-weight: bold;
    text-align: center;
    display:block;
    height: 22px;
    line-height: 22px;
    margin-top:7px;
}
.viewdetails {
    font-weight: normal;
    font-size: 11px;
    font-style: italic;
    color: gray;
    text-align:center;
}

.graph-panel {
    height: auto;
    width: 575px;
    display: inline-block;
    vertical-align: top;
}

.stats {
    max-width: 575px;
    padding: 30px;
}

.stats .info_item {
    display: inline-block;
    width: 100px;
    font-weight: bold;
    margin-right: 10px;
    text-align: right;
}

.stats .item_value {
    display:inline-block;
    vertical-align:top;
    max-width:400px;
}

.button-bar {
    text-align:center;
    margin-top: 8px;
}

.dur-btn {
    display: inline-block;
    width: 85px;
    margin-right: 10px;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    /*transition: all .1s ease-in-out;*/
    background-color:transparent;
}

.dur-btn:last-of-type {
    margin-right: 0px;
}

.dur-btn:hover {
    color: white;
}

.dur-btn:focus {
    outline:none;
}

.dur-btn-youtube {
    color:#ff0000;
    border-color:#ff0000;
}
.dur-btn-youtube:hover {
    background-color: #ff0000;
}

.dur-btn-youtube-active {
    /*box-shadow: inset 0 0 5px #ff0000;*/
    color:white;
    background-color: #ff0000;
}

.dur-btn-twitch {
    color:#6441a5;
    border-color:#6441a5;
}

.dur-btn-twitch:hover {
    background-color: #6441a5;
}

.dur-btn-twitch-active {
    /*box-shadow: inset 0 0 5px #6441a5;*/
    color:white;
    background-color: #6441a5;
}

.dur-btn-facebook {
    color:rgb(61,89,153);
    border-color:rgb(61,89,153);
}

.dur-btn-facebook:hover {
    background-color: rgb(61,89,153);
}

.dur-btn-facebook-active {
    /*box-shadow: inset 0 0 5px #6441a5;*/
    color:white;
    background-color: rgb(61,89,153);
}

.dur-btn-neutral {
    color:#655e5e;
    border-color:#655e5e;
}

.dur-btn-neutral:hover {
    background-color: #655e5e;
}

.dur-btn-neutral-active {
    /*box-shadow: inset 0 0 5px #6441a5;*/
    color:white;
    background-color: #655e5e;
}

.dur-btn-live {
    color:rgb(0,128,0);
    border-color:rgb(0,128,0);;
}

.dur-btn-live:hover {
    background-color: rgb(0,128,0);;
}

.dur-btn-live-active {
    /*box-shadow: inset 0 0 5px #6441a5;*/
    color:white;
    background-color: rgb(0,128,0);
}

.custom-tooltip {
    width: auto;
    margin: 0;
    line-height: 24px;
    border: 1px solid gray;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px;
}

.custom-tooltip  .label {
  display: block;
  margin: 0;
  color: #666;
  font-size: 16px;
  font-weight: normal;
  text-align: left;
}

.modal_position {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: #fff;
}

.modal_position .close_button {
    top: 4px;
    right: 4px;
}

.modal_background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.3);
}

.modal_format {
    border: 1px solid #337ab7;
    border-radius: 8px;
    padding: 30px 20px 20px 20px;
    min-width:600px;
}

.modal_contents {
    max-height: 600px;
    overflow-y:auto;
    padding: 20px 35px 20px 20px;
}

.collection_modal_group {
    margin-bottom: 15px;
}

.collection_modal_title {
    font-size: 16px;
    min-width: 300px;
    color: #4a4a4a;
}

.collection_modal_title_date, .collection_modal_item_date {
    font-size: 14px;
    color: #9e9e9e;
}

.collection_modal_item_date {
    margin-left:15px;
}

.collection_modal_title input[type=text] {
    height:22px;
}

.share_link {
    font-size: 12px;
}

.del_channel {
    cursor: pointer;
}

.collection_modal_title .action_link, .coll_title .action_link {
    float: right;
    font-size:12px;
    margin-left: 10px;
    cursor:pointer;
    color: #337ab7;
    line-height: 24px;
}

.coll_title .nav_links {
    display:inline-block;
    float:right;
    font-size:11px;
}

.coll_title .action_link {
    line-height: 20px;
    margin-left:0;
    font-weight: normal;
    font-size: 11px;
    float:none;
}

.collection_modal_title .action_link:hover, .coll_title .action_link:hover {
    text-decoration: underline;
}

.collection_modal_item {
    margin-left: 15px;
    color: #4a4a4a;
}