@media all and (min-width: 720px) {
  /* { border: 1px solid red;  placeholder }  */
}

.hide {
  visibility: hidden;
}

#main_timeline {
  overflow: scroll;
}

#svg {
  background-color: whitesmoke  ; 
}
/* highlight scrollbar */
/* Handle 
::-webkit-scrollbar-thumb {
  background: orange; 
  border-radius: 10px;
}
/* Handle on hover
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}
 */

.mmpgroup rect {
  fill: white;
  stroke: black;
  opacity: .7;
}

.block-mapblock-contentmap .mmpgroup p {
  text-align: center;
}

/* group colors */


.active rect {
  fill: rgb(255, 137, 57);
  stroke: rgb(230, 121, 50);
  stroke-width: 2;
}

.inactive rect {
  fill: rgb(112, 207, 213);
  stroke: rgb(89, 164, 169);
  stroke-width: 1;
}

#menu_wrapper .active, .activeGroup {
  background-color: rgb(255, 137, 57)!important;
  border: 1px solid rgb(230, 121, 50); 
}

#menu_wrapper .inactive, .inactiveGroup {
  background-color: rgb(112, 207, 213)!important;
  border: 1px solid rgb(89, 164, 169); 
}


/* mmpSelected hightlights all objects for a group, including box, attacks and relationships */

.mmpgroup.mmpSelected rect {
  fill: mediumslateblue;
  opacity: .9;
}

.mmpgroup foreignObject {
  user-select: none;
}

.mmpgroup foreignObject p {
  font-size: 14px;
  text-align: center;
}

.attack {
  fill: orange;
  stroke: yellow;
}

.attack:hover {
  fill: rgb(233, 68, 13)
}

.timeline {
  fill: white;
  stroke: black;
  marker-end: none;
}

/* default colors for relationship lines and buttons */

label.btn {
  font-size: 16px;
  margin-right: 10px;
  text-align: left;
}
#menu_wrapper .btn {
  border: 1px solid black;
}

.relationship {
  stroke-width: 2px;
}

/*  Relationship colors

https://identity.stanford.edu/design-elements/color/accent-colors/
.Split  - yellow  #FEC51D / #FFE781
.Rival  - red #E04F39 / #F4795B

.Ally  -  plum #620059 / #734675
.Affiliation - green  #279989 /  #59B3A9
.Merger  - blue #009AB4/ #009AB4

*/

.Split, .SplitBtn, label[for="SplitCheckbox"] {
  stroke: #FEC51D;
  background-color: #FFE781;
}

.relationship.Split {
  stroke: #FEC51D; 
  fill: #FEC51D;
}

.Rival, .RivalBtn, label[for="RivalCheckbox"] {
  stroke: #E04F39;
  background-color: #F4795B !important;
}

.relationship.Rival {
  stroke:  #E04F39;
  fill:  #E04F39;
 /* stroke-dasharray: 5, 5; */
}

.Ally, .AllyBtn, label[for="AllyCheckbox"] {
  stroke: #620059;
  background-color: #734675 !important;
  color: white !important;
}

.relationship.Ally {
  stroke: #620059;
  fill: #620059;
 /*  stroke-dasharray: 15, 5; */
}

.Merger, .MergerBtn, label[for="MergerCheckbox"] {
  stroke:  #009AB4;
  background-color:#009AB4 !important; 
}

.Affiliation, .AffiliationBtn, label[for="AffiliationCheckbox"] {
  stroke: #279989;
  background-color:  #59B3A9 !important; 
}


.relationship.mmpSelected {
  stroke-width: 4px;
}

.relationship .clicker {
  fill-opacity: .5;
}

.relationship .clicker:hover {
  fill-opacity: 1;
}

/*  colors for tracing a group */

.relationship.mmpSelected {
  stroke: red;
}

/* legend colors */

#legend_svg {
  overflow: visible;
}

.unTrace {background-color: #ffc107 !important;}
.restoreMap { background-color: #59B3A9 !important;}
.domainReset { background-color: #009AB4 !important;}

.tick line { opacity: .5;}

/*
.legend {
  border: 2px solid gray;
  border-radius: 6px;
  padding: 10px;
}
*/

.legend ul {
  padding-left: 0;
}

button#toList:after {
  content: "\21E9";
  position: relative;
  right: -10px;
}
 

.relationship.off{
  stroke:grey;
}

.attack.off{
  stroke: grey;
}

.displaynone{
  display: none;
}