@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --yellow: #f9bf2e;
  --darkyellow: #e0ab29;
  --purple: #645c9d;
  --lightpurple: #E0DEEB;
  --darkpurple: #46406D;
  --green:  #079F5E;
  --darkgreen:  #056e41;
  --pink: #FF3366;
  --bluelink: #017698;      
  --greyshadea: #f6f6f6;
  --greyshadeb: #e9e9e9;
  --greyshadec: #cccccc;
  --greyshaded: #9c9c9c;
  --greyshadee: #3c3c3c;
  --black:  #000000;
  --wv-text: #101828;
  --wv-muted: #667085;
  --wv-subtle: #98a2b3;
  --wv-border: #e4e7ec;
  --wv-border-strong: #d0d5dd;
  --wv-surface: #ffffff;
  --wv-hover: #f2f4f7;
  --wv-rail: #ffffff;
  --wv-brand: #154734;
  --wv-avatar: #101010;
  --wv-fox-yellow: #f9bf2e;
  --wv-fox-yellow-pastel: #f5c84f;
  --wv-fox-yellow-soft: #fff5d1;
  --wv-purple-pastel: #8076b5;
  --wv-purple-pastel-hover: #7167a8;
  --wv-purple-soft: #f1eff8;
  --wv-green-pastel: #5dad7b;
  --wv-green-pastel-hover: #529c70;
  --wv-green-soft: #eaf7ef;
  --wv-focus: rgba(21, 71, 52, 0.16);
}

*{
  /*box-sizing: border-box;*/
  padding: 0;
  margin: 0;
  box-sizing: border-box;
} 

html, body {
        height: 100%;
        margin: 0px;
  
        font-family: Arial;
        font-size: 15px;
        color: var(--black);  
    }

#debuginfo{
  margin: 16px 12px 24px 12px;
  font-size: 0.85rem;
  color: var(--greyshadee);
}

#debuginfo strong{
  font-weight: 600;
}

.menu-toggle{
  display: none;
}

#debuginfo{
  margin: 16px 12px 24px 12px;
  font-size: 0.85rem;
  color: var(--greyshadee);
}

#debuginfo strong{
  font-weight: 600;
}

.textarea{
  font-family: normal;
  
}
  
.container{
  min-height: 100%;
  display: grid;
  grid-template-columns: 140px auto;      
  grid-template-rows: 50px auto;
  grid-template-areas: 
    "header header"
    "sidebar main"
   ;        

}





.header{
  display: grid;    
  grid-column: header ;         

  grid-template-columns: 200px 1fr 1fr 1fr;      
  grid-template-rows: 30px 30px 30px;
  width: 100%;        

}

.menu-panel {
  
  display: grid;    
  grid-column: sidebar ;       
  
  height: 100%;
  width: 100%;
    
}

.page{
  display: grid;  
  grid-column: main;
  
  width: 99%;
}

.row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
}



.col {
  padding: 10px;
  width: 100%;
  
}

.col.spanfull{
 grid-column: span 2;  
}

/* Scrollbar */    
::-webkit-scrollbar {
  /*width: 15px; */
}

::-webkit-scrollbar-track {
  background: var(--greyshadec);
}

::-webkit-scrollbar-thumb {
  background: var(--greyshadee);
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/*******************************/

/*******************************/
.center {
  margin: 0px auto;
 
}


.home a{
  color: var(--greyshadee);
  text-decoration: none ;
  font-style: italic;
  
}

.home a:hover{
  color: var(--greyshadee);
  cursor: pointer;
  text-decoration: none;
  font-style: italic;
}

.home a:visited{
  color: var(--greyshadee);
  text-decoration: none;
  font-style: italic;
}


.home .header{
  
}

.home .chart_container{
  width: 28vw;
  height: 15vw;
}

.home_row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  color: var(--greyshadee);
}

.home .home_cell{
  display: inline-block;
}

.home .sub_header_row{
  background-color: var(--greyshadec);;
  height: 30px;
  padding: 5px;
  margin-top:5px;
  margin-bottom: 5px;
  font-weight: bold;
  color: var(--greyshadee);;
}

.home .welcome_header{
  font-size: 1.2rem;
  font-style: italic;
  margin: 5px 5px 5px 0px;
  color: var(--greyshadee);;
}
.home .chart_container{
  padding: 5px;
}
  
.home .chart_canvas{
  border: 1px solid var(--greyshadeb);;
  padding: 5px;
}  

.home_chart_note{
  display: none;
  font-size: 0.8rem;
  color: var(--greyshadee);
  margin-top: 6px;
}
  
.dashboard_container .chart_container{
  width: 100vw;
  height: 80vw;    
}


/* Default Elements */    
/*******************************/

.box, .input_text,.input_password, .input_textarea, div.dataTables_filter input{
    border: 1px solid var(--greyshadec);
    border-radius: 6px;
    box-sizing: border-box;
    padding-left: 9px;

}

.box, .input_text,.input_password, div.dataTables_filter input, div.dataTables_wrapper select{
  height: 34px;
}

.box, div.dataTables_filter input, div.dataTables_wrapper select {
      background-color: white;
      }

.select_box,
.selectbox_search{
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: white;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--greyshadee) 50%),
    linear-gradient(135deg, var(--greyshadee) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  border-color: var(--greyshadeb);
  color: var(--greyshadee);
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  min-width: 180px;
  padding: 0 34px 0 11px;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.select_box:hover,
.selectbox_search:hover{
  border-color: var(--greyshaded);
  background-color: var(--greyshadea);
}

.select_box:focus,
.select_box:focus-visible,
.selectbox_search:focus,
.selectbox_search:focus-visible{
  background-color: white;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(118, 98, 167, .18);
  outline: 0;
}

.select_box:disabled,
.selectbox_search:disabled{
  background-color: var(--greyshadea);
  color: var(--greyshaded);
  cursor: not-allowed;
  opacity: .75;
}

.select_box[multiple],
.select_box[size]:not([size="1"]),
.selectbox_search[multiple],
.selectbox_search[size]:not([size="1"]){
  background-image: none;
  height: auto;
  min-height: 92px;
  padding: 8px 10px;
}

div.dataTables_wrapper select{
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--greyshadee) 50%),
    linear-gradient(135deg, var(--greyshadee) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  border-color: var(--greyshadeb);
  color: var(--greyshadee);
  padding: 0 30px 0 9px;
}

.input_checkbox{
  cursor:pointer;
}

.standard_form .input_text, .standard_form .text_label {
    display:block;      
}

.standard_form input, div.dataTables_filter input, div.dataTables_wrapper select{
  margin: 2px 5px 2px 2px;
}

.standard_form .checkbox_container {
}


.standard_form .input_container{
  position: relative;
  float: left;
 
}

.standard_form .text_label{
  position: relative;
  display: block;
}

.standard_form .small {
  display: inline;
  font-size: .7rem;
}

.home .small {  
  font-size: .8rem;
}




.query_builder .keyword_input {
  width: 50vw;
  height: 40px;
}

/*******************************/
/*Labels
/*******************************/

.input_checkbox{
  margin-right: 5px;
}

/*******************************/



/*******************************/

/*******************************/
/*Datatables plugin
/*******************************/

.dataTables_length{
  display: none;
}

.dataTables_wrapper .dataTables_filter {
    float: right;
    text-align: right;
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: right;
    padding-top: 0.25em;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: #333;
}

.dataTables_wrapper .dataTables_info {
    clear: both;
    float: left;
    padding-top: 0.755em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    *cursor: hand;
    color: #333 !important;
    border: 1px solid transparent;
    border-radius: 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #333 !important;
    border: 1px solid #979797;
    background-color: white;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #dcdcdc));
    background: -webkit-linear-gradient(top, white 0%, #dcdcdc 100%);
    background: -moz-linear-gradient(top, white 0%, #dcdcdc 100%);
    background: -ms-linear-gradient(top, white 0%, #dcdcdc 100%);
    background: -o-linear-gradient(top, white 0%, #dcdcdc 100%);
    background: linear-gradient(to bottom, white 0%, #dcdcdc 100%);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: #666 !important;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #333 !important;
    border: 1px solid #979797;
    background-color: white;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #dcdcdc));
    background: -webkit-linear-gradient(top, white 0%, #dcdcdc 100%);
    background: -moz-linear-gradient(top, white 0%, #dcdcdc 100%);
    background: -ms-linear-gradient(top, white 0%, #dcdcdc 100%);
    background: -o-linear-gradient(top, white 0%, #dcdcdc 100%);
    background: linear-gradient(to bottom, white 0%, #dcdcdc 100%);
}

table.dataTable thead .sorting_desc {
    background-image: url(/DataTables-1.10.24/images/sort_desc.png) !important;
}
table.dataTable thead .sorting {
    background-image: url(/DataTables-1.10.24/images/sort_both.png);
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    *cursor: hand;
    background-repeat: no-repeat;
    background-position: center right;
}


/*******************************/

.items_select{
  width: 400px;
}




/* Header */
/*******************************/
.header{
  background-color:  #ffff;
  border-bottom: 1px solid var(--greyshadec);
}



.worldview_logo{
	grid-area: 1/1;
  
	margin-top: 10px;
  margin-left: 10px;
	height: 30px;
  justify-self: start;
  
}

.select_advertiser{
  grid-area: 1/2;
  padding-top: 5px;
  justify-self: start;
}

.select_advertiser table,
.select_advertiser tbody,
.select_advertiser tr,
.select_advertiser td{
  border: 0;
  margin: 0;
  padding: 0;
}

.select_advertiser .selectbox_search{
  height: 34px;
  min-width: 340px;
  width: 340px;
}

.select_advertiser .select2-container--default .select2-selection--single{
  background-color: white;
  border: 1px solid var(--greyshadeb);
  border-radius: 6px;
  height: 34px;
}

.select_advertiser .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: var(--greyshadee);
  line-height: 32px;
  padding-left: 11px;
  padding-right: 34px;
}

.select_advertiser .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 32px;
  right: 7px;
}

.select_advertiser .select2-container--default.select2-container--focus .select2-selection--single,
.select_advertiser .select2-container--default.select2-container--open .select2-selection--single{
  background-color: white;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(118, 98, 167, .18);
}


.foxcather_icon{
  grid-area: 1/4;
  justify-self: end;
  padding-right: 10px;  
  padding-top: 5px;  
  height: 30px;
  top: 5px;

}


/* User Profile  */
.user-profile{
  grid-area: 2/4;
  justify-self: end;
  position: relative;
  margin-top: -12px;
  margin-right: 17px;
  padding-top: 0px;
  height: 30px;  
  
  vertical-align: middle;
  color: var(--greyshadee);
  cursor: pointer; 
  
}

.item{
 position: relative;
 display: inline-block;
 float: left;

}

.circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--purple);
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

.circle-inner {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  font-size: 14px;
  letter-spacing: -1px;
}

.name{
 padding-left: 5px;
 padding-right: 5px;
 top: 5px;
 
}

.arrow-down {
  padding-right: 0px;
  
  width: 0; 
  height: 0; 
  
	border-style: solid;
  
	border-width: 0.3em 0.3em 0 0;
	content: '';
	display: inline-block;
	height: 0.9em;
	left: 0.30em;
	position: relative;
	top: 0.20em;
	transform: rotate(-45deg);
	vertical-align: top;
	width: 0.90em;
  top: 15;
	transform: rotate(135deg);
}
 


.advertiser_select{
  width: 300px;
}

.keyword_select{
  width: 280px;
}


/* Spinner */
/*******************************/
.spinner {
  width: 10px;
  height: 10px;
  display: block;
  margin:15px auto;
  position: relative;
  color: #FFF;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  display: none;
}
.spinner::after,
.spinner::before {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  transform: scale(0.5) translate(0, 0);
  background-color: var(--green);
  border-radius: 50%;
  animation: animloader 1s infinite ease-in-out;
}
.spinner::before {
  background-color: var(--yellow);
  transform: scale(0.5) translate(-15px, -15px);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes animloader {
    50% {
      transform: scale(1) translate(-50%, -50%);
}
}
    

/* User Menu */
/*******************************/

#profile_options{
  display: none;
  min-height: 0;
  height: auto;
  max-height: calc(100vh - 82px);

  background-color: white;
  
}



.profile_options{

  grid-area: 3/4;
  justify-self: end;
  
  margin-top: -8px;
  margin-right: 7px;

  z-index: 10;
 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
}

.profile_options .menu ul{
  padding-top: 8px;
}



.arrow_top_outer:after {
  content: " ";
  position: absolute;
  right: 10px;
  top: -15px;
  border-top: none;
  border-right: 13px solid transparent;
  border-left: 13px solid transparent;
  border-bottom: 15px solid white;
  
}




/* Menu */
/*******************************/
.menu-panel {
  padding-top: 8px;
  grid-area: sidebar;    
  overflow-y: scroll; 
  overflow-x: hidden ; 
  background-color: var(--greyshadea);
  color: var(--greyshaded);
  font-weight: thin;
}  


.menu ul{
  padding: 0 8px;
  padding-bottom: 15px;
	list-style: none;
}

.menu ul li{
  padding: 3px;
}

.menu a {
  text-decoration: none;
  color: var(--greyshadee); 
}

.menu .normal_weight{
  color: var(--greyshaded);
  font-weight: thin;
}


.menu a:hover {
  background-color: white;
  color: var(--greyshadee);
  font-weight: normal;
}

/*******************************/


/* Main Menu */
/*******************************/

#menu_main ul li{
  padding: 5px;
}

/*******************************/












/* Page */
/*******************************/
.page{
  padding: 10px;
  background-color: #ffff;
}


/* Breadcrums */
.breadcrumbtrail{
  height: 15px;
  color: var(--greyshadee);
  
  
}

.breadcrumbtrail a{
  color: var(--bluelink);;  
  text-decoration: none;

}

/*******************************/







/* Date Range Picker */
/*******************************/

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  min-width: 25px;
}

.date_range_picker{
  width: 300px;
  height: 34px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
  border: 1px solid var(--greyshadec);
  border-radius: 7px;
  background-color: #fff;
  color: var(--darkblue);
  font-size: 0.9rem;
  line-height: 34px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.date_range_picker:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(105, 91, 166, 0.14);
  outline: 0;
}
/*******************************/











/* Page Header */
/*******************************/

.page_header{
  display: block;
}

.page_header .col{
  display: inline-block;
  vertical-align: middle;
}

.page_header .title_row .left{
  text-align: left; 
  font-size: 1.4rem;
  padding: 10px 0px 10px 0px;
}

.page_header .right{
  text-align: right; 
}

.page_header .filter_row {  
  height: 40px;    
  line-height: 40px;
  
}

.page_header .filter_item {    
  float:left;
  line-height: 40px;
  vertical-align: middle;
  padding-right: 20px;
}


/*******************************/


/* Audiences*/
/*******************************/
.audiences .standard_data_table{
  margin-bottom: 30px;
  
}


/*******************************/





/* Dashboard */
/*******************************/
.dashboard{
  clear:both;
}

.dashboard .col{
  text-align: left;
}

.dashboard-analytics .col{
  overflow: hidden;
}

.dashboard-analytics .chart_container,
.dashboard-analytics .chart_canvas,
.dashboard-analytics canvas{
  width: 100% !important;
  max-width: 100% !important;
}


.dashboard .standard_data_table a{
  color: inherit; 
  text-decoration: inherit; 
}

/* Flashing Table eg. when billings updated */
@-webkit-keyframes flash {
  from { background-color: var(--pink) ; }
  to { background-color: inherit; }
}
@-moz-keyframes flash {
  from { background-color: var(--pink) ;  }
  to { background-color: inherit; }
}
@-o-keyframes flash {
  from { background-color:var(--pink) ;  }
  to { background-color: inherit; }
}
@keyframes flash {
  from { background-color: var(--pink) ;  }
  to { background-color: inherit; }
}
.row_flash {
  -webkit-animation: flash 1s 5; /* Safari 4+ */
  -moz-animation:    flash 1s 5; /* Fx 5+ */
  -o-animation:      flash 1s 5; /* Opera 12+ */
  animation:         flash 1s 5; /* IE 10+ */
}



/* Flashing Table eg. when billings updated */
@-webkit-keyframes flash_green {
  from { background-color: var(--green) ; }
  to { background-color: inherit; }
}
@-moz-keyframes flash_green {
  from { background-color: var(--green) ;  }
  to { background-color: inherit; }
}
@-o-keyframes flash_green {
  from { background-color:var(--green) ;  }
  to { background-color: inherit; }
}
@keyframes flash_green {
  from { background-color: var(--green) ;  }
  to { background-color: inherit; }
}
.row_flash_green {
  -webkit-animation: flash_green 1s 5; /* Safari 4+ */
  -moz-animation:    flash_green 1s 5; /* Fx 5+ */
  -o-animation:      flash_green 1s 5; /* Opera 12+ */
  animation:         flash_green 1s 5; /* IE 10+ */
}




/* Dashboard Features */
/*******************************/ 

.page_filter_container{
  
  display: block;
  
}

.overflow{
  overflow-y: scroll;  
  max-height: 380px;
  
}
/*******************************/



/* Dashboard Card */
.dashboard_card{
  float:left; 
  width: 150px;
}

.card_title{
  font-size: 1.1rem;
}

.card_metric{
  font-size: 1.8rem;
}

.dashboard_card_indicator .card_metric{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
}

.dashboard_card_indicator .arrow_up,
.dashboard_card_indicator .arrow_down {
  display: block;
  margin: 0 auto;
}

.dashboard_metric_stack .title_row .col,
.dashboard_metric_stack .indicator_row .col{
  display: block;
  width: 100%;
}

.dashboard_metric_stack .dashboard_card{
  float: none;
  width: auto;
  max-width: 100%;
}

.dashboard_metric_stack .dashboard_card_indicator{
  margin-top: 6px;
}




.cell_title, .home .welcome_header{
 /*float: left;*/
 
 height: 10px;
 font-size: 1.1rem;
 margin:  0px 0px 20px 0px;
}

.download_link{
  display: none;
  /*
  float: right;*/
  width: 50px;
   
}

.warning{
  color: red;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  position: relative;
}

.warning-text{
  visibility: hidden;
  position: absolute;
  background-color: black;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: lighter;
  padding: 5px;
  border: 1px solid #ffffff;
  border-radius: 8px;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.campaign-name{
  cursor: pointer;
  position: relative;
}

.warning:hover .warning-text,
.campaign-name:hover .warning-text{
  visibility: visible;
}

/*******************************/





/*******************************/
/******Home Page   *************/
/*******************************/
.home_cell .dashboard_card{
  width: 100%;
  height: 100%;
  padding: 10% 0;
  text-align: center;
}

.home_cell .card_metric {
  font-size: 3.1rem;
}

.home_cell .card_title {
  font-size: 1.8rem;
}


.home .title_row .right{
  text-align: right;
}

/*******************************/
.button{
    background: var(--green);
    color:#FFFFFF ;
  	-moz-border-radius: 6px;
  	-webkit-border-radius: 6px;
  	border: 0px ;
    display:inline-block;
    
    -webkit-font-smoothing: antialiased;
    margin: 5px 2px 5px 2px;
    padding: 2px 10px 2px 10px;  
    height: 30px;
    min-width: 80px;         
}

.button:hover {	
    background: var(--darkgreen);
}

.login_button{
    width: 10;    
}

.purple{
    background: var(--purple);
}
.purple:hover {	
    background: var(--darkpurple);
}


.yellow{
    background: var(--yellow);
}
.yellow:hover {	
    background: var(--darkyellow);
}




/* Sign in Page */
/*******************************/

.sign-in-container{ 
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 20% auto;
  grid-template-areas: 
    "header"
    "main"
   ;
  
  height: 100vh;
}

.sign-in{
  /*background-color: #f9bf2e;*/
  background-color: #ffff;
}



.signinbox{
  text-align: center;
  background-color: #F4F6F5;
  min-width: 450px;
  min-height: 0;
  padding: 12px 20px 6px 20px;
  grid-area: main;
  justify-self: center;
  align-self: start;
  grid-column: 1,2,3;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  
}


.login-logo{
  text-align: centre;
  height: 38px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.login-sub-title{
  margin-top: 8px;
  margin-bottom: 9px;
  font-size: 16px;
  font-weight: 400;
  color: #1f1f1f;
}

.google-sso-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 320px;
  max-width: 100%;
  margin: 6px auto 10px auto;
  padding: 0 14px;
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  box-sizing: border-box;
  gap: 10px;
}

.google-sso-button:hover{
  border-color: #c7c7c7;
  background: #f7f7f7;
}

.google-logo{
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 533.5 544.3'><path fill='%234285f4' d='M533.5 278.4c0-17.4-1.6-34.1-4.6-50.4H272v95.5h146.9c-6.3 34-25 62.8-53.4 82.1v68h86.3c50.5-46.5 81.7-115.1 81.7-195.2z'/><path fill='%2334a853' d='M272 544.3c72.7 0 133.7-24.1 178.3-65.7l-86.3-68c-24 16.1-54.7 25.6-92 25.6-70.7 0-130.6-47.7-152.1-111.7h-89.7v70.2C75.7 475.1 166.1 544.3 272 544.3z'/><path fill='%23fbbc04' d='M119.9 324.5c-10.7-32.1-10.7-66.9 0-99l0-70.2h-89.7c-39.1 78.1-39.1 171.4 0 249.5l89.7-70.2z'/><path fill='%23ea4335' d='M272 107.7c39.6-.6 77.8 14 106.9 40.9l79.7-79.7C410.8 24.2 342 0 272 0 166.1 0 75.7 69.2 30.2 173.6l89.7 70.2C141.4 155.4 201.3 107.7 272 107.7z'/></svg>");
}

.signin-separator{
  position: relative;
  width: 320px;
  max-width: 100%;
  margin: 15px auto 0 auto;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #6f6f6f;
}

.signin-separator:before,
.signin-separator:after{
  content: '';
  position: absolute;
  top: 50%;
  width: 44%;
  height: 1px;
  background: #d6d6d6;
}

.signin-separator:before{
  left: 0;
}

.signin-separator:after{
  right: 0;
}

.signin-separator span{
  display: inline-block;
  padding: 0 8px;
  background: #F4F6F5;
  position: relative;
  z-index: 1;
}

.button.login-button{
  margin-bottom: 0;
}

#signinform .signin_row.signin_row--first{
  margin-top: -13px;
}

#signinform .signin_row.signin_row--last{
  margin-bottom: 0;
}

#signinform .signin_row.signin_row--separator{
  margin-bottom: -13px;
}


.colour-block{
   
   width: 32%;
   height: 15px;
   display: inline-block; 
   margin: 3px 1px 1px 1px;

   padding: 0px;
   border: 0px;
   
   }


#colour-block-1{
  position: relative;
  background-color: var(--purple);
  
}


#colour-block-2{
  position: relative;
  background-color: var(--yellow);
  
  
}

#colour-block-3{
  position: relative;
  background-color: var(--green);
  
}

