/*** Overridden admin ***/
:focus {
  outline-color: #a7cef6;
/*  outline-style: double;*/
}

::-webkit-scrollbar-track {
    background: #F5F5F5;
    border: 1px solid #ddd;
}
::-webkit-scrollbar-thumb:hover {
    background: #666;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
}
::-webkit-scrollbar {
    width: 12px;
}

body{
    overflow-x:hidden;
    font-family: "Roboto" !important;
}

section, div, p, span, table, tr, ththead, th, td, form, input, select, radio, label {
    font-family: "Roboto" !important;
    font-size: 12px;
}

li, dt, dd {
    font-size: 14px;
    line-height: 14px;
}

a {
    cursor: pointer;
    color: #1a73e8;
}
a:hover {
    font-weight: 600;
    color: #1a73e8;
}
a:visited {
    color: #1a73e8;
}

h1#site-name i{
/*    display: none;*/
    font-size: 15px;
    color: #b6b6a7;
    font-weight: 600 !important;
    position: relative;
    left: 14px;
    top: 3px;
}

h1#site-name a.segment_btn.feedback {
    background: #fec522;
    color: #000 !important;
    font-size: 13px;
    font-weight: 600;
    width: 145px;
    position: relative;
    left: 87px;
    height: 26px;
}

h1#site-name a.segment_btn.feedback:hover {
    background: #feac1c;
}

a.disabled {
    color: #c8c6c9 !important;
    cursor: default !important;
}

#header{
    height: 54px;
    background: RGB(23,86,129);
    position: fixed !important;
    top: 0;
    z-index: 3;
}

div#header_sep {
    width: 100%;
    position: fixed;
    top: 0;
    height: 68px;
    background: #fff;
    z-index: 2;
}

#branding {
	margin-left: 17px;
	margin-top: 7px;
}

#content {
	margin-top: 15px;
	margin-left: 0;
	margin-right: 0;
}

/* Login and Actions dropdowns - Overrides Slimmenu style */
ul.slimmenu {
    width: auto;
    position: fixed !important; 
    z-index: 4;
}

ul.slimmenu li{
    background-color: transparent;
    font-size: 13px;
}

ul.slimmenu li a {
    color:#d5d5d5;
    font-size: 12px;
    font-weight: 400;
    padding: 0;
    width: 100%;
    display: inline-block;
    cursor: pointer;
}

ul.slimmenu li a:hover{text-decoration:none !important;background-color:transparent;}

ul.slimmenu li ul li {
    background: #fff;
    width: 100%;
}
ul.slimmenu li>ul{
/*    left: -28px;*/
    top: 30px;
    padding: 5px 0;
    text-align: center;
    background: #fff;
    border: 1px solid #eee;
    filter: drop-shadow(0px 1px 1px #626262);
    box-shadow: 0 0 0 0 transparent!important;
}

ul.slimmenu li > ul li a, ul#folder_context_menu li a {
    color: #7575A3 !important;
    padding: 0;
}
ul.slimmenu li > ul li a:visited {
    color: #7575A3 !important;
}

ul.slimmenu li .sub-toggle{
    background-color: transparent;
}
ul#help_support li .sub-toggle, ul#loginBox li .sub-toggle{
    top: 3px;
    right: -25px;
    width: 25px;
}

ul.slimmenu li .sub-toggle>i {
    color: #eee;
    font-size: 9px;
}

.menu-collapser{
    background: transparent;
}

#loginBox span#screen_name {
    position: relative;
    color: #d5d5d5;
}

.header_settings {
    float: right;
    min-width: 500px;
    background: #fff;
    height: 50px;
    position: relative;
    top: -14px;
}
span#help_support_sep {
    height: 20px;
    width: 0;
    border-right: 2px solid #d5d5d5;
    display: inline-block;
    position: fixed;
    z-index: 4;
    top: 19px;
    right: 143px;
}

ul#help_support {
    display: inline-block;
    top: 15px;
    color: #d5d5d5;
    float: right;
    right: 177px;
    cursor: pointer;
    height: 18px;
}
ul#help_support li > ul, ul#loginBox li > ul {
    width: 150px;
    filter: drop-shadow(0px 2px 2px #aaaaaa);
}
ul#loginBox li > ul {
    min-width: 70px;
    width: 120px;
    padding: 2px 2px;
    position: fixed;
    left: calc(100% - 152px);
    top: 45px;
}
ul#loginBox li ul li {
    width: 100%;
    text-align: center;
    padding: 0;
    top: 0;
    line-height: 20px;
    vertical-align: middle;
}
ul#help_support li ul li {
    padding: 5px 10px;
    width: 130px;
    text-align: left;
}
ul#help_support li ul li:hover, ul#loginBox li ul li:hover {
    background: rgb(234, 237, 243);
}
ul#help_support li ul li a, ul#help_support li ul li a:visited, ul#loginBox li ul li a, ul#loginBox li ul li a:visited{
    color: #666 !important;
}
ul#help_support li.has-submenu {
    position: relative;
    top: -8px;
}

ul#loginBox li > ul.meter li {
    color: #000;
}
ul#loginBox li > ul.meter li label {
    margin-left: 15px;
    margin-right: 10px;
    float: left;
}
ul#loginBox li > ul.meter li a {
    width: auto;
    margin-left: 15px;
    color: #3e87f2 !important;
}
ul#loginBox li > ul.meter li {
    background: transparent !important;
    height: 27px;
    text-align: right;
    width: 90%;
    line-height: 25px;
    white-space: nowrap;
}
ul#loginBox li > ul.meter li span.sep {
    border: 1px solid #e0e0e0;
    height: 12px;
    display: inline-block;
    position: relative;
    top: 2px;
    left: 5px;
}
ul#loginBox li > ul.meter li.signout {
    width: 100%;
}
ul#loginBox li > ul.meter li.signout:hover {
    background: rgb(234, 237, 243) !important;
}
ul#loginBox li > ul.meter li.signout a {
    color: #666 !important;
    margin-left: 0;
    padding-right: 15px;
    width: 90%;
}
ul#loginBox li > ul.meter {
    width: 180px;
    left: calc(100% - 186px);
    top: 54px;
}

ul#help_support span.question_icon {
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat 0 0 transparent;
    display: inline-block;
    width: 18px;
    height: 18px;
    position: relative;
    top: 5px;
    background-position: -223px -868px;
    margin-right: 10px;
}

ul#loginBox span.person_icon {
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat 0 0 transparent;
    display: inline-block;
    width: 18px;
    height: 18px;
    position: relative;
    top: 2px;
    background-position: -223px -825px;
    margin-right: 8px;
}