.date_range_picker_container{
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1;
} 

.date_range_picker_container input{
  padding-left: 38px;
  padding-right: 12px;
  text-indent: 0;
  z-index: 1;
  
}

.date_range_picker_container .cal{
  position: absolute;
  left: 11px;
  z-index: 10;
  top: 50%;
  height: 18px;
  width: 18px;
  background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Crect%20x%3D%273.5%27%20y%3D%275.5%27%20width%3D%2717%27%20height%3D%2715%27%20rx%3D%272%27%20stroke%3D%27%23344054%27%20stroke-width%3D%271.8%27/%3E%3Cpath%20d%3D%27M7%203.5v4M17%203.5v4M4%209h16%27%20stroke%3D%27%23344054%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27/%3E%3Cpath%20d%3D%27M7.4%2012.3h2.1M11%2012.3h2.1M14.6%2012.3h2.1M7.4%2015.5h2.1M11%2015.5h2.1M14.6%2015.5h2.1%27%20stroke%3D%27%23344054%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E") center/18px 18px no-repeat;
  pointer-events: none;
  transform: translateY(-50%);
}



#signinform #username, #signinform #password{
	text-indent: 33px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: block;
  margin: 0 auto;

}	

#signinform .signin_row{
  position: relative;  
  height: 40px;
  width: 320px;
  margin: 6px auto;
  text-align: center;
}

#signinform .username_icon, #signinform .password_icon{
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
	background-position:5px 5px;  
  height: 33px;
  width: 33px;  
  pointer-events: none;
  
}

#signinform .username_icon{
	background-image: url('/media/images/app/email.png');
  left: 5px;
  
  height: 33px;
  width: 33px;   
}

#signinform .password_icon{
  background-image: url('/media/images/app/password.png');
  left: 9px;
  height: 33px;
  width: 33px;   
}




/*******************************/

@media (max-width: 900px) {
  #debuginfo{
    display: none;
  }
  .sign-in-container{
    grid-template-rows: auto 1fr;
    padding: 16px;
    height: auto;
    min-height: 100vh;
    align-content: start;
  }

  .signinbox{
    min-width: 0;
    width: 100%;
    max-width: 420px;
    height: auto;
    padding: 16px 12px 18px 12px;
    box-sizing: border-box;
  }

  #signinform .signin_row{
    width: 100%;
    max-width: 320px;
  }

  #signinform #username,
  #signinform #password{
    width: 100%;
    box-sizing: border-box;
  }

  .google-sso-button{
    width: 100%;
  }

  .signin-separator{
    width: 100%;
  }
}









/* Data Table */
/*******************************/ 
.standard_data_table {
    border-collapse: collapse;
    width: 100%;
    font-size: .8rem;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  
}

.standard_data_table thead th {
    background-color: #ffffff !IMPORTANT;
    font-weight: bold !IMPORTANT;        
    font-size: .9rem;
}

.standard_data_table thead tr {
    background-color: #009879;
    color: normal;
    text-align: left;
}

.standard_data_table th,
.standard_data_table td {
    padding: 13px 3px;
}

.standard_data_table tbody tr {
    border-bottom: 1px solid var(--greyshadec);
}

.standard_data_table tbody tr:nth-of-type(odd) {
    background-color: var(--greyshadea);
}


.standard_data_table tbody tr:first-of-type {
  border-top: 2px solid var(--green);
}


.standard_data_table tbody tr:last-of-type {
    border-bottom: 2px solid var(--purple);
}

.standard_data_table tbody tr.active-row {
    font-weight: bold;
    color: var(--green);;
}

.trim_text,
.trim_text a {
  white-space: nowrap;
}


.standard_data_table .trim_text{
  display: inline-block;
  width: 22vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/*******************************/ 
.standard_data_table .activate_icons{
  width: 110px;
}

.standard_data_table .activate_icons div{
  float: left;
  width: 20px;
  height: 15px;
  margin-right: 5px;
}



/*******************************/ 
/*Other Tables */
.dashboard_table{
  min-width: 300px;
}

/* Atlas Planner */
.atlas-planner-header .title_row .left{
  color: var(--greyshadee);
}

.atlas-planner-header .filter_row{
  clear: both;
  display: block;
  height: auto;
  line-height: normal;
  margin-bottom: 2px;
  overflow: visible;
}

.atlas-planner-header .filter_item{
  display: block;
  float: none;
  line-height: normal;
  padding-bottom: 0;
  padding-right: 0;
  width: 100%;
}

.atlas-planner-plan-actions{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  line-height: normal;
  margin-bottom: 0;
}

.atlas-planner-plan-select{
  flex: 0 1 auto;
}

.atlas-planner-create-link{
  align-items: center;
  color: var(--purple);
  display: inline-flex;
  font-weight: bold;
  min-height: 34px;
  text-decoration: none;
}

.atlas-planner-create-link:hover{
  color: var(--darkpurple);
  text-decoration: underline;
}

.atlas-planner-dashboard{
  margin-top: 14px;
}

.atlas-planner-tabs{
  clear: both;
  margin-top: 4px;
}

.atlas-planner-tab-nav{
  align-items: center;
  background: white;
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 8px 16px 0;
  padding: 8px;
}

.atlas-planner-tab-nav button{
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--greyshadee);
  cursor: pointer;
  font: inherit;
  font-weight: bold;
  line-height: 1.2;
  padding: 10px 14px;
}

.atlas-planner-tab-nav button:hover{
  background: var(--greyshadea);
}

.atlas-planner-tab-nav button:disabled,
.atlas-planner-tab-nav button.disabled{
  color: var(--greyshadec);
  cursor: not-allowed;
  opacity: .65;
}

.atlas-planner-tab-nav button:disabled:hover,
.atlas-planner-tab-nav button.disabled:hover{
  background: transparent;
}

.atlas-planner-tab-nav button.active{
  background: var(--lightpurple);
  color: var(--darkpurple);
}

.atlas-planner-tab-nav .atlas-planner-edit-toggle{
  border: 1px solid var(--greyshadeb);
  margin-left: auto;
}

.atlas-planner-tab-nav .atlas-planner-edit-toggle.active{
  background: var(--purple);
  color: white;
}

.atlas-planner-tab-nav .atlas-planner-delete-toggle{
  border: 1px solid var(--pink);
  color: var(--pink);
  display: none;
  margin-left: auto;
}

.atlas-planner-tab-nav .atlas-planner-delete-toggle:hover{
  background: rgba(255, 51, 102, .08);
}

.atlas-planner-editing .atlas-planner-delete-toggle{
  display: inline-flex;
}

.atlas-planner-editing .atlas-planner-edit-toggle{
  margin-left: 0;
}

.atlas-planner-editable[contenteditable="true"]{
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--purple);
  cursor: text;
  outline: 0;
  padding: 2px 4px;
}

.atlas-planner-editable[contenteditable="true"]:focus{
  background: white;
  box-shadow: 0 0 0 2px var(--purple);
}

.atlas-planner-editable.saving{
  opacity: .65;
}

.atlas-planner-editable.dirty{
  box-shadow: 0 0 0 2px var(--yellow);
}

.atlas-planner-editable.saved{
  box-shadow: 0 0 0 2px var(--green);
}

.atlas-planner-editable.save-error{
  box-shadow: 0 0 0 2px var(--pink);
}

.atlas-planner-tab-panel{
  display: none;
}

.atlas-planner-tab-panel.active{
  display: block;
}

.atlas-planner-dashboard-tab{
  margin-top: 0;
}

.atlas-planner-hero-number{
  color: var(--black);
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1;
  margin: 8px 0 10px;
}

.atlas-planner-brand-reach-title{
  border-top: 1px solid var(--greyshadeb);
  margin-top: 18px;
  padding-top: 14px;
}