#actions, ul#repo_history {
    visibility: hidden;
    z-index: 0;
    display: inline-block;
    position: relative !important;
    left: 6px;
    top: -1px;
    width: 78px;
    background: #fff;
    color: #000;
    border-radius: 5px;
    cursor: pointer;
    line-height: 32px;
    vertical-align: middle;
    border: 1px solid #e0e0e0;
    font-size: 12px;
    height: 26px;
    margin-right: 7.8%;
}
ul#repo_history {
    visibility: visible;
    width: 92px;
    height: auto;
    border: none;
    top: -2px;
}
ul#repo_history li {
    font-size: 12px;
}
ul#repo_history li ul {
    left: 0;
    width: 520px !important;
}
ul#actions li, ul#folder_context_menu li, ul#repo_history li>ul li, ul#repo_download li>ul li, ul#bubbles_template_selection li>ul li {
    font-size: 11px;
    letter-spacing: 0.2px;
    line-height: 25px;
    text-align: left;
    cursor: default;
    color: #666 !important; 
    border: 0;
}
ul#repo_history li>ul li, ul#repo_download li>ul li, ul#bubbles_template_selection li > ul li {
    height: 25px;
}
ul#repo_history li ul span.header {
    font-weight: 600;
    padding-left: 15px;
    min-width: 60px;
    display: inline-block;
}
ul#repo_history li ul span.header.col2 {
    padding-left: 0;
}
ul#repo_history span.sp_view_date {
    display: inline-block;
    min-width: 60px;
}
ul#repo_history span.sp_names {
/*    display: inline-block; */
    padding-right: 10px;
    border-right: 2px solid #e1e1e1;
    line-height: 13px;
}
ul#repo_history span.sp_names:nth-child(n+3) {
    margin-left: 10px;
}
ul#repo_history span.sp_names:nth-last-child(1) {
    border-right: none;
}

ul#folder_context_menu {
    position: absolute;
    z-index: 999999;
    background: #fff;
}
ul#folder_context_menu li{
    width: 100%;
}
ul#actions li.has-submenu {
    height: 22px;
    line-height: 22px;
    vertical-align: middle;
    padding-left: 12px;
    width: 60px;
    cursor: pointer;
    color: #333 !important;
    font-weight: normal;
    font-size: 12px;
}
ul#actions li .sub-toggle, ul#repo_history li .sub-toggle, ul#repo_download li .sub-toggle {
    left: 0;
    width: 70px;
    z-index: 100;
    text-align: right;
    padding: 0 8px 0 0;
}
ul#repo_history li .sub-toggle {
    width: 92px;
}
ul#actions li .sub-toggle i, ul#repo_history li .sub-toggle i {
    color: #000;
}

ul#actions li>ul , ul#folder_context_menu, ul#repo_history li>ul {
    left: 0;
    top: 29px;
    width: 153px;
    padding: 5px 0;
    border: none;
    filter: drop-shadow(0px 2px 2px #aaaaaa);
}
ul#repo_history li>ul {
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    filter: drop-shadow(0px 1px 2px #aaaaaa);
}

ul#actions li.sep {
    border-top: 0.1px solid #eee;
    padding: 0;
    margin: 3px 0;
}

ul#actions li > ul li a, ul#folder_context_menu li a, ul#repo_history li > ul li a, ul#repo_download li > ul li a, ul#bubbles_template_selection li > ul li a {
    color: #666 !important;
    font-size: 11px;
}
ul#repo_download li > ul li a, ul#bubbles_template_selection li > ul li a {
    font-size: 12px;
}
ul#repo_download li > ul li a.disable {
    color: #cfcfcf !important;
    cursor: default;
    text-decoration: none !important;
}

ul#repo_history li>ul li a, ul#repo_download li>ul li a, ul#bubbles_template_selection li > ul li a {
    padding: 0 15px;
    width: 490px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
ul#repo_download li>ul li a {
    width: 120px;
}
ul#bubbles_template_selection li > ul li a {
    width: 165px;
}
ul#bubbles_template_selection li > ul li a.active {
    font-weight: 600;
}

ul#actions li > ul li a:hover, ul#folder_context_menu li a:hover, ul#repo_history li > ul li a:hover, ul#repo_download li > ul li a:hover, ul#bubbles_template_selection li > ul li a:hover {
    background: rgb(234, 237, 243);
}

ul#actions li > ul li a.err_tip:hover,
ul#folder_context_menu li a.err_tip:hover {
    background: #fbe1e1;
}

ul#actions li a.disable,
ul#folder_context_menu li a.disable {
    color: #cfcfcf !important;
    cursor: default;
    text-decoration: none !important;
}

ul#actions li a span.tool_icon,
ul#folder_context_menu li a span.tool_icon {
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat 0 0 transparent;
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    top: 5px;
    margin-right: 12px;
    margin-left: 12px;
}

ul#folder_context_menu li a.rename span.tool_icon {
    background-position: -491px -291px;
}
ul#folder_context_menu li a.delete span.tool_icon {
    background-position: -491px -432px;
}
ul#folder_context_menu li a.rename.disable span.tool_icon {
    background-position: -449px -291px;
}
ul#folder_context_menu li a.delete.disable span.tool_icon {
    background-position: -449px -432px;
}

ul#actions li a.compare span.tool_icon {
    background-position: -545px -256px;
}
ul#actions li a.share span.tool_icon {
    background-position: -491px -326px;
}
ul#actions li a.share.disable span.tool_icon {
    background-position: -449px -326px;
}
ul#actions li a.intersection span.tool_icon {
    background-position: -545px -326px;
}
ul#actions li a.intersection.disable span.tool_icon {
    background-position: -447px -469px;
}
ul#actions li a.union span.tool_icon {
    background-position: -545px -362px;
}
ul#actions li a.union.disable span.tool_icon {
    background-position: -447px -504px;
}
ul#actions li a.complement span.tool_icon {
    background-position: -545px -397px;
}
ul#actions li a.complement.disable span.tool_icon {
    background-position: -447px -543px;
}
ul#actions li a.copy span.tool_icon {
    background-position: -491px -362px;
}
ul#actions li a.copy.disable span.tool_icon {
    background-position: -446px -362px;
}
ul#actions li a.move span.tool_icon {
    background-position: -491px -397px;
}
ul#actions li a.move.disable span.tool_icon {
    background-position: -445px -397px;
}
ul#actions li a.delete span.tool_icon {
    background-position: -491px -432px;
}
ul#actions li a.delete.disable span.tool_icon {
    background-position: -446px -432px;
}


/* Overridden Auto-complete */
span.search_btn {
    display: inline-block;
    width: 26px;
    height: 24px;
    position: absolute;
    z-index: 2;
    top: 15px;
    cursor: pointer;
    margin: 2px;
}
span.reset_btn {
    display: none;
    position: relative;
    left: -32px;
    top: 8px;
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat -430px -27px transparent;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 2px;
    z-index: 2;
    zoom: 0.8;
}

.easy-autocomplete.eac-square ul li, .easy-autocomplete.eac-square ul .eac-category{
    border-color: #ddd !important;
}

.easy-autocomplete.eac-square{
    display: inline-block;
}
span.search_btn.no_result {
    background: url(../img/icon_search.png) no-repeat transparent;
    position: relative;
    top: 13px;
    cursor: default;
}
.eac-square input, .eac-round input {
    background-image: url(../img/icon_search.png);
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 11px;
    height: 16px;
    padding: 5px 40px 5px !important;
    width: 450px !important;
    min-width: auto !important;
    border: 1px solid #ccc !important;
    border-radius: 4px 4px !important;
    position: relative;
    top: -1px;
    font-style: normal !important;
    color: #000 !important;
    font-size: 14px !important;
}
.easy-autocomplete.eac-square input.default {
    color: #bfbfbf !important;
    font-size: 13px !important;
}

/*** Dashboard ***/
#loginBox {
    color: #d5d5d5;
    float: right;
    top: 11px;
    font-size: 13px;
    right: 38px;
    margin-left: 15px;
}
ul#loginBox li {
    text-align: right;
    width: 100%;
    top: 4px;
}
ul#loginBox li a {
    width: 100%;
}

span#arrow:before {
    content: "\25bc";
    color: grey;
    font-size: 10px;
}

section.folders_section{
    position: fixed;
    top: 155px;
    min-width: 156px;
    max-width: 180px;
    width: 12.3%;
/*    min-height: 100vh; */
/*    padding: 1px;*/
    display: inline-block;
    border: 1px solid #e0e0e0;
    z-index: 3;
    /*border-radius: 5px 5px;*/
    border-right: 1px solid #ddd;
    background: RGB(241,245,246);
    max-height: calc(100vh - 155px);
    overflow-y: hidden;
    overflow-x: hidden;
    min-height: calc(100vh - 155px);
}
section.folders_section::-webkit-scrollbar {
    width: 8px;
}
.result_container {
    padding-left: 12px;
    padding-top: 12px;
}

section.segments_section {
    display: inline-block;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 140px;
    width: 100%;
/*    margin-right: 15px;
    margin-left: -68px;*/
}

div.segments_container {
/*
    height:90vh;
    overflow-y: auto;
*/
    background: #fff;
    min-height: calc(100vh - 262px); /*73vh;*/
}
/*
div.segments_container::-webkit-scrollbar{
    width: 12px;
    height: 16px;
}
*/
th, td{
    background: none !important;
    font-family: "Roboto";
    font-size: 13px;
}

a.segment_btn{
    display: inline-block;
    background: #3e87f2; /*RGB(26,115,231);*/
    color: #fff;
    width: 100px;
    height: 28px;
    border-radius: 4px 4px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    vertical-align: middle;
    line-height: 27px;
    font-weight: normal;
}

a.segment_btn:hover {
/*    box-shadow: 0 1px 1px 0 rgba(26,115,232,0.451), 0 2px 6px 2px rgba(26,115,232,0.302);*/
    background-color: #1a59e8;
    border: none;
}

a.segment_btn.new_folder {
    background: transparent;
    color: #3e87f2;
    font-size: 13px;
    text-align: left;
}

a.new_segment{
    width: 117px;
    margin-right: 33px;
    margin-left: 117px;
    line-height: 26px;
}

table#folders_table {
/*    border-right: 1px solid #ddd;*/
    background: RGB(241,245,246);
}
table#folders_table tr,
table#report_list tr {
    cursor: pointer;
}
table#folders_table thead tr{
    border-bottom: 1px solid #ccc;
    border-right: 0;
}
#folders_table tr.active td:nth-child(1), #report_list tr.active td:nth-child(1) {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
table#folders_table tbody tr:hover,
table#report_list tbody tr:hover {
    background: #fffdf6;
}
table#folders_table tbody tr.toggle,
table#report_list tbody tr.toggle {
    background: #fffdf6 !important;
    color: #443d23;
}
table#folders_table tbody tr.active,
table#report_list tbody tr.active {
    background: #fdde85;
}

table#report_list tbody tr.active td {
    color: #443d23;
    font-weight: 600;
}

table#folders_table tr.last-row{
    cursor: default;
}
table#folders_table tr.last-row:hover{
    background: transparent;
}
table#folders_table tr.last-row td{
    padding-bottom: 15px;
}
table#folders_table tr td {
    height: 16px;
    padding-left: 10px;
    padding-top: 9px;
    padding-right: 10px;
    border-bottom: 0;
    font-size: 12px;
}

table#folders_table tr.first-row td {
    height: 16px;
    padding-left: 13px;
/*    padding-top: 17px;*/
    padding-right: 10px;
}

table#folders_table tr.first-row {
    font-size: 13px;
}

table#folders_table tr td span.folder_name {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    display: inline-block;
    height: 16px;
    color: #616791;
}
table#folders_table tr.active td span.folder_name {
    color: #443d23;
}

table#folders_table tr td font {
    display: none;
    position: relative;
    top: -5px;
    left: 5px;
}

table#folders_table tr.active {
    font-weight: 600;
}
table#folders_table tr.active td:after {
    content: "";
    color: #000;
    font-size: 10px;
    float: right;
    height: 16px;
    width: 8px;
    background: transparent; /*url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat -230px -32px transparent;*/
    position: relative;
    left: 5px;
}

table#folders_table th {
    border: none;
    padding-bottom: 6px;
    cursor: default;
}

table#folders_table th div{
    color: #9b9b9b;
    font-size: 13px;
    position: relative;
    left: 9px;
}

table#folders_table th div span{
    border-bottom: 2px solid #bbb;
    padding-bottom: 2px;
    padding-top: 17px;
    display: inline-block;
    font-size: 12px;
    letter-spacing: 1px;
}

div.segments_panel {
/*    margin-left: 180px;
    border-radius: 5px 5px;
    border: 1px solid RGB(203,208,212);
*/
    min-width: 600px;
    padding: 1px;
/*    background: RGB(203,208,212);*/
}

div.segments_toolbox {
/*    height: 56px;*/
    line-height: 57px;
    vertical-align: middle;
    font-size: 13px;
    white-space: nowrap;
    width: 100%;
    min-width: 850px;
    position: fixed;
    left: 0px;
    top: 109px;
    z-index: 2;
    background: #fff;
    user-select: none;
    color: #5f6368;
    font-weight: normal;
}

.segments_toolbox_container {
    background: RGB(241,245,246);
    border: 1px solid #e0e0e0;
/*    margin-left: 181px;
    margin-right: 15px;
    padding-left: 20px;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;
*/
    border-left: 0;
    height: 45px;
    vertical-align: middle;
    line-height: 45px;

    border-left: 0;
    border-right: 0;
    font-weight: 600;
    color: #666;
}

div.segments_toolbox .segments_selected{
    display: inline-block;
    margin-right: 10px;
    font-weight: 600;
    position: absolute;
}

input.delselect {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: 15px;
    height: 16px;
    padding: 2px;
    border: none;
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat -221px -252px transparent;
    margin-left: 19px;
    opacity: 0.3;
}

input.delselect:focus {
    outline: none;
}