.atlas-planner-empty{
  align-items: center;
  background: white;
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  display: flex;
  gap: 16px;
  margin: 18px 8px 0 0;
  max-width: 760px;
  padding: 22px;
}

.atlas-planner-empty-icon{
  align-items: center;
  background: var(--lightpurple);
  border: 1px solid var(--purple);
  border-radius: 50%;
  color: var(--darkpurple);
  display: flex;
  flex: 0 0 auto;
  font-weight: bold;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.atlas-planner-empty h2{
  color: var(--black);
  font-size: 1.25rem;
  margin: 0 0 8px;
}

.atlas-planner-empty p{
  color: var(--greyshadee);
  line-height: 1.55;
  margin: 0;
}

.atlas-planner-loader-card{
  align-items: center;
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  display: flex;
  gap: 16px;
  padding: 18px;
}

.atlas-planner-loader-spinner{
  animation: atlasPlannerSpin 1s linear infinite;
  border: 4px solid var(--lightpurple);
  border-top-color: var(--purple);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 38px;
  width: 38px;
}

.atlas-planner-loader-card strong{
  color: var(--black);
  display: block;
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.atlas-planner-loader-card p{
  color: var(--greyshadee);
  line-height: 1.55;
  margin: 0;
}

@keyframes atlasPlannerSpin{
  to{
    transform: rotate(360deg);
  }
}

.atlas-planner-dashboard .row{
  align-items: stretch;
}

.atlas-planner-dashboard .row .col{
  background: white;
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 8px 16px 0;
  padding: 16px;
}

.atlas-planner-dashboard .row .col.spanfull{
  width: calc(100% - 8px);
}

.atlas-planner-dashboard .cell_title{
  color: var(--greyshadee);
  font-weight: bold;
  height: auto;
  margin-bottom: 14px;
}

.atlas-planner-card-body{
  color: var(--greyshadee);
  line-height: 1.55;
}

.atlas-planner-brand-search-compact{
  border-top: 1px solid var(--greyshadeb);
  margin-top: 12px;
  padding-top: 10px;
}

.atlas-planner-brand-search-compact .atlas-planner-muted{
  font-size: .78rem;
  line-height: 1.35;
  margin-top: 4px;
}

.atlas-planner-brand-search-compact .atlas-planner-source-pills{
  margin-top: 6px;
}

.atlas-planner-audience-age-compact{
  border-top: 1px solid var(--greyshadeb);
  margin-top: 12px;
  padding-top: 10px;
}

.atlas-planner-audience-age-compact canvas{
  max-height: 320px;
}

.atlas-planner-audience-age-compact .atlas-planner-muted{
  font-size: .82rem;
  margin-top: 4px;
}

.atlas-planner-summary{
  font-size: 1rem;
  line-height: 1.65;
}

.atlas-planner-list{
  list-style: none;
  margin: 8px 0 14px;
  padding: 0;
}

.atlas-planner-list li{
  color: var(--greyshadee);
  line-height: 1.5;
  margin: 0 0 6px;
  padding-left: 16px;
  position: relative;
}

.atlas-planner-list li::before{
  color: var(--greyshaded);
  content: "•";
  font-weight: bold;
  left: 0;
  position: absolute;
  top: 0;
}

.atlas-planner-list ol,
ol.atlas-planner-list{
  counter-reset: atlas-planner-list;
}

ol.atlas-planner-list li{
  counter-increment: atlas-planner-list;
  padding-left: 22px;
}

ol.atlas-planner-list li::before{
  content: counter(atlas-planner-list) ".";
}

.atlas-planner-muted,
.atlas-planner-reference{
  color: var(--greyshaded);
}

.atlas-planner-reference a{
  color: var(--bluelink);
  text-decoration: none;
}

.atlas-planner-reference a:hover,
.atlas-planner-pills a:hover{
  text-decoration: underline;
}

.atlas-planner-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.atlas-planner-pills span,
.atlas-planner-pills a,
.atlas-planner-age-option,
.atlas-planner-age-active{
  border-radius: 999px;
  display: inline-block;
  font-size: .8rem;
  line-height: 1.2;
  padding: 6px 10px;
}

.atlas-planner-pills span,
.atlas-planner-pills a,
.atlas-planner-age-option{
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  color: var(--greyshadee);
  text-decoration: none;
}

.atlas-planner-age-active{
  background: var(--purple);
  border: 1px solid var(--purple);
  color: white;
  font-weight: bold;
}

.atlas-planner-age-row{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.atlas-planner-small-title{
  color: var(--greyshaded);
  font-size: .78rem;
  font-weight: bold;
  letter-spacing: .04em;
  margin: 12px 0 7px;
  text-transform: uppercase;
}

.atlas-planner-callout{
  background: var(--greyshadea);
  border-left: 3px solid var(--purple);
  border-radius: 6px;
  color: var(--greyshadee);
  line-height: 1.6;
  padding: 14px;
}

.atlas-planner-gender{
  background: var(--greyshadee);
  border-radius: 6px;
  display: flex;
  height: 34px;
  margin: 8px 0 14px 0;
  overflow: hidden;
}

.atlas-planner-gender-female,
.atlas-planner-gender-male{
  align-items: center;
  color: white;
  display: flex;
  font-size: .82rem;
  font-weight: bold;
  justify-content: center;
}

.atlas-planner-gender-female{
  background: var(--green);
}

.atlas-planner-gender-male{
  background: var(--purple);
}

.atlas-planner-reach-number{
  color: var(--black);
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.1;
  margin: 4px 0 8px;
}

.atlas-planner-dashboard .standard_data_table{
  width: 100%;
}

.atlas-planner-table-full{
  max-height: none;
  overflow: visible;
}

.atlas-planner-dashboard .chart_container{
  max-width: 100%;
}

.atlas-planner-dashboard .chart_type_pie{
  margin-bottom: 12px !important;
}

.atlas-planner-segments-summary{
  margin-bottom: 14px;
}

.atlas-planner-segment-stats{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 12px 0 18px;
}

.atlas-planner-segment-stats div{
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  padding: 12px;
}

.atlas-planner-segment-stats strong{
  color: var(--greyshadee);
  display: block;
  font-size: 1.35rem;
  line-height: 1;
}

.atlas-planner-segment-stats span{
  color: var(--greyshaded);
  display: block;
  font-size: .78rem;
  margin-top: 5px;
}

.atlas-planner-segment-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  align-items: start;
}

.atlas-planner-segment-card{
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  border-top: 5px solid var(--purple);
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

.atlas-planner-segment-card:nth-child(even){
  border-top-color: var(--greyshaded);
}

.atlas-planner-segment-toggle{
  align-items: flex-start;
  background: white;
  border: 0;
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: 52px minmax(0, 1fr) 28px;
  padding: 18px;
  text-align: left;
  width: 100%;
}

.atlas-planner-segment-toggle:hover{
  background: var(--greyshadea);
}

.atlas-planner-segment-icon{
  align-items: center;
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  border-radius: 50%;
  color: var(--purple);
  display: flex;
  font-size: .8rem;
  font-weight: bold;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.atlas-planner-segment-heading strong{
  color: var(--black);
  display: block;
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0 0 8px;
}

.atlas-planner-segment-heading em{
  color: var(--greyshadee);
  display: block;
  font-style: normal;
  line-height: 1.5;
  margin: 0;
}

.atlas-planner-segment-summary-pills{
  margin-top: 10px;
}

.atlas-planner-segment-chevron{
  align-items: center;
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  border-radius: 50%;
  color: var(--greyshadee);
  display: flex;
  font-size: 1.1rem;
  font-weight: bold;
  height: 26px;
  justify-content: center;
  line-height: 1;
  width: 26px;
}

.atlas-planner-segment-card.expanded .atlas-planner-segment-chevron{
  background: var(--lightpurple);
  border-color: var(--purple);
  color: var(--darkpurple);
}

.atlas-planner-segment-copy{
  border-top: 1px solid var(--greyshadeb);
  display: none;
  padding: 0 18px 18px 84px;
}

.atlas-planner-segment-card.expanded .atlas-planner-segment-copy{
  display: block;
}

.atlas-planner-segment-panel{
  border-top: 1px solid var(--greyshadeb);
  margin-top: 14px;
  padding-top: 12px;
}

.atlas-planner-segment-panel-title{
  color: var(--greyshadee);
  font-weight: bold;
  text-transform: uppercase;
}

.atlas-planner-segment-panel-title span{
  color: var(--greyshaded);
}

.atlas-planner-demo-pills span{
  font-weight: bold;
}

.atlas-planner-youtube-topline{
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  margin-bottom: 20px;
  width: 100%;
}

.atlas-planner-youtube-summary{
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  box-sizing: border-box;
  padding: 14px;
}

.atlas-planner-youtube-summary .atlas-planner-segments-summary{
  margin-bottom: 0;
}

.atlas-planner-curation-stats{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  min-width: 0;
}

.atlas-planner-curation-stats div{
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  box-sizing: border-box;
  padding: 12px;
}

.atlas-planner-curation-stats .atlas-planner-stat-purple{
  background: var(--greyshadea);
  border-color: var(--greyshadeb);
}

.atlas-planner-curation-stats .atlas-planner-stat-green{
  background: var(--greyshadea);
  border-color: var(--greyshadeb);
}

.atlas-planner-curation-stats .atlas-planner-stat-pink{
  background: var(--greyshadea);
  border-color: var(--greyshadeb);
}

.atlas-planner-curation-stats strong{
  color: var(--greyshadee);
  display: block;
  font-size: 1.25rem;
  line-height: 1;
}

.atlas-planner-curation-stats span{
  color: var(--greyshaded);
  display: block;
  font-size: .78rem;
  margin-top: 5px;
}

.atlas-planner-curation-columns{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 22px;
  width: 100%;
}

.atlas-planner-curation-title{
  color: var(--black);
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0 0 10px;
}

.atlas-planner-youtube-brand{
  align-items: center;
  display: flex;
  gap: 10px;
  margin: 12px 0 0;
}

.atlas-planner-youtube-brand strong{
  color: var(--black);
  font-size: 1.05rem;
}

.atlas-planner-youtube-icon{
  align-items: center;
  background: var(--pink);
  border-radius: 8px;
  display: flex;
  flex: 0 0 auto;
  height: 26px;
  justify-content: center;
  width: 34px;
}

.atlas-planner-youtube-icon span{
  border-bottom: 6px solid transparent;
  border-left: 10px solid white;
  border-top: 6px solid transparent;
  display: block;
  height: 0;
  margin-left: 2px;
  width: 0;
}

.atlas-planner-curation-list{
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 6px;
  width: 100%;
}

.atlas-planner-curation-item{
  align-items: flex-start;
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}

.atlas-planner-curation-column.affinity .atlas-planner-curation-item{
  background: white;
  border-color: var(--greyshadeb);
}

.atlas-planner-curation-column.inmarket .atlas-planner-curation-item{
  background: white;
  border-color: var(--greyshadeb);
}

.atlas-planner-curation-item strong{
  color: var(--black);
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.atlas-planner-curation-item p{
  color: var(--greyshaded);
  line-height: 1.4;
  margin: 0;
}

.atlas-planner-curation-item span{
  background: white;
  border: 1px solid var(--greyshadeb);
  border-radius: 999px;
  color: var(--greyshadee);
  flex: 0 0 auto;
  font-size: .75rem;
  padding: 5px 9px;
}

.atlas-planner-channel-card-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
  width: 100%;
}

.atlas-planner-channel-card{
  background: white;
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  box-sizing: border-box;
  display: grid;
  gap: 12px;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 168px;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
}

.atlas-planner-channel-icon{
  align-items: center;
  background: var(--purple);
  border-radius: 50%;
  color: white;
  display: flex;
  font-size: .72rem;
  font-weight: bold;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.atlas-planner-channel-card .atlas-planner-youtube-icon{
  border-radius: 50%;
  height: 34px;
  margin-top: 2px;
  width: 34px;
}

.atlas-planner-channel-card .atlas-planner-youtube-icon span{
  border-bottom-width: 5px;
  border-left-width: 8px;
  border-top-width: 5px;
}

.atlas-planner-channel-copy{
  min-width: 0;
  overflow: hidden;
}

.atlas-planner-channel-thumb{
  border: 1px solid var(--greyshadeb);
  border-radius: 50%;
  height: 38px;
  object-fit: cover;
  width: 38px;
}

.atlas-planner-channel-copy h4{
  color: var(--black);
  font-size: 1rem;
  line-height: 1.25;
  margin: 0 0 8px;
  min-height: 2.5em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.atlas-planner-channel-copy h4 a{
  color: var(--black);
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.atlas-planner-channel-copy h4 a:hover{
  color: var(--bluelink);
  text-decoration: underline;
}

.atlas-planner-channel-meta{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.atlas-planner-channel-meta span{
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  border-radius: 999px;
  color: var(--greyshadee);
  font-size: .72rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 4px 8px;
}

.atlas-planner-channel-meta em{
  color: var(--greyshaded);
  font-size: .78rem;
  font-style: normal;
  overflow-wrap: anywhere;
}

.atlas-planner-channel-stats{
  color: var(--greyshadec);
  font-size: .75rem;
  margin: -2px 0 8px;
  overflow-wrap: anywhere;
}

.atlas-planner-channel-copy p{
  color: var(--greyshaded);
  font-size: .82rem;
  line-height: 1.45;
  margin: 10px 0 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.atlas-planner-channel-pills{
  margin-top: 0;
}

.atlas-planner-channel-pills span{
  font-size: .7rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 4px 8px;
}

.atlas-planner-channel-pills span:first-child{
  background: var(--greyshadea);
  border-color: var(--greyshadeb);
  color: var(--greyshadee);
}

.atlas-planner-channel-pills span:nth-child(2){
  background: var(--lightpurple);
  border-color: var(--lightpurple);
  color: var(--darkpurple);
}

.atlas-planner-youtube-videos{
  border-top: 1px solid var(--greyshadeb);
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
}

.atlas-planner-youtube-videos a{
  color: var(--greyshadee);
  display: block;
  font-size: .76rem;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.atlas-planner-youtube-videos a:hover span{
  color: var(--bluelink);
  text-decoration: underline;
}

.atlas-planner-youtube-videos span{
  display: block;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.atlas-planner-youtube-videos em{
  color: var(--greyshadec);
  display: block;
  font-size: .7rem;
  font-style: normal;
}

.atlas-planner-programmatic-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 22px;
  width: 100%;
}

.atlas-planner-programmatic-chart,
.atlas-planner-programmatic-actions{
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  box-sizing: border-box;
  min-width: 0;
  padding: 14px;
}

.atlas-planner-programmatic-actions .atlas-planner-callout{
  margin-bottom: 10px;
}

.atlas-planner-programmatic-actions .atlas-planner-pills{
  margin-bottom: 10px;
}

.atlas-planner-programmatic-table{
  margin-bottom: 18px;
}

.atlas-planner-performance-learnings{
  background: var(--white);
  border: 1px solid var(--greyshadeb);
  border-left: 4px solid var(--purple);
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 0 22px;
  padding: 16px;
}

.atlas-planner-performance-learnings .atlas-planner-programmatic-grid{
  margin-bottom: 0;
}

.atlas-planner-audience-loading{
  background: var(--white);
  border: 1px solid var(--greyshadeb);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 0 22px;
  padding: 16px;
}

.atlas-planner-audience-hero{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 18px;
}

.atlas-planner-audience-hero div{
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  box-sizing: border-box;
  min-width: 0;
  padding: 14px;
}

.atlas-planner-audience-hero strong{
  color: var(--greyshadee);
  display: block;
  font-size: 22px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-planner-audience-hero span{
  color: var(--greyshadec);
  display: block;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .04em;
  margin-top: 6px;
  text-transform: uppercase;
}

.atlas-planner-audience-footprint{
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);
  margin: 0 0 18px;
}

.atlas-planner-audience-footprint > div{
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  box-sizing: border-box;
  min-width: 0;
  padding: 14px;
}

.atlas-planner-programmatic-table .standard_data_table{
  margin-bottom: 0;
}

.atlas-planner-meta-note{
  background: #f4f8ff;
  border: 1px solid #cdddf7;
  border-left: 3px solid var(--bluelink);
  border-radius: 8px;
  color: var(--greyshadee);
  line-height: 1.55;
  margin: 12px 0 14px;
  padding: 12px 14px;
}

.atlas-planner-meta-stats{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 12px 0 18px;
}

.atlas-planner-meta-stats div{
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  padding: 12px;
}

.atlas-planner-meta-stats strong{
  color: var(--black);
  display: block;
  font-size: 1.25rem;
  line-height: 1;
}

.atlas-planner-meta-stats span{
  color: var(--greyshaded);
  display: block;
  font-size: .78rem;
  margin-top: 5px;
}

.atlas-planner-meta-personas{
  display: grid;
  gap: 14px;
}

.atlas-planner-meta-persona{
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border: 1px solid var(--greyshadeb);
  border-left: 4px solid var(--bluelink);
  border-radius: 8px;
  padding: 18px;
}

.atlas-planner-meta-persona:nth-child(even){
  border-left-color: var(--purple);
}

.atlas-planner-meta-persona-header{
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.atlas-planner-meta-persona-header > div:first-child{
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.atlas-planner-meta-icon{
  align-items: center;
  background: var(--bluelink);
  border-radius: 50%;
  color: white;
  display: flex;
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: bold;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.atlas-planner-meta-persona:nth-child(even) .atlas-planner-meta-icon{
  background: var(--purple);
}

.atlas-planner-meta-persona h3{
  color: var(--black);
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0;
}

.atlas-planner-meta-persona p{
  color: var(--greyshadee);
  line-height: 1.5;
  margin: 10px 0 12px 40px;
}

.atlas-planner-meta-counts{
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.atlas-planner-meta-counts span{
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  border-radius: 999px;
  color: var(--greyshadee);
  font-size: .72rem;
  padding: 5px 9px;
}

.atlas-planner-meta-table{
  margin-left: 40px;
}

.atlas-planner-meta-table a{
  color: var(--bluelink);
  text-decoration: none;
}

.atlas-planner-meta-table a:hover{
  text-decoration: underline;
}

.atlas-planner-meta-blueprint-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 0 14px 40px;
}

.atlas-planner-meta-blueprint-block{
  background: white;
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  padding: 12px;
}

.atlas-planner-meta-blueprint-block strong,
.atlas-planner-meta-group strong,
.atlas-planner-meta-footer strong,
.atlas-planner-meta-sources strong{
  color: var(--greyshaded);
  display: block;
  font-size: .76rem;
  letter-spacing: .04em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.atlas-planner-meta-blueprint-block span{
  color: var(--greyshadee);
  display: block;
  line-height: 1.45;
}

.atlas-planner-meta-groups{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 14px 40px;
}

.atlas-planner-meta-group{
  background: var(--greyshadea);
  border: 1px solid var(--greyshadeb);
  border-radius: 8px;
  padding: 12px;
}

.atlas-planner-meta-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.atlas-planner-meta-chip{
  background: white;
  border: 1px solid var(--greyshadeb);
  border-radius: 999px;
  color: var(--greyshadee);
  display: inline-flex;
  font-size: .78rem;
  gap: 5px;
  line-height: 1.2;
  padding: 6px 10px;
}

.atlas-planner-meta-chip.verified{
  border-color: var(--green);
  background: #eefaf5;
}

.atlas-planner-meta-chip em{
  color: var(--greyshaded);
  font-style: normal;
}

.atlas-planner-meta-footer{
  border-top: 1px solid var(--greyshadeb);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 0 0 40px;
  padding-top: 12px;
}

.atlas-planner-meta-footer .atlas-planner-pills,
.atlas-planner-meta-sources .atlas-planner-pills{
  margin-top: 0;
}

.atlas-planner-meta-control-pills span{
  background: #fff8e1;
  border-color: var(--yellow);
  color: var(--black);
}

.atlas-planner-meta-role-pills span{
  background: #f4f8ff;
  border-color: #cdddf7;
}

.atlas-planner-meta-sources{
  margin: 12px 0 0 40px;
}

@media screen and (max-width: 900px){
  .atlas-planner-segment-stats,
  .atlas-planner-segment-grid,
  .atlas-planner-curation-stats,
  .atlas-planner-curation-columns,
  .atlas-planner-youtube-topline,
  .atlas-planner-channel-card-grid,
  .atlas-planner-programmatic-grid,
  .atlas-planner-audience-hero,
  .atlas-planner-audience-footprint,
  .atlas-planner-meta-stats,
  .atlas-planner-meta-blueprint-grid,
  .atlas-planner-meta-groups,
  .atlas-planner-meta-footer{
    grid-template-columns: 1fr;
  }

  .atlas-planner-meta-persona-header{
    display: block;
  }

  .atlas-planner-meta-counts,
  .atlas-planner-meta-persona p,
  .atlas-planner-meta-table,
  .atlas-planner-meta-blueprint-grid,
  .atlas-planner-meta-groups,
  .atlas-planner-meta-footer,
  .atlas-planner-meta-sources{
    margin-left: 0;
  }

  .atlas-planner-segment-toggle{
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    padding: 14px;
  }

  .atlas-planner-segment-copy{
    padding: 0 14px 14px;
  }

  .atlas-planner-channel-card{
    min-height: 0;
  }

  .atlas-planner-channel-copy h4{
    min-height: 0;
  }
}


.trending_topics_table{
  width: 180px;
  height: 80%;
}

.trending_topics_table td{ 
  padding: 5px 5px;
  font-size: .9rem;
  font-style: normal !IMPORTANT; 
  
}



/* Images  */
/*******************************/
.standard_data_table img, .standard_form img, .page_header .filter_row img{
  height: 18px;
  width: 18px;
}

.trending_topics_table img{
  height: 13px;
  width: 13px;
}


.page_header img{
    height: 40px; 
    width:auto;
}

.sign-in img{
    height: 38px; 
    width:auto;  
}

.advertiser_edit .trash{
  margin-left: 15px;
  height: 13px;
  width: 13px;
}


/*******************************/




/*tooltips */
/*******************************/

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 100;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

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


/*******************************/


/* When the screen is resized */
/*******************************/

.standard_form{
  
  width: 80vw;
  padding: 15px;
  margin: 15px;
  background-color: var(--greyshadea);
   
}


.standard_form .form_header{
  font-weight: bold;
  font-size: 1.8rem;
  padding-bottom: 10px; 
}

.standard_form .sub_header{
  font-weight: bold;
}


.standard_form .row{
  padding-bottom: 10px;
  
}



/*******************************/


.home_logo{
  height: 20px;
  
}



/* When the screen is resized */
/*******************************/


@media (max-width: 1100px) {

  html, body {
        font-size: 1rem; 
  }
  
  .worldview_logo{
    height: 30px;
  }
  
  .row {
    grid-template-columns: 2fr;
        
  }

  .container{
    height: 100%;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 112px 100px auto;
    
    grid-template-areas: 
      "header"
      "sidebar"
      "main"
     ;        
   }


  .select_advertiser{
    grid-area: 2/1 ;      
    padding-top: 12px;
    padding-left: 10px;
    justify-self: start;
  }
  
  .foxcather_icon{
    display: none;
  }
  
  .user-profile{
    grid-area: 3/1 ;  
    justify-self: start;
             
    margin-left: 12px;
    margin-right: 0px;
    margin-top: 21px;
  }
  
  .page_header .right{
    text-align: left; 
  }

  .profile_options{
    grid-area: 4/1;
    justify-self: start;
    margin-top: 4px;
    
  }

  
  /*We need to overwrite the inline style */
  /* .chart_resize_width{
  /*  width: 80vw !IMPORTANT;      
  /*}
  
  /*.chart_resize_height{    
  /*  height: 80vw !IMPORTANT;
    
  /*}  
  
  /*.chart_type_pie{    
  /*  height: 50vw !IMPORTANT;
   /* width: 50vw !IMPORTANT; 
    
  /*}  
  
 /* .chart_fullspan{
 /*   height: 50vw !IMPORTANT;
 /* } */
  
}  

@media (max-width: 900px) {
  .container{
    grid-template-rows: auto auto 1fr;
  }

  .header{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    grid-template-columns: none;
    grid-template-rows: none;
  }

  .worldview_logo{
    height: 26px;
  }

  .user-profile{
    order: 1;
    margin-left: auto;
    margin-right: 0;
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
  }

  .user-profile .name{
    display: none;
  }

  .user-profile .circle{
    width: 32px;
    height: 32px;
  }

  .user-profile .circle-inner{
    font-size: 13px;
    letter-spacing: 0;
  }

  .user-profile .arrow-down{
    top: 0;
    left: 0;
    width: 0.8em;
    height: 0.8em;
  }

  .select_advertiser{
    order: 3;
    width: 100%;
    padding-top: 6px;
    padding-left: 0;
  }

  .menu-toggle{
    order: 4;
    width: 100%;
    justify-content: flex-start;
    margin-top: 4px;
  }

  .menu-panel{
    background: #ffffff;
    border-bottom: 1px solid var(--greyshadeb);
    padding: 4px 8px 8px 8px;
    overflow: visible;
  }

  .menu-panel .menu ul{
    padding: 0;
  }

  .menu-panel .menu > ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .menu-panel .menu > ul > li{
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--greyshadee);
  }

  .menu-panel .menu > ul > li > a{
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: var(--greyshadea);
    border: 1px solid var(--greyshadeb);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--greyshadee);
  }

  .menu-panel .menu > ul > li > ul{
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
  }

  .menu-panel .menu > ul > li > ul > li{
    padding: 0;
  }

  .menu-panel .menu > ul > li > ul > li a{
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: var(--greyshadea);
    border: 1px solid var(--greyshadeb);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--greyshadee);
    white-space: nowrap;
  }

  .menu-panel .menu > ul > li > ul > li a:hover,
  .menu-panel .menu > ul > li > a:hover{
    background: #ffffff;
  }

  .menu-toggle{
    display: inline-flex;
    border: none;
    background: #ffffff;
    border-radius: 10px;
    width: 40px;
    height: 36px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    box-shadow: 0 6px 14px -10px rgba(17, 24, 39, 0.3);
  }

  .menu-toggle span{
    display: block;
    width: 18px;
    height: 2px;
    background: var(--greyshadee);
    border-radius: 2px;
  }

  .menu-collapsed .container{
    grid-template-rows: auto 1fr;
  }

  .menu-collapsed .menu-panel{
    display: none;
  }

  .page{
    width: 100%;
    padding: 10px 12px;
  }

  .page_header .title_row .left{
    padding: 0;
  }

  .page_header .filter_row{
    height: auto;
    line-height: normal;
    padding-top: 0;
    margin-top: -8px;
  }

  .page_header .filter_item{
    float: none;
    display: block;
    width: 100%;
    padding-right: 0;
    padding-bottom: 4px;
  }

  .dashboard_card{
    float: none;
    width: calc(50% - 8px);
    display: inline-block;
    margin: 4px;
  }

  .dashboard .row{
    display: block;
  }

  .dashboard .row .col{
    display: block;
    width: 100% !important;
    float: none;
    clear: both;
  }

  .dashboard .chart_container,
  .dashboard .chart_canvas{
    width: 100% !important;
    max-width: 100% !important;
  }

  .dashboard canvas{
    width: 100% !important;
    height: auto !important;
  }

  .dashboard .chart_container canvas{
    width: 100% !important;
    height: auto !important;
  }

  .home_row{
    grid-template-columns: 1fr;
  }

  .home .chart_container{
    width: 100%;
    height: auto;
  }

  .home .chart_canvas{
    width: 100%;
  }

  .home .chart_canvas canvas{
    width: 100% !important;
    height: auto !important;
  }

  .home .welcome_header{
    margin-bottom: 2px;
  }

  .home .sub_header_row{
    margin-top: 2px;
  }

  .home .home_row .small{
    display: none;
  }

  .home_chart_note{
    display: block;
  }
}


/*Editable Tables */

.io_form .row{
  padding-bottom: 0px;
}
.io_form .text_label{
  height: 30px;
}


img{
    border:0
}
input.invalid{
    background:red;
    color:#FDFDFD
}
input.filterdefined{
    background:#ffecb0
}
td.number{
    text-align:right;
    font-weight:bold;
    padding-right:5px;
    white-space:nowrap
}
td.boolean{
    text-align:center
}
th.boolean{
    text-align:center
}
table.testgrid{
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--wv-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    color: var(--wv-text);
    font-size: 13px;
}
table.testgrid tr{
    border-bottom: 1px solid #e5e7eb;
}

table.testgrid td{
    padding: 13px 12px;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}

table.testgrid th {
    padding: 13px 12px;
    background: #eef2f7 !important;
    border: 0;
    border-bottom: 1px solid #cbd5e1;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
}

table.testgrid th a,
table.testgrid th a:visited {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #334155;
    text-decoration: none;
}

table.testgrid th a:hover,
table.testgrid th a:focus {
    color: #111827;
    text-decoration: none;
}

table.testgrid tbody tr:nth-of-type(odd) {
    background-color: #f8fafc;
}

table.testgrid tbody tr:hover {
    background-color: #f1f5f9;
    color: var(--wv-text);
}

table.testgrid tbody tr:hover a {
    color: var(--bluelink);
}
table.testgrid i{
    font-size:1.5em;
    cursor:pointer
}
table.testgrid img.icon{
    width:16px;
    cursor:pointer
}
#wrap{
    margin:10px
}


/*Paginator - these have all ben overwritten to align with our datatables */

#paginator{
  padding-top: 3px;
  float: right;

}

.fa-fast-forward,.fa-fast-backward{
    font-family: Arial !important;
    font-size: 15px;  
    margin-left: 0px;
}

#paginator a{
    color: --var(black);
    
    box-sizing: border-box !important;
    display: inline-block !important;
    min-width: 1.5em !important;
    padding: 0.5em 1em !important;
    margin-left: 2px !important;
  
    text-decoration: none !important;
    cursor: pointer !important;
    *cursor: hand !important;
    color: #333 !important;
    border: 1px solid transparent !important;
    border-radius: 2px !important;


}
#paginator a:hover{
   
}
#paginator:active,#paginator #currentpageindex{

}

#currentpageindex{
    color: #333 !important;
    border: 1px solid #979797;
    background-color: white;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #dcdcdc));
    background: -webkit-linear-gradient(top, white 0%, #dcdcdc 100%);
    background: -moz-linear-gradient(top, white 0%, #dcdcdc 100%);
    background: -ms-linear-gradient(top, white 0%, #dcdcdc 100%);
    background: -o-linear-gradient(top, white 0%, #dcdcdc 100%);
    background: linear-gradient(to bottom, white 0%, #dcdcdc 100%);
    
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    /* text-align: center; */
    text-decoration: none !important;
    cursor: pointer;
    *: ;
    cursor: hand;
    color: #333 !important;
    border: 1px solid black;
    border-radius: 2px;
}

#paginator:focus{
  
}
#paginator span#currentpageindex{
   
}

.fa-backward{
  display: none !IMPORTANT;
}

.fa-forward{
  
  display: none !IMPORTANT;
}



.fa-fast-forward:before {

  content: "Next" !IMPORTANT;
}
.fa-fast-backward:before {
  content: "Previous" !IMPORTANT;
}



#addform{
    position:fixed;
    background-color:#f6f6f6;
    box-shadow:3px 3px 3px #636363;
    display:none;
    width:600px;
    height:500px;
    border-radius:5px;
    padding:20px;
    left:50%;
    top:50%;
    margin-left:-200px;
    margin-top:-200px;
    z-index:1000;
    border:1px solid #e1e1e1
}
#addform .row{
    margin:10px 0 10px 0
}
#addform .row.tright{
    text-align:right
}
#addform .row input{
    width:380px;
    padding:5px 9px;
    border:solid 1px #e1d1e1;
    outline:0
}


i.fa.red{
    color:black;
    
}

.editablegrid-action{
  text-align: center;
}

.foxtag-code {
  width: min(560px, 100%);
  margin: 14px 0 20px;
}

.foxtag-code__title {
  margin-bottom: 4px;
  color: var(--wv-text);
  font-size: 0.95rem;
  font-weight: 700;
}

.foxtag-code__directions {
  margin-bottom: 0;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.35;
}

.foxtag-code__body {
  position: relative;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid #263244;
  border-radius: 8px;
  background: #111827;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.12);
}

.foxtag-code__body::before {
  content: "FoxTag snippet";
  display: block;
  padding: 7px 12px;
  border-bottom: 1px solid #263244;
  background: #182234;
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.foxtag-code__textarea.input_textarea,
.foxtag-code__textarea {
  display: block;
  width: 100%;
  min-height: 126px;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: #111827;
  color: #e5e7eb;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  resize: vertical;
  tab-size: 2;
}

.foxtag-code__textarea:disabled {
  opacity: 1;
  -webkit-text-fill-color: #e5e7eb;
  cursor: text;
}

.foxtag-code__textarea:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(249, 191, 46, 0.55);
}

.foxtag-code__actions {
  margin-top: 8px;
}

.foxtag-code__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #d9dee8;
  border-radius: 7px;
  background: #ffffff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.foxtag-code__actions a:hover {
  border-color: var(--purple);
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
  transform: translateY(-1px);
}

.foxtag-code__actions img {
  width: 17px;
  height: 17px;
}

#select_io{
  width: 150px;
  
}

.io_select{
  float: left;
  display: inline-block;
  width: 160px;
}


.spinner{
  float: left;
  width: 30px;
  margin-top: 4px;
  margin-left: 20px;
}


.new_io_button{
   float: left;
  margin-top: -1px;
}


#message{
    position:fixed;
    display:none;
    bottom:0;
    z-index:100000;
    width:100%;
    height: 10px;
    padding:0
}
#message .notification{
    -webkit-border-bottom-right-radius:15px;
    -webkit-border-bottom-left-radius:15px;
    -moz-border-radius-bottomright:15px;
    -moz-border-radius-bottomleft:15px;
    border-bottom-right-radius:15px;
    border-bottom-left-radius:15px;
    padding:20px 0px;
    text-align:center;
    font-size:1.7em;
    color: var(--black);
    float:none;
    margin:0;
    border-radius:0
}
#message .notification.success{
    background-color: var(--green);
}
#message .notification.error{
    background-color:#d9534f
}
/*# sourceMappingURL=style.css.map */
 
