input.delselect.enable {
    background-position: -221px -299px;
    cursor: pointer;
    opacity: 1;
}

span#segments_selected {
    width: 32px;
    margin-left: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    display: inline-block;
}

span.tool_none {
    margin-right: 26px;
    margin-left: 4px;
    font-weight: 400;
    font-size: 13px;
}

span.tool_sep {
    margin-left: -18px;
}

a.tool_icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 2px 13px;
    position: relative;
    top: 7px;
    left: 1px;
    cursor: pointer;
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat 0 0 transparent;
}

a.tool_icon.icon1 {
    background-position: -25px -29px;
}
a.tool_icon.icon1:hover {
    background-position: -25px -77px;
}

a.tool_icon.icon2 {
    background-position: -72px -29px;
}
a.tool_icon.icon2:hover {
    background-position: -72px -77px;
}

a.tool_icon.icon3 {
    background-position: -121px -29px;
}
a.tool_icon.icon3:hover {
    background-position: -121px -77px;
}

a.tool_icon.icon4 {
    background-position: -169px -29px;
}
a.tool_icon.icon4:hover {
    background-position: -169px -77px;
}

a.icon4 {
    margin-right: 115px;
}

div.pagenav {
    display: inline-block;
    float: right;
    right: 11px;
    position: relative;
}

a.sp_prev_page, a.sp_next_page {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 0 15px;
    position: relative;
    top: 8px;
    left: 1px;
    cursor: pointer;
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat 0 0 transparent;
}
a.sp_prev_page {
    background-position: -268px -27px;
    margin-right: 10px;
}
a.sp_next_page {
    background-position: -321px -27px;
    margin-left: 5px;
}
a.sp_prev_page:hover {
    background-position: -268px -74px;
    background-color: #e2e2e3;
    border-radius: 50%;
}
a.sp_next_page:hover {
    background-position: -321px -74px;
    background-color: #e2e2e3;
    border-radius: 50%;
}
a.sp_prev_page.disabled {
    background-position: -268px -27px !important;
    cursor: default;
    background-color: transparent;
}
a.sp_next_page.disabled {
    background-position: -321px -27px;
    cursor: default;
    background-color: transparent;
}
span.page_count {
    display: inline-block;
    width: auto;
    font-size: 13px;
    vertical-align: middle;
    font-weight: 400;
    color: #5f6368;
}

table#segments_table{
/*    margin-bottom: 10vh;*/
    table-layout: fixed;
/*    border-right: 1px solid #eee;*/
    user-select: none;
}

div.segment_footer {
    height: 50px;
    margin-top: 50px;
    text-align: center;
    /*margin-left: 40%;*/
    font-size: 13px;
    position: relative;
    bottom: 0;
}

table#segments_table thead{
/*    display: none;*/
}
table#segments_table thead th{
    height: 20px;
    position: sticky;
    vertical-align: middle;
    border: 0;
}

table#segments_table thead th div[sort] {
    cursor: pointer;
}

table#segments_table thead th .sort-icon {
    width: 15px;
    height: 15px;
    background-image: url(/segmentpro_static/segmentpro/img/desc.svg);
    display: inline-block;
    margin-right: 5px;
    position: relative;
    top: 1px;
    visibility: hidden;
}

table#segments_table thead th:nth-child(3) .sort-icon {
    display: none;
}
table#segments_table thead th:nth-child(4) .sort-icon {
    display: none;
}

table#segments_table thead th .sort-icon.asc {
    transform: rotate(180deg);
    visibility: visible;
    display: inline-block !important;
}

table#segments_table thead th .sort-icon.desc {
    visibility: visible;
    display: inline-block !important;
}

table#segments_table th div {
    position: fixed;
    width: 100%;
    height: 38px;
    margin-top: -22px;
    vertical-align: bottom;
    line-height: 45px;
    border-bottom: 1px solid #ddd;
    z-index: 999;
    background: #fff;
    text-align: left;
}

table#segments_table tbody tr.row_active{
    background: RGB(200,220,247) !important;
}

table#segments_table tbody tr{
    height:46px;
    cursor: pointer;
}
tr.search_notes {
    cursor: default !important;
    text-align: center;
}
table#segments_table tbody tr.hover, table#segments_table tbody tr.in {
/*    -webkit-box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
    box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
*/
    background: rgb(249,249,249) !important;
}
table#segments_table tbody tr.row_active.hover, table#segments_table tbody tr.row_active.in {
    background: #b6c8e1 !important;
}
table#segments_table tbody td {
    line-height: 34px;
}
table#segments_table tr td {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #5f6368;
}
table#segments_table tr td a {
    color: #1a73e8;
    cursor: pointer;
    margin: 0 9px;
}
table#segments_table tr td a:hover {
    font-weight: 600;
}
table#segments_table tr td.first_col{
    width: 37px;
    border-left: 1px solid #eee;
}
table#segments_table tr td.col1 {
    width: 195px;
}
table#segments_table tr td.first_col input[type="radio"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: 15px;
    height: 15px;
    padding: 3px;
    background-clip: content-box;
    border: 2px solid #ccc;
    background-color: transparent;
    border-radius: 50%;
    margin: -3px 14px 0;
}
table#segments_table tr td.first_col input[type="checkbox"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: 15px;
    height: 15px;
    padding: 3px;
    background-clip: content-box;
    border: 2px solid #ccc;
    background-color: transparent;
    margin: -3px 17px 0 14px;

    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat -221px -210px transparent;
    border: none;
    cursor: pointer;
}
table#segments_table tr td.first_col input[type="checkbox"]:checked {
/*    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat -273px -169px transparent;*/
    background-position: -221px -169px;
}
table#segments_table td.first_col.hover input[type="checkbox"]{
/*    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat -273px -346px transparent;*/
    background-position: -221px -346px;
}

table#segments_table tr td.first_col input[type="radio"]:focus, table#segments_table tr td.first_col input[type="checkbox"]:focus {
    outline: none;
}
table#segments_table tr td.first_col input[type="radio"]:checked,table#segments_table tr td.first_col input[checked='checked'] {
    background-color: #1a73e8;
    border: 1px solid #bbb;
}
/* fallback for IE 11 */
table#segments_table tr td.first_col input[type="radio"]:checked::-ms-check{
    color: #1a73e8;
    border: 1px solid #bbb;
}
table#segments_table tr td.col2{
    width: 60px;
    text-align: right;
    padding-right: 30px;
}
table#segments_table tr td.col3{
    width: 126px;
    text-align: center;
}
table#segments_table tr td.last_col{
    width: 70px;
    font-size: 12px;
    text-align: right;
    padding-right: 26px;
    color: #5f6368;
}

#segments_table td:nth-child(4) span {
    display: inline-block;
    padding-right: 10px;
    border-right: 2px solid #e1e1e1;
    line-height: 13px;
}
#segments_table td:nth-child(4) span:nth-child(n+2) {
    margin-left: 10px;
}
#segments_table td:nth-child(4) span:nth-last-child(1) {
    border-right: none;
}