/* Select2 styles */
.select2-container{
    box-sizing:border-box;
    display:inline-block;
    margin:0;
    position:relative;
    vertical-align:middle
}
.select2-container .select2-selection--single{
    box-sizing:border-box;
    cursor:pointer;
    display:block;
 
    user-select:none;
    -webkit-user-select:none
}
.select2-container .select2-selection--single .select2-selection__rendered{
    display:block;
    padding-left:8px;
    padding-right:20px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.select2-container .select2-selection--single .select2-selection__clear{
    background-color:transparent;
    border:none;
    font-size:1em
}
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{
    padding-right:8px;
    padding-left:20px
}
.select2-container .select2-selection--multiple{
    box-sizing:border-box;
    cursor:pointer;
    display:block;
    min-height:32px;
    user-select:none;
    -webkit-user-select:none
}
.select2-container .select2-selection--multiple .select2-selection__rendered{
    display:inline;
    list-style:none;
    padding:0
}
.select2-container .select2-selection--multiple .select2-selection__clear{
    background-color:transparent;
    border:none;
    font-size:1em
}
.select2-container .select2-search--inline .select2-search__field{
    box-sizing:border-box;
    border:none;
    font-size:100%;
    margin-top:5px;
    margin-left:5px;
    padding:0;
    max-width:100%;
    resize:none;
    height:18px;
    vertical-align:bottom;
    font-family:sans-serif;
    overflow:hidden;
    word-break:keep-all
}
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{
    -webkit-appearance:none
}
.select2-dropdown{
    background-color:white;
    border:1px solid #aaa;
    border-radius:4px;
    box-sizing:border-box;
    display:block;
    position:absolute;
    left:-100000px;
    width:100%;
    z-index:1051
}
.select2-results{
    display:block
}
.select2-results__options{
    list-style:none;
    margin:0;
    padding:0
}
.select2-results__option{
    padding:6px;
    user-select:none;
    -webkit-user-select:none
}
.select2-results__option--selectable{
    cursor:pointer
}
.select2-container--open .select2-dropdown{
    left:0
}
.select2-container--open .select2-dropdown--above{
    border-bottom:none;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0
}
.select2-container--open .select2-dropdown--below{
    border-top:none;
    border-top-left-radius:0;
    border-top-right-radius:0
}
.select2-search--dropdown{
    display:block;
    padding:4px
}
.select2-search--dropdown .select2-search__field{
    padding:4px;
    width:100%;
    box-sizing:border-box
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{
    -webkit-appearance:none
}
.select2-search--dropdown.select2-search--hide{
    display:none
}
.select2-close-mask{
    border:0;
    margin:0;
    padding:0;
    display:block;
    position:fixed;
    left:0;
    top:0;
    min-height:100%;
    min-width:100%;
    height:auto;
    width:auto;
    opacity:0;
    z-index:99;
    background-color:#fff;
    filter:alpha(opacity=0)
}
.select2-hidden-accessible{
    border:0 !important;
    clip:rect(0 0 0 0) !important;
    -webkit-clip-path:inset(50%) !important;
    clip-path:inset(50%) !important;
    height:1px !important;
    overflow:hidden !important;
    padding:0 !important;
    position:absolute !important;
    width:1px !important;
    white-space:nowrap !important
}
.select2-container--default .select2-selection--single{
    background-color:var(--greyshadeb);
    border:1px solid var(--black);
    border-radius:4px
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    color:#444;
    line-height:28px
}
.select2-container--default .select2-selection--single .select2-selection__clear{
    cursor:pointer;
    float:right;
    font-weight:bold;
    height:26px;
    margin-right:20px;
    padding-right:0px
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{
    color:#999
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height:26px;
    position:absolute;
    top:1px;
    right:1px;
    width:20px
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
    border-color:#888 transparent transparent transparent;
    border-style:solid;
    border-width:5px 4px 0 4px;
    height:0;
    left:50%;
    margin-left:-4px;
    margin-top:-2px;
    position:absolute;
    top:50%;
    width:0
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{
    float:left
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{
    left:1px;
    right:auto
}
.select2-container--default.select2-container--disabled .select2-selection--single{
    background-color:#eee;
    cursor:default
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{
    display:none
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
    border-color:transparent transparent #888 transparent;
    border-width:0 4px 5px 4px
}
.select2-container--default .select2-selection--multiple{
    background-color:white;
    border:1px solid #aaa;
    border-radius:4px;
    cursor:text;
    padding-bottom:5px;
    padding-right:5px;
    position:relative
}
.select2-container--default .select2-selection--multiple.select2-selection--clearable{
    padding-right:25px
}
.select2-container--default .select2-selection--multiple .select2-selection__clear{
    cursor:pointer;
    font-weight:bold;
    height:20px;
    margin-right:10px;
    margin-top:5px;
    position:absolute;
    right:0;
    padding:1px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color:#e4e4e4;
    border:1px solid #aaa;
    border-radius:4px;
    box-sizing:border-box;
    display:inline-block;
    margin-left:5px;
    margin-top:5px;
    padding:0;
    padding-left:20px;
    position:relative;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align:bottom;
    white-space:nowrap
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display{
    cursor:default;
    padding-left:2px;
    padding-right:5px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    background-color:transparent;
    border:none;
    border-right:1px solid #aaa;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    color:#999;
    cursor:pointer;
    font-size:1em;
    font-weight:bold;
    padding:0 4px;
    position:absolute;
    left:0;
    top:0
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{
    background-color:#f1f1f1;
    color:#333;
    outline:none
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{
    margin-left:5px;
    margin-right:auto
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{
    padding-left:5px;
    padding-right:2px
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{
    border-left:1px solid #aaa;
    border-right:none;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear{
    float:left;
    margin-left:10px;
    margin-right:auto
}
.select2-container--default.select2-container--focus .select2-selection--multiple{
    border:solid black 1px;
    outline:0
}
.select2-container--default.select2-container--disabled .select2-selection--multiple{
    background-color:#eee;
    cursor:default
}
.select2-container--default.select2-container--disabled .select2-selection__choice__remove{
    display:none
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{
    border-top-left-radius:0;
    border-top-right-radius:0
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0
}
.select2-container--default .select2-search--dropdown .select2-search__field{
    border:1px solid #aaa
}
.select2-container--default .select2-search--inline .select2-search__field{
    background:transparent;
    border:none;
    outline:0;
    box-shadow:none;
    -webkit-appearance:textfield
}
.select2-container--default .select2-results>.select2-results__options{
    max-height:200px;
    overflow-y:auto
}
.select2-container--default .select2-results__option .select2-results__option{
    padding-left:1em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__group{
    padding-left:0
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option{
    margin-left:-1em;
    padding-left:2em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
    margin-left:-2em;
    padding-left:3em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
    margin-left:-3em;
    padding-left:4em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
    margin-left:-4em;
    padding-left:5em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
    margin-left:-5em;
    padding-left:6em
}
.select2-container--default .select2-results__option--group{
    padding:0
}
.select2-container--default .select2-results__option--disabled{
    color:#ffff
}
.select2-container--default .select2-results__option--selected{
    background-color:#ddd
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background-color:#5897fb;
    color:white
}
.select2-container--default .select2-results__group{
    cursor:default;
    display:block;
    padding:6px
}
.select2-container--classic .select2-selection--single{
    background-color:#f7f7f7;
    border:1px solid #aaa;
    border-radius:4px;
    outline:0;
    background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);
    background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);
    background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
}
.select2-container--classic .select2-selection--single:focus{
    border:1px solid #5897fb
}
.select2-container--classic .select2-selection--single .select2-selection__rendered{
    color:#444;
    line-height:28px
}
.select2-container--classic .select2-selection--single .select2-selection__clear{
    cursor:pointer;
    float:right;
    font-weight:bold;
    height:26px;
    margin-right:20px
}
.select2-container--classic .select2-selection--single .select2-selection__placeholder{
    color:#999
}
.select2-container--classic .select2-selection--single .select2-selection__arrow{
    background-color:#ddd;
    border:none;
    border-left:1px solid #aaa;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    height:26px;
    position:absolute;
    top:1px;
    right:1px;
    width:20px;
    background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);
    background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);
    background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)
}
.select2-container--classic .select2-selection--single .select2-selection__arrow b{
    border-color:#888 transparent transparent transparent;
    border-style:solid;
    border-width:5px 4px 0 4px;
    height:0;
    left:50%;
    margin-left:-4px;
    margin-top:-2px;
    position:absolute;
    top:50%;
    width:0
}
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{
    float:left
}
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{
    border:none;
    border-right:1px solid #aaa;
    border-radius:0;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    left:1px;
    right:auto
}
.select2-container--classic.select2-container--open .select2-selection--single{
    border:1px solid #5897fb
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{
    background:transparent;
    border:none
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{
    border-color:transparent transparent #888 transparent;
    border-width:0 4px 5px 4px
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{
    border-top:none;
    border-top-left-radius:0;
    border-top-right-radius:0;
    background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);
    background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);
    background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{
    border-bottom:none;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);
    background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);
    background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)
}
.select2-container--classic .select2-selection--multiple{
    background-color:white;
    border:1px solid #aaa;
    border-radius:4px;
    cursor:text;
    outline:0;
    padding-bottom:5px;
    padding-right:5px
}
.select2-container--classic .select2-selection--multiple:focus{
    border:1px solid #5897fb
}
.select2-container--classic .select2-selection--multiple .select2-selection__clear{
    display:none
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice{
    background-color:#e4e4e4;
    border:1px solid #aaa;
    border-radius:4px;
    display:inline-block;
    margin-left:5px;
    margin-top:5px;
    padding:0
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__display{
    cursor:default;
    padding-left:2px;
    padding-right:5px
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{
    background-color:transparent;
    border:none;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    color:green;
    cursor:pointer;
    font-size:1em;
    font-weight:bold;
    padding:0 4px
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{
    color:#555;
    outline:none
}
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{
    margin-left:5px;
    margin-right:auto
}
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{
    padding-left:5px;
    padding-right:2px
}
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px
}
.select2-container--classic.select2-container--open .select2-selection--multiple{
    border:1px solid #5897fb
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{
    border-top:none;
    border-top-left-radius:0;
    border-top-right-radius:0
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{
    border-bottom:none;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0
}
.select2-container--classic .select2-search--dropdown .select2-search__field{
    border:1px solid #aaa;
    outline:0
}
.select2-container--classic .select2-search--inline .select2-search__field{
    outline:0;
    box-shadow:none
}
.select2-container--classic .select2-dropdown{
    background-color:#fff;
    border:1px solid transparent
}
.select2-container--classic .select2-dropdown--above{
    border-bottom:none
}
.select2-container--classic .select2-dropdown--below{
    border-top:none
}
.select2-container--classic .select2-results>.select2-results__options{
    max-height:200px;
    overflow-y:auto
}
.select2-container--classic .select2-results__option--group{
    padding:0
}
.select2-container--classic .select2-results__option--disabled{
    color:grey
}
.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable{
    background-color:#3875d7;
    color:#fff
}
.select2-container--classic .select2-results__group{
    cursor:default;
    display:block;
    padding:6px
}
.select2-container--classic.select2-container--open .select2-dropdown{
    border-color:#5897fb
}

.select2-results__options{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.arrow_up {
  display: inline-block;
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-bottom: 20px solid green;
}

.arrow_down {
  display: inline-block;
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}


/*# CSS for real-time dashboards */

/*# Progress bar for widgets */
#progress_block {
  width: 100%;  
  height: 3px;  
  color: green;
  display: inline-block;
}

#progress_bar {
  width: 100%;
  height: 3px;
  background-color: var(--green);
  display: inline-block;
}


.small-text {  
  font-size: .8rem;
}




/*# Slider */
.slider_container {
  width: 500px;
 
  
}

.slider_wrapper {  
  width: 100%;
  height: 20px;  
  background-color: var(--greyshaded);
  display: inline-block;
  position: relative;
  float: left;

}

.slider_bar {  

  height: 20px;  
  display: inline-block;
  position: relative;
  margin-left: 0px;
  float: left;
}



.slider_target {   
  height: 24px;  
  width: 4px;  
  margin-top: -22px;

  background-color: var(--black);
  display: inline-block;
  z-index: 10;
  position: relative;
  float: left;
 
}

.slider_value{
  margin-top: -19px;
  font-weight: bold;
  color: var(--black);
  display: inline-block;
  z-index: 10;
  position: relative;
  float: left;
  
}


/*# Arrows 

.arrow {
  border: solid var(--black);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}


.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
*/


/* Atlas AI Chat */
.atlas-chat {
  max-width: 1040px;
  margin: 0 auto 40px auto;
  padding: 0 12px;
  --atlas-bg: #ffffff;
  --atlas-surface: #f7f8fb;
  --atlas-border: #e5e7ef;
  --atlas-border-strong: #d9dee8;
  --atlas-text: #121826;
  --atlas-muted: #6b7280;
  --atlas-accent: var(--wv-fox-yellow);
  --atlas-accent-soft: rgba(249, 191, 46, 0.18);
  font-family: inherit;
}

.atlas-chat__panel {
  background: var(--atlas-bg);
  border-radius: 16px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  min-height: 560px;
  border: none;
}

.atlas-chat__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 26px 30px 18px 30px;
  border-bottom: none;
  flex-wrap: wrap;
  gap: 18px;
}

.atlas-chat__identity {
  display: flex;
  align-items: center;
  gap: 16px;
}

.atlas-chat__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wv-fox-yellow);
  border: none;
  color: #111827;
  font-size: 1.35rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 18px -14px var(--darkpurple);
}

.atlas-chat__headline {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--atlas-text);
}

.atlas-chat__subline {
  font-size: 0.92rem;
  color: var(--atlas-muted);
  margin-top: 2px;
}

.atlas-chat__session-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-left: auto;
  text-align: right;
}

.atlas-chat__user {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.atlas-chat__user-name {
  font-weight: 600;
  color: var(--atlas-text);
}

.atlas-chat__user-role,
.atlas-chat__user-meta {
  font-size: 0.85rem;
  color: var(--atlas-muted);
}

.atlas-chat__reset {
  border: 1px solid var(--darkpurple);
  background: var(--purple);
  color: var(--greyshadea);
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.atlas-chat__reset:hover {
  background: var(--darkpurple);
  box-shadow: 0 10px 18px -14px var(--darkpurple);
  transform: translateY(-1px);
}

.atlas-chat__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 30px 18px 30px;
  gap: 14px;
}

.atlas-chat__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.atlas-chat__quick-chip {
  border: 1px solid var(--atlas-border);
  border-radius: 999px;
  background: var(--atlas-bg);
  padding: 6px 12px 6px 8px;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.atlas-chat__quick-chip strong {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--atlas-text);
  margin-bottom: 0;
}

.atlas-chat__quick-chip:hover {
  background: var(--atlas-surface);
  box-shadow: 0 12px 24px -20px rgba(17, 24, 39, 0.3);
  transform: translateY(-2px);
}

.atlas-chat__quick-icon {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid var(--atlas-border-strong);
  background: var(--atlas-accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.atlas-chat__quick-icon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--atlas-accent);
  box-shadow: 6px -4px 0 -2px var(--atlas-accent);
  display: block;
}

.atlas-chat__messages {
  flex: 1;
  padding: 6px 0 10px 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.atlas-chat__message {
  display: flex;
  align-items: flex-start;
  --atlas-chat-avatar-size: 36px;
  --atlas-chat-avatar-gap: 12px;
  gap: var(--atlas-chat-avatar-gap);
  width: 100%;
}

.atlas-chat__message--user {
  flex-direction: row-reverse;
}

.atlas-chat__avatar-circle {
  width: var(--atlas-chat-avatar-size);
  height: var(--atlas-chat-avatar-size);
  border-radius: 50%;
  border: none;
  background: var(--atlas-surface);
  color: var(--atlas-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.atlas-chat__avatar-circle--atlas {
  background: var(--wv-fox-yellow);
  border-color: var(--wv-fox-yellow);
  color: #111827;
}

.atlas-chat__avatar-circle--user {
  background: var(--green);
  border-color: var(--darkgreen);
  color: var(--greyshadea);
}

.atlas-chat__bubble {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 14px;
  line-height: 1.45;
  word-break: break-word;
  border: 1px solid var(--atlas-border);
  box-shadow: 0 10px 22px -18px rgba(17, 24, 39, 0.25);
  background: #fcfdff;
  color: var(--atlas-text);
}

.atlas-chat__bubble--wide {
  flex: 1;
  width: calc(100% - (var(--atlas-chat-avatar-size) + var(--atlas-chat-avatar-gap) + var(--atlas-chat-avatar-size) + var(--atlas-chat-avatar-gap)));
  max-width: calc(100% - (var(--atlas-chat-avatar-size) + var(--atlas-chat-avatar-gap) + var(--atlas-chat-avatar-size) + var(--atlas-chat-avatar-gap)));
}

.atlas-chat__bubble--atlas {
  border-top-left-radius: 8px;
}

.atlas-chat__bubble--user {
  background: #f1f5f9;
  color: var(--atlas-text);
  border-color: var(--atlas-border);
  border-bottom-right-radius: 8px;
  box-shadow: 0 12px 24px -18px rgba(17, 24, 39, 0.25);
}

.atlas-chat__bubble-label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
  color: var(--atlas-muted);
}

.atlas-chat__message--user .atlas-chat__bubble-label {
  text-align: right;
}

.atlas-chat__bubble--user .atlas-chat__bubble-label {
  color: var(--atlas-muted);
}

.atlas-chat__bubble-text {
  font-size: 0.95rem;
}

.atlas-chat__message--status {
  gap: var(--atlas-chat-avatar-gap);
  min-height: var(--atlas-chat-avatar-size);
  align-items: center;
}

.atlas-chat__avatar-circle--status {
  opacity: 0.72;
}

.atlas-chat__inline-status {
  color: var(--atlas-muted);
  font-size: 0.88rem;
  line-height: 1.4;
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.atlas-chat__inline-status-spinner {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #d8dee8;
  border-top-color: var(--atlas-accent);
  border-radius: 50%;
  flex: 0 0 auto;
  animation: atlasChatSpin 0.8s linear infinite;
}

.atlas-chat__inline-status-text {
  display: inline-block;
}

.atlas-chat__table-wrap {
  margin-top: 8px;
  overflow-x: auto;
  position: relative;
  padding-bottom: 32px;
  width: 100%;
}

.atlas-chat__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.atlas-chat__table th,
.atlas-chat__table td {
  border: 1px solid var(--atlas-border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.atlas-chat__table th:first-child,
.atlas-chat__table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--atlas-bg);
  box-shadow: 2px 0 0 var(--atlas-border);
  min-width: 260px;
  width: 320px;
  max-width: 360px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.atlas-chat__table th:first-child {
  z-index: 3;
  background: var(--atlas-surface);
}

.atlas-chat__table tbody tr:nth-child(even) td:first-child {
  background: #fbfcff;
}

.atlas-chat__table th.atlas-chat__cell--compact,
.atlas-chat__table td.atlas-chat__cell--compact {
  min-width: 34px;
  width: 1%;
  max-width: 64px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.atlas-chat__table th:first-child.atlas-chat__cell--compact,
.atlas-chat__table td:first-child.atlas-chat__cell--compact {
  min-width: 34px;
  width: 1%;
  max-width: 64px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.atlas-chat__table th.atlas-chat__cell--text,
.atlas-chat__table td.atlas-chat__cell--text {
  min-width: 220px;
  width: 34%;
  max-width: 520px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.atlas-chat__table th {
  background: var(--atlas-surface);
  color: var(--atlas-text);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 2;
}

.atlas-chat__table--sortable th {
  cursor: pointer;
  user-select: none;
}

.atlas-chat__table--sortable th.atlas-chat__th--sorted-asc::after {
  content: " ^";
  font-size: 0.75em;
}

.atlas-chat__table--sortable th.atlas-chat__th--sorted-desc::after {
  content: " v";
  font-size: 0.75em;
}

.atlas-chat__table tbody tr:nth-child(even) td {
  background: #fbfcff;
}

.atlas-chat__table-action {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  color: var(--bluelink);
  text-decoration: underline;
  font: inherit;
  cursor: pointer;
}

.atlas-chat__table-action:hover {
  color: var(--atlas-accent);
}

.atlas-chat__cell--margin-good {
  color: var(--green);
  font-weight: 600;
}

.atlas-chat__cell--margin-bad {
  color: #d93025;
  font-weight: 600;
}

.atlas-chat__cell--margin-good-soft {
  color: var(--green);
  font-weight: 400;
}

.atlas-chat__cell--margin-bad-soft {
  color: #d93025;
  font-weight: 400;
}

.atlas-chat__code {
  background: #f8fafc;
  border: 1px solid var(--atlas-border);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.4;
}

.atlas-chat__chart {
  position: relative;
  padding-bottom: 32px;
  width: 100%;
}

.atlas-chat__chart canvas {
  width: 100% !important;
  height: auto !important;
}

.atlas-chat__download {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--atlas-border);
  background: var(--atlas-bg);
  color: var(--atlas-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 16px -12px rgba(17, 24, 39, 0.25);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.atlas-chat__download:hover {
  background: var(--atlas-surface);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px -12px rgba(17, 24, 39, 0.25);
}

.atlas-chat__download-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.atlas-chat__table-actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding-top: 4px;
}

.atlas-chat__export {
  border: 1px solid var(--atlas-border);
  background: var(--atlas-bg);
  color: var(--atlas-text);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.atlas-chat__export:hover {
  background: var(--atlas-surface);
  color: var(--atlas-text);
}

.atlas-chat__export:disabled {
  opacity: 0.6;
  cursor: default;
}

.atlas-chat__status {
  padding: 8px 0 0 6px;
  font-size: 0.9rem;
  color: var(--atlas-muted);
  min-height: 24px;
}

.atlas-chat__status--error {
  color: var(--pink);
}

.atlas-chat__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.atlas-chat__suggestions--inline {
  padding-top: 10px;
}

.atlas-chat__suggestion {
  border: 1px solid var(--atlas-border);
  background: var(--atlas-bg);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.atlas-chat__suggestion:hover {
  background: var(--atlas-surface);
  color: var(--atlas-text);
}

.atlas-chat__suggestion--feedback {
  min-width: 36px;
  padding: 4px 10px;
  font-size: 1rem;
  line-height: 1.2;
}

.atlas-chat__composer {
  border-top: none;
  display: flex;
  padding: 16px 24px 24px 24px;
  gap: 12px;
  background: var(--atlas-bg);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.atlas-chat__composer input {
  flex: 1;
  border: 1px solid var(--atlas-border);
  border-radius: 28px;
  padding: 12px 20px;
  font-size: 1rem;
  background: var(--atlas-bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.atlas-chat__composer input:focus {
  outline: none;
  border-color: var(--atlas-accent);
  box-shadow: 0 0 0 3px var(--atlas-accent-soft);
}

.atlas-chat__composer button {
  border: none;
  background: var(--purple);
  color: var(--greyshadea);
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.atlas-chat__composer .atlas-chat__new {
  background: var(--purple);
}

.atlas-chat__composer .atlas-chat__send {
  background: var(--green);
}

.atlas-chat__composer .atlas-chat__stop {
  display: none;
  background: transparent;
  color: var(--atlas-muted);
  border: 1px solid var(--atlas-border);
  padding: 12px 18px;
}

.atlas-chat.atlas-chat--busy .atlas-chat__composer .atlas-chat__stop {
  display: inline-flex;
}

.atlas-chat__composer button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.atlas-chat__composer button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 20px -16px rgba(17, 24, 39, 0.35);
}

.atlas-chat__composer .atlas-chat__new:hover:not(:disabled) {
  background: var(--darkpurple);
  box-shadow: 0 12px 20px -16px rgba(69, 44, 126, 0.35);
}

.atlas-chat__composer .atlas-chat__send:hover:not(:disabled) {
  background: var(--darkgreen);
  box-shadow: 0 12px 20px -16px rgba(22, 116, 66, 0.35);
}

.atlas-chat__composer .atlas-chat__stop:hover:not(:disabled) {
  background: var(--atlas-surface);
  color: var(--atlas-text);
  box-shadow: none;
}

@keyframes atlasChatSpin {
  to { transform: rotate(360deg); }
}

@keyframes atlasTypingDots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75%, 100% { content: '...'; }
}

.atlas-chat__debug-bubble {
  align-self: flex-start;
  margin-top: 8px;
  padding: 3px 8px;
  border: 1px solid #d8dee8;
  border-radius: 12px;
  background: #f8fafc;
  color: #617084;
  font-size: 0.72rem;
  line-height: 1.4;
  cursor: pointer;
}

.atlas-chat__debug-bubble:hover {
  border-color: #b8c2d2;
  color: #334155;
}

.atlas-chat__debug-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.42);
}

.atlas-chat__debug-dialog {
  width: min(860px, 96vw);
  max-height: min(720px, 90vh);
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.28);
}

.atlas-chat__debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  color: #0f172a;
}

.atlas-chat__debug-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.atlas-chat__debug-header button {
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #d8dee8;
  border-radius: 6px;
  background: #eef2f7;
  color: #334155;
  font-size: 0.78rem;
  cursor: pointer;
}

.atlas-chat__debug-header button:hover {
  border-color: #b8c2d2;
  background: #e2e8f0;
}

.atlas-chat__debug-pre {
  max-height: calc(min(720px, 90vh) - 54px);
  margin: 0;
  padding: 14px;
  overflow: auto;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

@media (max-width: 768px) {
  .atlas-chat {
    padding: 0 8px;
  }
  .atlas-chat__header {
    padding: 16px 14px 10px 14px;
  }
  .atlas-chat__body {
    padding: 10px 14px 10px 14px;
  }
  .atlas-chat__panel {
    min-height: 0;
    border-radius: 12px;
  }
  .atlas-chat__messages {
    max-height: none;
  }
  .atlas-chat__bubble {
    max-width: 100%;
    padding: 10px 12px;
  }
  .atlas-chat__message {
    --atlas-chat-avatar-size: 32px;
    --atlas-chat-avatar-gap: 10px;
  }
  .atlas-chat__avatar-circle {
    font-size: 0.72rem;
  }
  .atlas-chat__quick {
    gap: 6px;
  }
  .atlas-chat__quick-chip {
    padding: 6px 10px;
  }
  .atlas-chat__bubble-text {
    font-size: 0.92rem;
  }
  .atlas-chat__table {
    font-size: 0.82rem;
  }
  .atlas-chat__table th,
  .atlas-chat__table td {
    padding: 6px 8px;
  }
  .atlas-chat__table th:first-child,
  .atlas-chat__table td:first-child {
    min-width: 180px;
    width: 220px;
    max-width: 260px;
  }
  .atlas-chat__table th.atlas-chat__cell--compact,
  .atlas-chat__table td.atlas-chat__cell--compact {
    min-width: 32px;
    width: 1%;
    max-width: 50px;
  }
  .atlas-chat__table th.atlas-chat__cell--text,
  .atlas-chat__table td.atlas-chat__cell--text {
    min-width: 180px;
    width: 240px;
    max-width: 300px;
  }
  .atlas-chat__table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .atlas-chat__chart,
  .atlas-chat__chart canvas{
    width: 100% !important;
    max-width: 100% !important;
  }
  .atlas-chat__composer {
    flex-direction: column;
    padding: 12px 14px 16px 14px;
  }
  .atlas-chat__composer input {
    font-size: 0.95rem;
  }
  .atlas-chat__composer button {
    width: 100%;
  }
  .atlas-chat__session-meta {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }
}

/* Final app shell overrides: keep after legacy responsive rules. */
.container {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: 70px minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "sidebar main";
  background: var(--wv-surface);
  overflow-x: clip;
}

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 70px;
  padding: 0 22px 0 24px;
  background: var(--wv-surface);
  border-bottom: 1px solid var(--wv-border);
}

.header-logo-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 168px;
  height: 38px;
  overflow: visible;
}

.worldview_logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 168px;
  margin: 0;
  object-fit: contain;
}

.select_advertiser {
  display: flex;
  align-items: center;
  grid-area: auto;
  justify-self: auto;
  min-width: 250px;
  max-width: 360px;
  padding: 0;
}

.select_advertiser form,
.select_advertiser table,
.select_advertiser tbody,
.select_advertiser tr,
.select_advertiser td {
  display: block;
  width: 100%;
}

.select_advertiser .selectbox_search,
.select_advertiser .select2-container {
  width: 100% !important;
  min-width: 0;
}

.select_advertiser .select2-container--default .select2-selection--single {
  height: 36px;
  border: 1px solid #b8c0cc;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.select_advertiser .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px;
  color: var(--wv-text);
  font-weight: 500;
  padding-left: 12px;
}

.select_advertiser .select2-container--default .select2-selection--single:hover {
  border-color: #8f9aaa;
  background: #ffffff;
}

.select_advertiser .select2-container--default.select2-container--focus .select2-selection--single,
.select_advertiser .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--wv-brand);
  box-shadow: 0 0 0 3px var(--wv-focus);
}

.user-profile {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  grid-area: auto;
  justify-self: auto;
  height: 38px;
  margin: 0 0 0 auto;
  padding: 0;
  color: var(--wv-text);
}

.user-profile .name,
.user-profile .arrow-down,
.arrow_top_outer:after {
  display: none;
}

.circle {
  width: 36px;
  height: 36px;
  background: var(--wv-avatar);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 1px var(--wv-border);
}

.circle-inner {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.profile_options {
  position: fixed;
  top: 58px;
  right: 18px;
  z-index: 60;
  width: 260px;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--wv-surface);
  border: 1px solid var(--wv-border);
  border-radius: 8px;
  box-shadow: 0 18px 40px -24px rgba(16, 24, 40, 0.38), 0 8px 18px -12px rgba(16, 24, 40, 0.22);
}

.profile_options .row {
  margin: 0;
  padding: 0;
}

.profile_options .menu > ul {
  padding: 12px 12px 14px;
}

.profile_options .menu > ul > li {
  padding: 8px 0 3px;
  color: var(--wv-text);
  font-size: 0.88rem;
  font-weight: 700;
}

.profile_options .menu > ul > li:first-child {
  padding-top: 2px;
}

.profile_options .menu > ul > li > ul {
  padding: 7px 0 6px 12px;
}

.profile_options .menu > ul > li > ul > li {
  padding: 2px 0;
  color: var(--wv-muted);
  font-size: 0.86rem;
  font-weight: 400;
}

.profile_options .menu > ul > li > ul > li a {
  display: block;
  padding: 3px 0;
  color: var(--wv-muted);
  text-decoration: none;
}

.profile_options .menu > ul > li > ul > li a:hover,
.profile_options .menu > ul > li > ul > li a:focus {
  background: transparent;
  color: var(--wv-text);
}

.menu-panel {
  position: sticky;
  top: 70px;
  z-index: 20;
  grid-area: sidebar;
  width: 88px;
  height: calc(100vh - 70px);
  padding: 12px 8px;
  overflow: visible;
  background: var(--wv-rail);
  border-right: 1px solid var(--wv-border);
  color: var(--wv-muted);
}

.menu-panel .menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-panel .menu > ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-panel .menu > ul > li {
  position: relative;
  min-height: 58px;
  padding: 0;
  color: var(--wv-muted);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

.menu-panel .menu > ul > li > a,
.menu-panel .menu > ul > li:not(:has(> a)) {
  display: flex;
  min-height: 58px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 6px;
  color: var(--wv-muted);
  text-decoration: none;
}

.menu-panel .menu > ul > li > a:hover,
.menu-panel .menu > ul > li:hover:not(:has(> a)) {
  background: var(--wv-hover);
  color: var(--wv-text);
}

.menu-panel .menu > ul > li > a:before,
.menu-panel .menu > ul > li:not(:has(> a)):before {
  display: block;
  content: "";
  width: 18px;
  height: 18px;
  border: 1.8px solid #344054;
  border-radius: 5px;
  background:
    linear-gradient(#344054, #344054) center/10px 1.8px no-repeat,
    linear-gradient(#344054, #344054) center/1.8px 10px no-repeat;
}

.menu-panel .menu > ul > li:nth-child(1) > a:before {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M4%2011.5L12%204l8%207.5%27%20stroke%3D%27%23344054%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3Cpath%20d%3D%27M6.5%2010.5V20h11v-9.5%27%20stroke%3D%27%23344054%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center/22px 22px no-repeat;
  transform: none;
}

.menu-panel .menu > ul > li:nth-child(2):before {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Crect%20x%3D%276.5%27%20y%3D%276.5%27%20width%3D%2711%27%20height%3D%2711%27%20rx%3D%272.6%27%20stroke%3D%27%23344054%27%20stroke-width%3D%272%27/%3E%3Cpath%20d%3D%27M9.5%206.5V3.8M14.5%206.5V3.8M9.5%2020.2V17.5M14.5%2020.2V17.5M6.5%209.5H3.8M6.5%2014.5H3.8M20.2%209.5H17.5M20.2%2014.5H17.5%27%20stroke%3D%27%23344054%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27/%3E%3Cpath%20d%3D%27M9.7%2014.5L11.1%209.4H12.9L14.3%2014.5M10.15%2013h3.7%27%20stroke%3D%27%23344054%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center/28px 28px no-repeat;
}

.menu-panel .menu > ul > li:nth-child(3):before {
  transform: rotate(45deg);
  background: none;
}

.menu-panel .menu > ul > li.menu-activate:before {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  transform: none;
  background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2028%2028%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M20.9%205.6A10%2010%200%201%200%2021.1%2022.2%27%20stroke%3D%27%23344054%27%20stroke-width%3D%272.1%27%20stroke-linecap%3D%27round%27/%3E%3Cpath%20d%3D%27M9%2014h11.4%27%20stroke%3D%27%23344054%27%20stroke-width%3D%272.3%27%20stroke-linecap%3D%27round%27/%3E%3Cpath%20d%3D%27M16.8%209.7L21.1%2014l-4.3%204.3%27%20stroke%3D%27%23344054%27%20stroke-width%3D%272.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center/28px 28px no-repeat;
}

.menu-panel .menu > ul > li:nth-child(4):before {
  border-radius: 3px;
  background:
    linear-gradient(#344054, #344054) 4px 5px/10px 1.8px no-repeat,
    linear-gradient(#344054, #344054) 4px 10px/10px 1.8px no-repeat,
    linear-gradient(#344054, #344054) 4px 15px/10px 1.8px no-repeat;
}

.menu-panel .menu > ul > li.menu-dashboards:before {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2028%2028%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Crect%20x%3D%274%27%20y%3D%2713%27%20width%3D%274.5%27%20height%3D%2711%27%20rx%3D%271%27%20fill%3D%27%23344054%27/%3E%3Crect%20x%3D%2710%27%20y%3D%278.5%27%20width%3D%274.5%27%20height%3D%2715.5%27%20rx%3D%271%27%20fill%3D%27%23344054%27/%3E%3Crect%20x%3D%2716%27%20y%3D%274%27%20width%3D%274.5%27%20height%3D%2720%27%20rx%3D%271%27%20fill%3D%27%23344054%27/%3E%3Crect%20x%3D%2722%27%20y%3D%276.8%27%20width%3D%274.5%27%20height%3D%2717.2%27%20rx%3D%271%27%20fill%3D%27%23344054%27/%3E%3C/svg%3E") center/28px 28px no-repeat;
}

.menu-panel .menu > ul > li:nth-child(5):before {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #344054 0 2px, transparent 2.5px);
}

.menu-panel .menu > ul > li.menu-realtime:before {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2028%2028%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%2710%27%20stroke%3D%27%23344054%27%20stroke-width%3D%272.4%27/%3E%3Cpath%20d%3D%27M14%208.2V14h5.6%27%20stroke%3D%27%23344054%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center/28px 28px no-repeat;
}

.menu-panel .menu > ul > li:nth-child(6):before {
  border-radius: 3px;
  background:
    linear-gradient(#344054, #344054) 50% 33%/14px 1.8px no-repeat,
    linear-gradient(#344054, #344054) 50% 66%/14px 1.8px no-repeat,
    linear-gradient(#344054, #344054) 33% 50%/1.8px 14px no-repeat,
    linear-gradient(#344054, #344054) 66% 50%/1.8px 14px no-repeat;
}

.menu-panel .menu > ul > li:nth-child(7):before {
  border-color: transparent;
  background:
    radial-gradient(circle at 4px 9px, #344054 0 2px, transparent 2.5px),
    radial-gradient(circle at 9px 9px, #344054 0 2px, transparent 2.5px),
    radial-gradient(circle at 14px 9px, #344054 0 2px, transparent 2.5px);
}

.menu-panel .menu > ul > li.menu-other:before {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(#344054, #344054) left top/7px 7px no-repeat,
    linear-gradient(#344054, #344054) right top/7px 7px no-repeat,
    linear-gradient(#344054, #344054) left bottom/7px 7px no-repeat,
    linear-gradient(#344054, #344054) right bottom/7px 7px no-repeat;
}

.menu-panel .menu > ul > li > ul {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  display: none;
  width: 224px;
  padding: 10px;
  background: var(--wv-surface);
  border: 1px solid var(--wv-border);
  border-radius: 8px;
  box-shadow: 0 18px 40px -24px rgba(16, 24, 40, 0.38), 0 8px 18px -12px rgba(16, 24, 40, 0.22);
  text-align: left;
}

.menu-panel .menu > ul > li:hover > ul,
.menu-panel .menu > ul > li:focus-within > ul {
  display: block;
}

.menu-panel .menu > ul > li > ul:before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  width: 8px;
  height: 100%;
}

.menu-panel .menu > ul > li > ul > li {
  padding: 0;
}

.menu-panel .menu > ul > li > ul > li a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--wv-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.menu-panel .menu > ul > li > ul > li a:hover {
  background: var(--wv-hover);
  color: var(--wv-text);
}

.page {
  grid-area: main;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 16px 38px 36px 38px;
  background: var(--wv-surface);
  overflow-x: hidden;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

#debuginfo {
  max-width: 100%;
  overflow-x: auto;
}

.row,
.dashboard .row {
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.col,
.dashboard .col {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.dashboard,
.dashboard * {
  max-width: 100%;
}

.dashboard .chart_container,
.dashboard .chart_canvas,
.dashboard canvas,
.chart_container,
.chart_canvas {
  max-width: 100% !important;
}

.dashboard .chart_container,
.dashboard .chart_canvas,
.dashboard canvas {
  width: 100% !important;
}

.standard_data_table {
  max-width: 100%;
}

.dataTables_wrapper,
.dashboard_table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.standard_data_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--wv-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  color: var(--wv-text);
  font-size: 13px;
}

.standard_data_table thead tr {
  background: #eef2f7;
  color: var(--wv-text);
  text-align: left;
}

.standard_data_table thead th {
  background: #eef2f7 !important;
  border-bottom: 1px solid #cbd5e1;
  color: #334155;
  font-size: 12px;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.standard_data_table th,
.standard_data_table td {
  padding: 13px 12px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

.standard_data_table td:last-child,
.standard_data_table th:last-child {
  width: 1%;
  padding-right: 18px;
  text-align: right;
  white-space: nowrap;
}

.standard_data_table td:has(.slider_container) {
  min-width: 220px;
  padding-right: 18px;
}

.pacing-detail-table {
  table-layout: fixed;
}

.pacing-detail-table td {
  height: 44px;
  padding: 10px 14px;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
}

.pacing-detail-table td:last-child {
  width: auto;
  padding-right: 14px;
  text-align: center;
  white-space: normal;
}

.pacing-detail-table tbody tr:hover {
  background: #ffffff;
}

.pacing-detail-table td.pacing-detail-section {
  height: 40px;
  padding-right: 14px;
  background: #f8fafc;
  color: #111827;
  font-weight: 700;
  text-align: right;
}

.pacing-detail-table .atlas-chat__cell--margin-good {
  color: var(--green);
  font-weight: 700;
}

.standard_data_table tbody tr {
  border-bottom: 0;
  background: #ffffff;
  transition: background-color 0.14s ease, box-shadow 0.14s ease;
}

.standard_data_table tbody tr:nth-of-type(odd) {
  background: #f8fafc;
}

.standard_data_table tbody tr:hover {
  background: #eef6f2;
}

.standard_data_table tbody tr:first-of-type,
.standard_data_table tbody tr:last-of-type {
  border: 0;
}

.standard_data_table tbody tr:last-child td {
  border-bottom: 0;
}

.standard_data_table a {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 500;
}

.standard_data_table a:hover {
  color: #0f3b9a;
  text-decoration: underline;
}

.standard_data_table .trim_text {
  max-width: min(30vw, 420px);
}

.slider_container {
  width: 100% !important;
  max-width: 260px;
  min-width: 150px;
  height: 18px;
  position: relative;
}

.slider_wrapper {
  height: 16px;
  overflow: hidden;
  background: #d7dde5;
  border-radius: 999px;
}

.slider_bar {
  height: 16px;
  border-radius: 999px 0 0 999px;
}

.slider_target {
  position: absolute;
  top: -3px;
  left: 0;
  width: 3px;
  height: 22px;
  margin-top: 0 !important;
  background: #111827;
  border-radius: 999px;
  transform: translateX(-50%);
}

.slider_value {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 16px;
  margin-top: 0 !important;
  transform: translateY(-50%);
  color: #111827;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.breadcrumbtrail {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: 10px;
  color: var(--wv-muted);
  font-size: 13px;
  font-weight: 500;
}

.breadcrumbtrail a {
  color: var(--wv-text);
  text-decoration: none;
}

.page_header .title_row .left {
  color: var(--wv-text);
  font-size: 1.65rem;
  font-weight: 700;
  padding: 4px 0 8px 0;
  letter-spacing: 0;
}

.page_header {
  margin: 0 0 14px 0;
}

.page_header:has(.filter_row .right:not(:has(*))),
.page_filter_container:not(:has(tr)),
.page_filter_container:not(:has(td)) {
  display: none;
}

.page_header .filter_row {
  height: auto;
  min-height: 0;
  line-height: 1.3;
  margin: 0;
  padding: 0;
}

.page_header .filter_item {
  line-height: 1.3;
  padding-bottom: 6px;
}

#content > .breadcrumbtrail + .page_header,
#content > nav + .page_header {
  margin-top: 0;
}

#content > .cell_title,
#content > .standard_data_table,
#content > .page_header + .standard_data_table {
  margin-top: 0;
}

#content > .cell_title {
  margin-bottom: 10px;
}

.home .sub_header_row,
.dashboard_sub_header {
  min-height: 32px;
  height: auto;
  display: flex;
  align-items: center;
  margin: 12px 0 8px 0;
  padding: 6px 12px;
  background: #f5f7fa;
  border: 1px solid var(--wv-border);
  border-left: 4px solid var(--purple);
  border-radius: 6px;
  color: var(--wv-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.home .sub_header_row:first-child,
.home .row:first-child .sub_header_row {
  margin-top: 0;
}

.home_row {
  align-items: start;
  column-gap: 18px;
}

.home_row + .home_note_row {
  margin-top: 6px;
}

.home_note_row {
  align-items: start;
}

.home_note_row .small {
  padding-top: 0;
  font-size: 12px;
  line-height: 1.3;
}

.home_row .home_cell,
.home_row .col {
  min-width: 0;
}

.home_sentiment_row {
  align-items: stretch;
}

.home_sentiment_row .home_cell {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.home_sentiment_row .trending_topics_table {
  flex: 1 1 auto;
  height: 100%;
  width: 100% !important;
  max-width: none;
}

.home .home_sentiment_row .chart_container {
  flex: 1 1 auto;
  height: 100% !important;
}

.home .home_sentiment_row .chart_canvas {
  height: 100%;
}

.home .home_sentiment_row .chart_canvas canvas {
  height: 100% !important;
}

.home_sentiment_row .home_chart_note--desktop {
  display: block;
  margin-top: auto;
  padding-top: 10px;
}

.home-atlas-card {
  display: flex;
  min-height: clamp(175px, 11.5vw, 215px);
  height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--wv-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.home-atlas-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-atlas-card__avatar {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wv-fox-yellow);
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.home-atlas-card__title {
  color: var(--wv-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.home-atlas-card__subtitle {
  margin-top: 2px;
  color: var(--wv-muted);
  font-size: 12px;
  line-height: 1.35;
}

.home-atlas-card__form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-atlas-card__form input {
  min-width: 0;
  min-height: 38px;
  flex: 1 1 auto;
  padding: 0 12px;
  border: 1px solid #d6dce6;
  border-radius: 999px;
  background: #ffffff;
  color: var(--wv-text);
  font-size: 13px;
  outline: none;
}

.home-atlas-card__form input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(106, 90, 168, 0.14);
}

.home-atlas-card__form button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--purple);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.home-atlas-card__form button:hover {
  background: var(--darkpurple);
}

.home-atlas-card__status {
  min-height: 16px;
  color: var(--wv-muted);
  font-size: 12px;
}

.home-atlas-card--loading .home-atlas-card__status:before {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 7px;
  border: 2px solid #d7dce7;
  border-top-color: var(--purple);
  border-radius: 50%;
  content: "";
  vertical-align: -2px;
  animation: wv-spin 0.8s linear infinite;
}

@keyframes wv-spin {
  to {
    transform: rotate(360deg);
  }
}

.home .chart_container {
  width: 100% !important;
  height: clamp(175px, 11.5vw, 215px) !important;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid var(--greyshadeb);
  position: relative;
}

.home .chart_canvas,
.home .chart_canvas canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  display: block;
  border: 0;
  padding: 0;
}

@media (max-width: 900px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "header"
      "main";
  }

  .header {
    min-height: 64px;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 12px 12px 12px;
  }

  .header-logo-link {
    order: 1;
    width: 132px;
    height: 30px;
  }

  .worldview_logo {
    height: 24px;
    max-width: 132px;
  }

  .menu-toggle {
    order: 4;
    display: inline-flex;
    width: 40px;
    height: 36px;
    margin: 0;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--wv-border);
    border-radius: 8px;
    background: var(--wv-surface);
    box-shadow: none;
  }

  .menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--wv-text);
    border-radius: 999px;
  }

  .select_advertiser {
    order: 3;
    flex: 1 0 calc(100% - 52px);
    width: calc(100% - 52px);
    max-width: none;
  }

  .user-profile {
    order: 2;
    margin-left: auto;
  }

  .profile_options {
    top: 58px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: 360px;
    margin-left: auto;
  }

  .menu-panel {
    position: fixed;
    top: 116px;
    right: 12px;
    left: 12px;
    z-index: 70;
    display: none;
    width: auto;
    max-height: calc(100dvh - 132px);
    height: auto;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    border-right: 0;
    border: 1px solid var(--wv-border);
    border-radius: 12px;
    box-shadow: 0 24px 60px -32px rgba(16, 24, 40, 0.5), 0 10px 26px -18px rgba(16, 24, 40, 0.3);
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  body.mobile-menu-open .menu-panel {
    display: block;
  }

  .menu-collapsed .menu-panel {
    display: none;
  }

  .menu-panel .menu > ul {
    flex-direction: column;
    gap: 6px;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .menu-panel .menu > ul > li {
    min-width: 0;
    min-height: 0;
    flex: 0 0 auto;
    padding: 0;
    text-align: left;
  }

  .menu-panel .menu > ul > li > a,
  .menu-panel .menu > ul > li:not(:has(> a)) {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--wv-text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  .menu-panel .menu > ul > li > a {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
  }

  .menu-panel .menu > ul > li:not(:has(> a)) {
    display: block;
  }

  .menu-panel .menu > ul > li:not(:has(> a)):before {
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
  }

  .menu-panel .menu > ul > li > ul {
    position: static;
    display: none;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 2px 0 8px 34px;
    padding: 6px;
    border-radius: 8px;
    box-shadow: none;
  }

  .menu-panel .menu > ul > li.menu-open > ul {
    display: block;
  }

  .menu-panel .menu > ul > li > ul:before {
    display: none;
  }

  .menu-panel .menu > ul > li > ul > li a {
    min-height: 38px;
    padding: 8px 10px;
    white-space: normal;
  }

  .page {
    padding: 12px 14px 28px 14px;
    overflow-x: hidden;
  }

  .dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .home-atlas-card {
    min-height: 0;
    padding: 18px;
  }

  .home_sentiment_row .home_cell {
    min-height: 0;
  }

  .home_sentiment_row .home_chart_note--desktop {
    display: none;
  }

  .home-atlas-card__form {
    flex-direction: column;
    align-items: stretch;
  }

  .home-atlas-card__form input,
  .home-atlas-card__form button {
    width: 100%;
  }
}

/* Atlas page refresh */
button,
input,
select,
textarea {
  font-family: inherit;
}

#content:has(.atlas-chat) {
  min-width: 0;
  min-height: calc(100vh - 122px);
  display: flex;
  flex-direction: column;
}

#content:has(.atlas-chat) .breadcrumbtrail {
  flex: 0 0 auto;
  margin: 4px 0 18px 0;
}

.atlas-chat {
  flex: 1 1 auto;
  display: flex;
  width: min(1120px, 100%);
  max-width: 1120px;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  --atlas-bg: #ffffff;
  --atlas-surface: #f8fafc;
  --atlas-border: var(--wv-border);
  --atlas-border-strong: #cbd5e1;
  --atlas-text: var(--wv-text);
  --atlas-muted: var(--wv-muted);
  --atlas-accent: var(--wv-fox-yellow-pastel);
  --atlas-accent-soft: var(--wv-fox-yellow-soft);
  color: var(--atlas-text);
  font-family: Inter, Arial, Helvetica, sans-serif;
}

.atlas-chat__panel {
  width: 100%;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--wv-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.atlas-chat__header {
  align-items: center;
  padding: 24px 28px 18px 28px;
  border-bottom: 1px solid var(--wv-border);
  background: #ffffff;
}

.atlas-chat__identity {
  gap: 14px;
}

.atlas-chat__avatar,
.atlas-chat__avatar-circle--atlas {
  background: var(--wv-fox-yellow-pastel);
  color: #111827;
  border: none;
  box-shadow: 0 10px 22px -18px rgba(17, 24, 39, 0.34);
}

.atlas-chat__avatar {
  width: 44px;
  height: 44px;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0;
}

.atlas-chat__headline {
  color: var(--wv-text);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.atlas-chat__subline {
  color: var(--wv-muted);
  font-size: 0.9rem;
}

.atlas-chat__reset {
  min-height: 34px;
  padding: 7px 16px;
  border: 1px solid var(--wv-purple-pastel-hover);
  border-radius: 999px;
  background: var(--wv-purple-pastel);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
}

.atlas-chat__reset:hover {
  background: var(--wv-purple-pastel-hover);
  box-shadow: 0 12px 20px -18px rgba(69, 44, 126, 0.34);
}

.atlas-chat__body {
  min-height: 0;
  padding: 18px 28px 14px 28px;
  gap: 14px;
  background: #ffffff;
}

.atlas-chat__quick {
  gap: 8px;
}

.atlas-chat__quick-chip {
  min-height: 36px;
  padding: 7px 12px 7px 9px;
  border-color: #d6dce6;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.03);
}

.atlas-chat__quick-chip strong {
  color: #1f2937;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

.atlas-chat__quick-chip:hover {
  background: #fbfcff;
  border-color: #c7cfda;
  box-shadow: 0 10px 24px -20px rgba(16, 24, 40, 0.32);
  transform: translateY(-1px);
}

.atlas-chat__quick-icon {
  width: 18px;
  height: 18px;
  border-color: #efd77f;
  border-radius: 6px;
  background: var(--wv-fox-yellow-soft);
}

.atlas-chat__quick-icon::before {
  background: var(--wv-fox-yellow-pastel);
  box-shadow: 6px -4px 0 -2px var(--wv-fox-yellow-pastel);
}

.atlas-chat__messages {
  flex: 1 1 auto;
  min-height: 0;
  padding: 2px 0 8px 0;
  gap: 12px;
  overflow-y: auto;
}

.atlas-chat__message {
  --atlas-chat-avatar-size: 34px;
  --atlas-chat-avatar-gap: 12px;
}

.atlas-chat__avatar-circle {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
}

.atlas-chat__avatar-circle--user {
  background: var(--wv-purple-pastel);
  color: #ffffff;
  border: 1px solid var(--wv-purple-pastel-hover);
}

.atlas-chat__bubble {
  max-width: min(760px, 78%);
  padding: 13px 16px;
  border: 1px solid var(--wv-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px -22px rgba(16, 24, 40, 0.45);
}

.atlas-chat__bubble--atlas {
  background: #f8fafc;
  border-top-left-radius: 4px;
}

.atlas-chat__bubble--user {
  background: var(--wv-purple-soft);
  border-color: #dedaf0;
  border-bottom-right-radius: 4px;
}

.atlas-chat__bubble-label {
  margin-bottom: 6px;
  color: var(--wv-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.atlas-chat__bubble-text {
  color: var(--wv-text);
  font-size: 14px;
  line-height: 1.5;
}

.atlas-chat__composer {
  align-items: center;
  padding: 16px 28px 22px 28px;
  gap: 12px;
  background: #ffffff;
  border-top: 1px solid var(--wv-border);
  border-radius: 0;
}

.atlas-chat__composer input {
  height: 42px;
  padding: 0 18px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: var(--wv-text);
  font-size: 14px;
}

.atlas-chat__composer input::placeholder {
  color: #7b8494;
}

.atlas-chat__composer input:focus {
  border-color: var(--wv-brand);
  box-shadow: 0 0 0 3px var(--wv-focus);
}

.atlas-chat__composer button {
  min-height: 42px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.atlas-chat__composer .atlas-chat__send {
  background: var(--wv-green-pastel);
}

.atlas-chat__composer .atlas-chat__new {
  background: var(--wv-purple-pastel);
}

.atlas-chat__composer .atlas-chat__stop {
  background: #ffffff;
  color: var(--wv-muted);
  border: 1px solid var(--wv-border-strong);
}

.atlas-chat__composer .atlas-chat__send:hover:not(:disabled) {
  background: var(--wv-green-pastel-hover);
}

.atlas-chat__composer .atlas-chat__new:hover:not(:disabled) {
  background: var(--wv-purple-pastel-hover);
}

.atlas-chat__composer button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 20px -18px rgba(16, 24, 40, 0.45);
}

.atlas-chat__table {
  font-family: inherit;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--wv-border);
  border-radius: 8px;
  overflow: hidden;
}

.atlas-chat__table th {
  background: #eef2f7;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.atlas-chat__table th,
.atlas-chat__table td {
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  padding: 9px 11px;
}

.atlas-chat__table tbody tr:nth-child(even) td,
.atlas-chat__table tbody tr:nth-child(even) td:first-child {
  background: #f8fafc;
}

.atlas-chat__table th:first-child,
.atlas-chat__table td:first-child,
.atlas-chat__table th:first-child {
  background: inherit;
  box-shadow: 1px 0 0 var(--wv-border);
}

.atlas-chat__table th:first-child {
  background: #eef2f7;
}

.trending_topics_table {
  width: 100% !important;
  max-width: 560px;
  height: auto;
  table-layout: fixed;
  border: 1px solid var(--wv-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  overflow: hidden;
}

.trending_topics_table tbody tr,
.trending_topics_table tbody tr:nth-of-type(odd) {
  background: #ffffff;
}

.trending_topics_table tbody tr:nth-of-type(even) {
  background: #f8fafc;
}

.trending_topics_table tbody tr:hover {
  background: #f3f5f8;
}

.trending_topics_table td {
  padding: 7px 10px;
  border-bottom: 1px solid #e5e7eb;
  color: var(--wv-text);
  font-size: 12px;
  font-style: normal !important;
  line-height: 1.2;
  vertical-align: middle;
}

.trending_topics_table tr:last-child td {
  border-bottom: 0;
}

.trending_topics_table td:nth-child(1),
.trending_topics_table td:nth-child(3) {
  width: 30px;
  color: #374151;
  font-weight: 500;
  text-align: center;
}

.trending_topics_table td:nth-child(2),
.trending_topics_table td:nth-child(4) {
  width: calc(50% - 30px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.trending_topics_table a {
  display: inline-block;
  max-width: calc(100% - 22px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: -3px;
  white-space: nowrap;
  color: var(--wv-text);
  font-style: normal;
  font-weight: 500;
  text-decoration: none;
}

.trending_topics_table a:hover {
  color: #000000;
  text-decoration: underline;
}

.trending_topics_table img {
  width: 13px;
  height: 13px;
  margin-left: 4px;
  vertical-align: -1px;
  opacity: 0.78;
}

.trending_topics_table img:hover {
  opacity: 1;
}

@media (max-width: 900px) {
  .atlas-chat {
    width: 100%;
    padding: 0;
  }

  .atlas-chat__panel {
    min-height: 0;
    border-radius: 8px;
  }

  .atlas-chat__header,
  .atlas-chat__body,
  .atlas-chat__composer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .atlas-chat__header {
    align-items: flex-start;
  }

  .atlas-chat__session-meta {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .atlas-chat__quick {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  .atlas-chat__quick-chip {
    flex: 0 0 auto;
  }

  .atlas-chat__composer {
    flex-direction: column;
    align-items: stretch;
  }

  .atlas-chat__composer input,
  .atlas-chat__composer button {
    width: 100%;
  }
}