@media only screen and (max-width: 1400px){
    span.page_count {
        display: none !important;
    }
}

@media only screen and (max-width: 1200px){
}

@media only screen and (max-width: 1000px){
}

/* Float toolbar */
ul#segment_float_toolbar{
    margin: 0;
    position: absolute; z-index: 2; background: #fff; display: block;
    height: 36px;
    min-width: 423px;
    padding: 0 15px;
    box-shadow: -5px 1px 4px -3px #aaaaaa;
    -webkit-box-shadow: -5px 1px 4px -3px #aaaaaa;
}
ul#segment_float_toolbar li{
    list-style: none;
    display: inline-block;
    width: 66px;
    height: 30px;
    vertical-align: middle;
    line-height: 32px;
    text-align: left;
}

ul#segment_float_toolbar li.sep {
    width: 0;
    height: 16px;
    border-right: 1px solid #eee;
    position: relative;
    left: -8px;
    top: 2px;
}

ul#segment_float_toolbar li a{
    font-size: 11px;
    color: #7575a3;
}
ul#segment_float_toolbar li a:hover{
    font-weight: normal;
    text-decoration: underline;
}

ul#segment_float_toolbar span.tool_icon {
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat 0 0 transparent;
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    top: 6px;
    margin-right: 5px;
}

ul#segment_float_toolbar li a.disable {
    color: #cfcfcf !important;
    cursor: default;
    text-decoration: none !important;
}

ul#segment_float_toolbar a.view span.tool_icon {
    background-position: -491px -257px;
}
ul#segment_float_toolbar a.view.disable span.tool_icon {
    background-position: -449px -257px;
}
ul#segment_float_toolbar a.edit span.tool_icon {
    background-position: -491px -291px;
}
ul#segment_float_toolbar a.edit.disable span.tool_icon {
    background-position: -449px -291px;
}
ul#segment_float_toolbar a.share span.tool_icon {
    background-position: -491px -326px;
}
ul#segment_float_toolbar a.share.disable span.tool_icon {
    background-position: -449px -326px;
}
ul#segment_float_toolbar a.copy span.tool_icon {
    background-position: -491px -362px;
}
ul#segment_float_toolbar a.copy.disable span.tool_icon {
    background-position: -449px -362px;
}
ul#segment_float_toolbar a.move span.tool_icon {
    background-position: -491px -397px;
}
ul#segment_float_toolbar a.move.disable span.tool_icon {
    background-position: -446px -397px;
}
ul#segment_float_toolbar a.delete span.tool_icon {
    background-position: -491px -432px;
}
ul#segment_float_toolbar a.delete.disable span.tool_icon {
    background-position: -449px -432px;
}

/* Popup overridden */
a.js__p_close{
    background-position: -430px -75px;
    filter:inver(100%);
    -webkit-filter: invert(100%);
}
a.js__p_close:hover{
    background-position: -430px -27px;
}

#pop_del_segment a.js__p_close {
    -webkit-filter: none;
    filter: none;
}

/* New style for closed beta version 2.0 */
.sp_toolbar {
    top: 68px;
    position: fixed;
    z-index: 3;
    background: #fff;
    width: 100%;
    min-width: 700px;
    height: 41px;
    user-select: none;
}

ul#repo_history {
    display: inline-block;
}
div.finding_clusters_status, div.finding_clusters_results {
    display: inline-block;
    color: #000; /*RGB(214,107,25);*/
    visibility: hidden;

    box-shadow: 0 0 0 0 transparent!important;
    border: none;
    filter: drop-shadow(0px 1px 2px #cccccc);
    width: 100px;
    height: 21px;
    line-height: 20px;
    position: absolute;
    top: -2px;
    padding: 5px 15px 5px 40px;
    background: #fff;
    border-radius: 4px;
}
div.finding_clusters_results {
    width: 210px;
}

div.finding_clusters_status::before, div.finding_clusters_results::before {
    content: ' ';
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat 0 0 transparent;
    background-position: -541px -816px;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 8px;
}
a.finding_clusters_close {
    content: ' ';
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat 0 0 transparent;
    background-position: -430px -27px;
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
    right: 14px;
    top: 15px;
    padding: 2px;
    zoom: 0.6;
    cursor: pointer;
}
div.finding_clusters_results::before {
    top: 7px;
    background-position: -541px -855px;
}

div.finding_clusters_results {
    color: #000;
}
a.compare_clusters {
    color: RGB(84,135,240);
    margin-left: 5px;
}

table#segments_table thead th:nth-child(1), table#segments_table tbody td:nth-child(1) {
    width: 180px;
    max-width: 180px;
    min-width: 156px;
    padding: 5px 0;
    background: #fff !important;
    border-bottom: 0;
    cursor: default;
    visibility: hidden;
}
table#segments_table thead th:nth-child(2){
    width: 37px;
    text-align: center;
}
table#segments_table thead th:nth-child(3){
    width: 195px;
}
table#segments_table thead th:nth-child(5){
    width: 80px;
}
table#segments_table thead th:nth-child(6){
    width: 80px;
}

table#segments_table thead th:nth-child(5) div{
    padding-left: 12px;/*32px;*/
}
table#segments_table thead th:nth-child(6) div{
    padding-left: 13px; /*33px;*/
}

table#reports_table td {
    padding: 0;
    border: 0;
}
table#reports_table td:nth-child(1) {
    min-width: 156px;
    max-width: 180px;
    width: 180px;
}
table#reports_table td:nth-child(2) {
    width: 8px;
    border: 0;
}
table#reports_table td.reports_area {
    padding-right: 14px;
    min-height: 650px;
/*    vertical-align: bottom;*/
    border-bottom: 0;
    padding: 0 25px 0 15px;
}
table#reports_table td.reports_area iframe {
/*    min-width: 1280px; */
    min-height: 512px;
}
section.reports_section {
    position: absolute;
    width: 100%;
    margin-top: 141px;
}
table#reports_table {
    table-layout: fixed;
/*    position: absolute; */
/*    min-width: 1280px; */ /* min-width for reports area */
    min-height: 510px; /* same as segments table */
/*    top: 141px; */
    user-select: none;
    height: calc(100vh - 262px);
}
table#reports_table div.segment_footer{
    margin-top: 33px;
}
table#reports_table td.toolbar_col {
    height: 44px;
    border: 0;
}

table#reports_table td.toolbar_col {
    height: 44px;
    border: 0;
    line-height: 44px;
    padding: 0 18px;
}
label.comp_avg_label {
    display: none; /*inline-block;*/
}

a.comp_avg {
    width: 100%;
    display: none; /*inline;*/
}
a.comp_avg span.comp_avg_icon {
    width: 24px;
    height: 15px;
    background-position: -371px -732px;
}
a.comp_avg.disable span.comp_avg_icon {
    background-position: -334px -732px;
}
td.toolbar_col h3 {
    display: inline;
    color: #4c968d;
    font-size: 16px;
    position: relative;
    left: 40%;
}
td.toolbar_col h3 span {
    font-size: inherit;
}

ul#bubbles_template_selection {
    display: none;
    position: relative !important;
    color: #666;
    font-weight: normal;
    left: 20px;
    top: 2px;
    cursor: pointer;
    z-index: 1;
}
ul#bubbles_template_selection li .sub-toggle {
    width: 25px;
    font-size: x-small;
    display: inline;
    position: absolute;
    right: -25px;
}
ul#bubbles_template_selection li .sub-toggle i {
    color: #000;
}
ul#bubbles_template_selection li > ul {
    right: 0;
/*    left: -82px; */
    top: 20px;
    width: 195px;
    filter: drop-shadow(0px 2px 2px #aaaaaa);
}

ul#repo_download {
    position: relative !important;
    display: inline-block;
    float: right;
    margin-right: 21px;
    color: #666;
    top: 12px;
    z-index: 1;
}
ul#repo_download li .sub-toggle {
    width: 72px;
    font-size: x-small;
}
ul#repo_download li .sub-toggle i {
    color: #000;
}
ul#repo_download li > ul {
    right: 0;
    left: -82px;
    top: 20px;
    width: 150px;
    filter: drop-shadow(0px 2px 2px #aaaaaa);
}

@media only screen and (min-width: 1463px){
    table#reports_table td:nth-child(1){
	width: 180px;
    }
}

@media only screen and (max-width: 1463px){
    table#segments_table thead th:nth-child(1), table#segments_table tbody td:nth-child(1), table#reports_table td:nth-child(1){
        width: 12.3%;
    }
    .sp_manager {
        width: 10.5%;
    }
    table#folders_table tr td span.folder_name {
        max-width: 100px;
    }
}

@media only screen and (max-width: 1268px){
    table#segments_table thead th:nth-child(1), table#segments_table tbody td:nth-child(1) {
	width: 156px;
    }
    table#reports_table td:nth-child(1){
	width: 156px;
    }
    .sp_manager {
        width: 131px;
    }
    table#folders_table tr td span.folder_name {
        max-width: 85px;
    }
}

@media only screen and (max-width: 1000px){
}

.sp_manager {
    width: 10.5%;
    min-width: 131px;
    max-width: 155px;
    display: inline-block;
    text-align: left;
    padding-left: 25px;
    color: #7a8186;
    font-size: 12px;
    font-weight: 600;
}
.sp_manager.fixed {
    width: 155px !important;
}

a.build_report, a.new_segment {
    float: right;
    padding: 0;
    height: 31px;
    position: relative;
    width: 132px;
    margin-left: -19px;
    top: -2px;
    font-size: 13px;
    vertical-align: middle;
    line-height: 30px;
}

.sp_manager a.active {
    color: #616161;
    border-bottom: 5px solid #fdde85;
    padding: 1px 0;
    font-weight: 600;
}
.sp_manager a {
    color: #616791;
    display: inline-block;
    padding: 4px 0;
    margin-right: 18px;
    font-size: 13px;
    font-weight: normal;
}

div#segments_tab {
}

div#reports_tab {
    display: none;
}

a.add_change, a.view_one_by_one {
    float: right;
    text-align: right;
    font-weight: normal;
}
a.add_change {
    margin-right: 75px;
    float: none;
    border: none !important;
    width: auto !important;
    top: 0;
    position: relative;
    background: transparent !important;
}
a.view_one_by_one {
    color: #666;
}
a.view_one_by_one {
    color: #666;
    display: inline-block;
    width: 33px;
    margin-right: 26px;
}

span.add_change_icon {
    display: inline-block;
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat 0 0 transparent;
    height: 18px;
    width: 24px;
    background-position: -221px -678px;
    position: relative;
    top: 2px;
}
a.add_change:hover span.add_change_icon {
    background-position: -269px -678px;
}

span.view_one_by_one_icon, span.comp_avg_icon {
    display: inline-block;
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat 0 0 transparent;
    height: 18px;
    width: 32px;
    background-position: -221px -729px;
    position: relative;
    top: 4px;
    left: 5px;
}
a.view_one_by_one.disable span.view_one_by_one_icon {
    background-position: -268px -729px;
}

label.view_one_by_one_label {
    float: right;
}

table#report_list tr td, table#report_utils tr td {
    height: 16px;
    padding-left: 10px;
    padding-top: 9px;
    padding-right: 10px;
    border-bottom: 0;
    color: #616791;
    font-size: 12px;
}
table#report_utils tr td {
    padding: 8px 10px;
    font-size: 13px;
}
table#report_utils a.suggest_a_report {
    color: #3e87f2 !important;
}
a.csv_download, a.pdf_download {
    color: #6b80e5 !important;
}
table#report_utils a.question_icon {
    display: inline-block;
    position: relative;
    width: 12px;
    height: 12px;
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat -373px -32px transparent;
    left: 11px;
    top: 2px;
    cursor: default;
}
#report_utils td i {
    color: #7a8186;
}
table#report_utils td.bottom_sep {
    line-height: 47px;
}
table#report_utils hr {
    background: #e0e0e0;
    margin-bottom: 10px;
    width: 92%;
}


a.segment_btn.build_report {
    width: 125px;
    height: 29px;
    background: #fff;
    color: #666;
    border: 1px solid #83898e;
    border-radius: 5px;
    margin-right: 26px;
    position: relative;
    float: right;
    top: -2px;
}
a.segment_btn.build_report:hover{
    background: #f3f3f3;
}
span.build_report_icon {
    display: inline-block;
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat 0 0 transparent;
    height: 22px;
    width: 24px;
    background-position: -541px -76px;
    position: relative;
    top: 2px;
    left: -5px;
}
span.build_report_txt {
    position: relative;
    left: -3px;
    top: -3px;
    letter-spacing: 0.5px;
    color: #3d3d3d;
    font-size: 13px;
}


/* Segments list / hovercard */
span.segments_list {
    width: calc(100% - 280px);
    display: inline-flex;
    position: relative;
    top: 7px;
}
.sp_1, .sp_2, .sp_3, .sp_4, .sp_5, .sp_6 {
    display: inline-block;
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat 0 0 transparent;
    height: 24px;
    width: 24px;
    position: relative;
    top: 2px;
    left: 2px;
}
.sp_1 {
    background-position: -219px -410px;
}
.sp_2 {
    background-position: -219px -454px;
}
.sp_3 {
    background-position: -219px -498px;
}
.sp_4 {
    background-position: -219px -542px;
}
.sp_5 {
    background-position: -219px -586px;
}
.sp_6 {
    background-position: -219px -630px;
}

span.segments_list a.bubble:before {
    content: "";
    width: 90%;
    height: 100%;
    border-top: 1px solid #fff;
    position: absolute;
    left: 5%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
span.segments_list a:hover{/* span.segments_list a.in { */
    border: 1px solid #c2c2c2;
}
span.segments_list a.active {
    background: #fff;
    cursor: default;
}
/*span.segments_list a.in span.sp_1, */
span.segments_list a.active span.sp_1, span.sp_1.light {
    background-position: -267px -410px;
}
/*span.segments_list a.in span.sp_2, */
span.segments_list a.active span.sp_2, span.sp_2.light {
    background-position: -267px -454px;
}
/*span.segments_list a.in span.sp_3, */
span.segments_list a.active span.sp_3, span.sp_3.light {
    background-position: -267px -498px;
}
/*span.segments_list a.in span.sp_4, */
span.segments_list a.active span.sp_4, span.sp_4.light {
    background-position: -267px -542px;
}
/*span.segments_list a.in span.sp_5, */
span.segments_list a.active span.sp_5, span.sp_5.light {
    background-position: -267px -586px;
}
/*span.segments_list a.in span.sp_6, */
span.segments_list a.active span.sp_6, span.sp_6.light {
    background-position: -267px -630px;
}

span.segments_list a[bullet] .sp_1, 
span.segments_list a[bullet] .sp_2, 
span.segments_list a[bullet] .sp_3, 
span.segments_list a[bullet] .sp_4, 
span.segments_list a[bullet] .sp_5, 
span.segments_list a[bullet] .sp_6 {
    background: url(/segmentpro_static/segmentpro/img/ABCDE.png) no-repeat 0 0 transparent !important;
}
span.segments_list a[bullet] .sp_1{
    background-position: -24px -141px !important;
}
span.segments_list a[bullet] .sp_2{
    background-position: -77px -141px !important;
}
span.segments_list a[bullet] .sp_3{
    background-position: -130px -141px !important;
}
span.segments_list a[bullet] .sp_4{
    background-position: -184px -141px !important;
}
span.segments_list a[bullet] .sp_5{
    background-position: -237px -141px !important;
}

span.segments_list a[bullet].active .sp_1 {
    background-position: -24px -196px !important;
}
span.segments_list a[bullet].active .sp_2 {
    background-position: -77px -197px !important;
}
span.segments_list a[bullet].active .sp_3 {
    background-position: -130px -196px !important;
}
span.segments_list a[bullet].active .sp_4 {
    background-position: -184px -196px !important;
}
span.segments_list a[bullet].active .sp_5 {
    background-position: -237px -196px !important;
}

span.segments_list a {
    display: inline-block;
    max-width: calc(100% / 6);
    vertical-align: middle;
    line-height: 100%;
    border: 1px solid #ddd;
    border-radius: 20px;
    margin-left: 10px;
    position: relative;
    padding-right: 18px;
}

span.segments_list span.segment_name {
    width: calc(100% - 28px); /* minus (icon + pading-left) */
    display: inline-block;
    position: relative;
    top: 4px;
    font-size: 13px;
    color: #666;
    font-weight: normal;
    padding-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 22px;
}

.reports_toolbox_container .sp_manager {
    min-width: 90px;
    max-width: 90px;
}

@media only screen and (max-width: 1600px){
    span.segments_list {
        /*width: 70%;*/
    }
}
@media only screen and (max-width: 1400px){
    span.segments_list {
        /*width: 65%;*/
    }
}
@media only screen and (max-width: 1200px){
    span.segments_list {
        /*width: 60%;*/
    }
}
@media only screen and (max-width: 1050px){
    span.segments_list {
        /*width: 55%;*/
    }
}
@media only screen and (max-width: 860px){
    span.segments_list {
        /*width: 45%;*/
    }
}

/* Hovercard */
.tipsy.sp_hovercard {
    width: 402px;
    height: 233px;
    padding: 0;
    border: 1px solid #bbb;
    background: #fff;
    z-index: 4;
    box-shadow: -1px 2px 4px 0px #aaa;
    -webkit-box-shadow: -1px 2px 4px 0px #aaa;
}
.sp_hovercard .tipsy-inner {
    padding: 0;
    border: 0;
    background: transparent;
}
.sp_hovercard .left_panel {
    background: RGB(241,245,246);
    width: 43px;
    height: 233px;
    border-right: 1px solid #ddd;
    float: left;
}
.sp_hovercard .right_panel {
    float: right;
    width: 327px;
    padding: 0 15px;
}

.sp_hovercard .right_panel h3 {
    color: #333;
    text-align: center;
    text-overflow: ellipsis;
    overflow-x: hidden;
    margin-bottom: 10px;
}
.sp_hovercard .segment_notes {
    width: 327px;
    height: 80px;
    display: flex;
    overflow: hidden;
    flex-flow: wrap;
}
.sp_hovercard .segment_notes span {
    max-width: 156;/*135px;*/
    display: inline-block;
    height: 29px;
    background: RGB(237,247,249);
    border-radius: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 0 8px;
    font-size: 11px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 29px;
    vertical-align: middle;
}
.sp_hovercard ul#segment_fields {
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: wrap;
}
.sp_hovercard ul#segment_fields li {
    list-style: none;
    display: inline-block;
    width: 162px;
    height: 24px;
    line-height: 23px;
    font-size: 12px;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
}
.sp_hovercard ul#segment_fields li.left {
    left: -14px;
    width: 172px;
}
.sp_hovercard ul#segment_fields li.right {
    text-align: right;
    width: 152px;
}
.sp_hovercard ul#segment_fields li label {
    font-weight: 600 !important;
    display: inline-block;
    width: 50px;
    text-align: right;
    max-width: 80px;
    margin-right: 8px;
    color: #333;
}
.sp_hovercard span.segment_summary .circle_icon {
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat 0 0 transparent;
    display: inline-block;
    width: 22px;
    height: 22px;
    position: relative;
    top: 14px;
    background-position: -219px -779px;
    background: linear-gradient(270deg, #88a6ba 50%, transparent 50%), linear-gradient(0deg, #88a6ba 50%, lightgray 50%);
    border-radius: 100%;
}
.sp_hovercard span.segment_summary .circle_icon i {
    position: relative;
    text-align: center;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background-color: #f3fafe;
    display: inline-block;
    left: 2px;
    top: 2px;
}
.sp_hovercard span.segment_summary .circle_icon b {
    background: url(/segmentpro_static/segmentpro/img/sprite_basic.png) no-repeat 0 0 transparent;
    background-position: -32px -22px;
    width: 18px;
    height: 18px;
    display: inline-block;
    position: relative;
    left: 2px;
    top: 4px;
    zoom: 0.7;
}
.sp_hovercard span.segment_summary .circle_icon b.b1 {
    background-position: -32px -21px;
}
.sp_hovercard span.segment_summary .circle_icon b.b2 {
    background-position: -87px -20px;
    left: 3px;
}
.sp_hovercard span.segment_summary .circle_icon b.b3 {
    background-position: -32px -56px;
}

.sp_hovercard span.segment_summary span.value {
    color: RGB(74,150,138);
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
    margin-left: -5px;
    width: 79px;
    top: 4px;
    position: relative;
}
.sp_hovercard hr {
    margin-top: 8px;
    border-top: 1px solid RGB(218,237,235);
    height: 0;
}

.sp_hovercard ul.toolbar {
    margin: 0;
    padding: 10px 0;
}

.sp_hovercard ul.toolbar li {
    list-style: none;
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
    line-height: 32px;
    text-align: center;
}

.sp_hovercard ul.toolbar li a{
    font-size: 11px;
    color: #7575a3;
    display: inline-block;
    width: 100%;
}
.sp_hovercard ul.toolbar li a:hover{
    font-weight: normal;
    text-decoration: underline;
}

.sp_hovercard ul.toolbar span.tool_icon {
    background: url(/segmentpro_static/segmentpro/img/sprite.png) no-repeat 0 0 transparent;
    display: inline-block;
    width: 18px;
    height: 18px;
    position: relative;
    top: 6px;
}

.sp_hovercard ul.toolbar li a.disable {
    color: #cfcfcf !important;
    cursor: default;
    text-decoration: none !important;
}

.sp_hovercard ul.toolbar li a:hover{
    background: #d5d6d8;
}
.sp_hovercard ul.toolbar li a.disable:hover {
    background: #eee;
}

.sp_hovercard ul.toolbar a.view span.tool_icon {
    background-position: -341px -250px;
}
.sp_hovercard ul.toolbar a.view:hover span.tool_icon {
    background-position: -385px -250px;
}
/*
.sp_hovercard ul.toolbar a.view.disable span.tool_icon {
    background-position: -449px -257px;
}
*/
.sp_hovercard ul.toolbar a.edit span.tool_icon {
    background-position: -341px -285px;
}
.sp_hovercard ul.toolbar a.edit.disable span.tool_icon {
    background-position: -447px -289px !important;
}
.sp_hovercard ul.toolbar a.edit:hover span.tool_icon {
    background-position: -385px -285px;
}

.sp_hovercard ul.toolbar a.share span.tool_icon {
    background-position: -341px -389px;
}
.sp_hovercard ul.toolbar a.share.disable span.tool_icon {
    background-position: -445px -324px !important;
}
.sp_hovercard ul.toolbar a.share:hover span.tool_icon {
    background-position: -385px -389px;
}

.sp_hovercard ul.toolbar a.copy span.tool_icon {
    background-position: -341px -320px;
}
.sp_hovercard ul.toolbar a.copy.disable span.tool_icon {
    background-position: -446px -360px !important;
}
.sp_hovercard ul.toolbar a.copy:hover span.tool_icon {
    background-position: -385px -320px;
}
.sp_hovercard ul.toolbar a.move span.tool_icon {
    background-position: -341px -355px;
}
.sp_hovercard ul.toolbar a.move.disable span.tool_icon {
    background-position: -444px -395px !important;
}
.sp_hovercard ul.toolbar a.move:hover span.tool_icon {
    background-position: -386px -355px;
}
.sp_hovercard ul.toolbar a.delete span.tool_icon {
    background-position: -341px -424px;
}
.sp_hovercard ul.toolbar a.delete.disable span.tool_icon {
    background-position: -445px -430px !important;
}
.sp_hovercard ul.toolbar a.delete.hover span.tool_icon {
    background-position: -385px -424px;
}

.sp_hovercard span.tool_tip {
    display: none;
    position: absolute;
    left: 43px;
    background: #000;
    color: #fff;
    width: 100px;
    z-index: 4;
    opacity: 0.8;
    text-align: left;
    padding-left: 7px;
}

.sp_hovercard ul.toolbar li a:hover span.tool_tip {
    display: inline-block;
}

svg.progress-ring {
    width: 24px;
    height: 24px;
    position: relative;
    top: 12px;
}
circle.progress-ring__circle {
    transition: 0.35s stroke-dashoffset;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-dasharray: 50 50;
    stroke-dashoffset: 27;
}

span.segment_summary b.ico {
    background-position: -32px -21px;
    width: 18px;
    height: 18px;
    display: inline-block;
    position: relative;
    left: -24px;
    top: 9px;
    zoom: 0.75;
    background: url(/segmentpro_static/segmentpro/img/sprite_basic.png) no-repeat 0 0 transparent;
}
span.segment_summary b.ico_1 {
    background-position: -32px -21px;
}
span.segment_summary b.ico_2 {
    background-position: -87px -20px;
    left: -22px;
}
span.segment_summary b.ico_3 {
    background-position: -32px -56px;
}

p.spin_icon {
    display: none;
    text-align: left;
    background: url(/segmentpro_static/segmentpro/img/spin.gif) no-repeat 0 center;
    margin: 0;
    min-width: 200px;
    height: 50px;
    position: fixed;
    left: 50%;
    top: calc(50% - 25px);
/*
    position: absolute;
    left: 200px;
    height: 50px;
    top: 50px;
    margin: 10% 37% !important;
*/
}
span.custom_message {
    position: absolute;
    line-height: 22px;
    max-width: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    font-size: 13px;
    top: 13px;
    left: 45px;
}

/* compare card */
.sp_comparecard .tipsy-inner {
    width: 310px;
    height: 144px;
    box-shadow: -1px 2px 4px 0px #aaa;
    -webkit-box-shadow: -1px 2px 4px 0px #aaa;
    padding: 14px 18px;
    border-color: RGB(178,191,197);
    background: RGB(238,248,249);
}

.sp_comparecard p.p1 span {
    font-size: 13px;
    display: inline-block;
    width: calc(100% - 160px);
    text-align: left;
    position: absolute;
    margin-left: 20px;
    color: #333;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

table.compare_table {
    table-layout: fixed;
    width: auto;
}

table.compare_table td:nth-child(1) {
    width: 70px;
    line-height: 21px;
    vertical-align: middle;
    padding-left: 0;
    padding-top: 0;
    border: none;
}
table.compare_table td:nth-child(n+2) {
    padding-left: 15px;
    border: none;
    max-width: 28px;
}

.compare_table .sp_1, .compare_table .sp_2, .compare_table .sp_3, .compare_table .sp_4, .compare_table .sp_5, .compare_table .sp_6 {
    height: 22px;
    top: 0;
}

.sp_comparecard p.p2 {
    padding-top: 9px;
    font-style: italic;
    letter-spacing: 0.6px;
}

.sp_comparecard p.p2 span {
    margin-left: 10px;
    font-weight: bold;
    color: #333;
}

/* view as */
span.view_as_wrap{
    display: none;
    position: absolute;
}

a.view_as {
    margin-left: 15px;
    color: #616791;
}
a.view_as:hover {
    font-weight: normal;
}
a.view_as.active {
    color: #616161;
    border-bottom: 5px solid #fdde85;
    padding: 1px 0;
    font-weight: 600;
}