/* theme: orange */
/*
.ui-widget-header{border:1px solid #e78f08;background:#f6a828 url("lib/images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x;color:#fff;font-weight:bold}
.ui-button .ui-icon {background-image: url("lib/images/ui-icons_ef8c08_256x240.png");}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {color: #eb8f00;text-decoration: none;}
*/

/* theme: black */
/*
.ui-widget-header{border:1px solid #333333;background:#333333 url("lib/images/ui-bg_gloss-wave_25_333333_500x100.png") 50% 50% repeat-x;color:#fff;font-weight:bold}
.ui-button .ui-icon {background-image: url("lib/images/ui-icons_222222_256x240.png");}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {color: #222222;text-decoration: none;}
*/

/* theme: blue */
.ui-widget-header {border:1px solid #4297d7;background:#5c9ccc url("lib/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png") 50% 50% repeat-x;color:#fff;font-weight:bold}
.ui-button .ui-icon {background-image: url("lib/images/ui-icons_228ef1_256x240.png");}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {color: #444;text-decoration: none;}

.icn3d-text {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px!important;}

.ui-dialog { font-size: 12px;}
.ui-dialog .ui-dialog-title { font-size: 16px; height: 18px; }
.ui-dialog .ui-button { width: 12px; height:12px; margin: -5px 0px 0px 0px;}
.ui-dialog .ui-dialog-titlebar { padding: 0px 1em 2px 1em; }

.ui-accordion .ui-accordion-icons { padding-left: 0; text-align: center; }

.icn3d-menu {float:left; width:110px;}
.icn3d-menu-color {color:#1c94c4; font-weight:bold; font-size: 14px!important;}

accordion {font-size: 14px!important; z-index:1999; }
accordion h3 {width: 100px; font-size: 14px!important;}
accordion h3 > .ui-icon { display: none !important; }
accordion ul ul  {width: 160px}
@media screen and (max-device-width: 480px) { 
	accordion ul ul  {width: 110px} 
}
accordion ul ul ul {width: 160px}
accordion ul li {cursor:default!important; white-space:nowrap;}
/*accordion ul .icn3d-link, div .icn3d-link, accordion li input, accordion li label, button {cursor:pointer!important; } */
.icn3d-link, accordion li input, accordion li label, button {cursor:pointer!important; } 
.icn3d-blue {color:blue!important;}

/*.icn3d-dl_sequence {background: white; padding-left:10px;}*/
.icn3d-dl_sequence {background: white;}
.icn3d-highlightSeq {background-color: #FFFF00;}
.icn3d-highlightSeqBox {border:3px solid #FFA500;}

/* used to identify a residue when clicking a residue in sequence*/
.icn3d-residue {font-weight:regular;} 
.icn3d-residueNum {color: green; width:40px!important; text-align:center; white-space:nowrap;}

.icn3d-dl_sequence span {display:inline-block; font-size:11px; width:10px; text-align:center;}
.icn3d-dl_2ddgm {} //{min-width: 150px!important; min-height: 150px!important;}
.icn3d-chemical {width:30px!important;} 
 
button, select, input { font-size: 10px; }

.icn3d-hidden {display: none;}
.icn3d-shown {display: block;}

.icn3d-seqTitle, .icn3d-seqTitle2, .icn3d-annoTitle {display:inline-block; font-size:11px; font-weight:bold; width:60px;}
.icn3d-annotation {white-space: nowrap;}
.icn3d-annotation .icn3d-seqTitle, .icn3d-annotation .icn3d-seqTitle2, .icn3d-annotation .icn3d-annoTitle {display:inline-block; font-size:11px; font-weight:bold; width:120px;}
.icn3d-seqLine {white-space:nowrap;}
.icn3d-annoLargeTitle {font-size:14px; font-weight:bold; background-color: #DDDDDD;}
.icn3d-large {font-size:14px; font-weight:bold;}

.icn3d-dialog {font-family: Verdana, Arial, Helvetica, sans-serif; color: #666666;}
.icn3d-commandTitle  {font-size: 12px; font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; color: #666666;}
.icn3d-modeselection  {color: #f8b84e!important;}
/*.icn3d-viewselection  {color: #800000!important;}*/
.icn3d-viewselection  {color: #f8b84e!important;}

.icn3d-middleIcon {opacity: 1.0}
.icn3d-endIcon {opacity: 0.2}

.icn3d-box {border: solid 1px #ccc; padding: 5px; margin: 5px;}

/* sequence alignent, 'cons' means aligned and conserved, 'ncons' means aligned and not conserved, 'nalign' means not aligned*/
.icn3d-cons {}
.icn3d-ncons {}
.icn3d-nalign {} 

.icn3d-node {cursor:pointer!important; } 
.icn3d-interaction {cursor:pointer!important; } 

/* force-directed graph node text */
.icn3d-node-text0 {font-size: 0px; font-weight: bold}
.icn3d-node-text4 {font-size: 4px; font-weight: bold}
.icn3d-node-text8 {font-size: 8px; font-weight: bold}
.icn3d-node-text12 {font-size: 12px; font-weight: bold}
.icn3d-node-text16 {font-size: 16px; font-weight: bold}
.icn3d-node-text24 {font-size: 24px; font-weight: bold}
.icn3d-node-text32 {font-size: 32px; font-weight: bold}

.ui-dialog .ui-resizable-se {
    width: 14px;
    height: 14px;
    right: 3px;
    bottom: 3px;
    background-position: -80px -224px;
}

.ui-menu-icon {
    float: right;
}

/* toggle button: http://www.w3schools.com/howto/howto_css_switch.asp */
.icn3d-switch {
  position: relative;
  display: inline-block;
  width: 33px;
  height: 18px;
}

.icn3d-switch input {display:none;}

.icn3d-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.icn3d-slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .icn3d-slider {
  background-color: #f8b84e;
}

input:focus + .icn3d-slider {
  box-shadow: 0 0 1px #f8b84e;
}

input:checked + .icn3d-slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

.icn3d-slider.icn3d-round {
  border-radius: 18px;
}

.icn3d-slider.icn3d-round:before {
  border-radius: 50%;
}

/* jquery UI 1.12.1
   for jquery tooltip */
.icn3d-tooltip {
  display: inline-block;
  width: 200px; // 5em;
}

.snptip {
  max-height: 150px;
  overflow:auto;
}

.ui-widget {
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12px!important; // 0.9em is a little too large
}
.ui-menu-item {
  position: relative;
  padding: 3px 1em 3px .4em;
}

.icn3d-clinvar {color:green; font-size:12px; font-weight:bold;}
.icn3d-clinvar-path {color:purple; font-size:12px; font-weight:bold;}

/*.icn3d-sheet {background-image: linear-gradient(transparent, transparent 25%, #FFC800 25%, #FFC800 75%, transparent 75%, transparent 100%);} */
.icn3d-sheet {background-image: linear-gradient(transparent, transparent 25%, #008000 25%, #008000 75%, transparent 75%, transparent 100%);} 
.icn3d-sheet2 {background-image: url("ssimages/trig.png"); background-size: contain; background-repeat: no-repeat;}

.icn3d-sheety {background-image: linear-gradient(transparent, transparent 25%, #FFC800 25%, #FFC800 75%, transparent 75%, transparent 100%);} 
.icn3d-sheet2y {background-image: url("ssimages/triy.png"); background-size: contain; background-repeat: no-repeat;}

.icn3d-helix {background-image: url("ssimages/helix.png"); background-size: contain; background-repeat: no-repeat;}
.icn3d-helix2 {background-image: url("ssimages/helix2.png"); background-size: contain; background-repeat: no-repeat;}

.icn3d-coil {background-image: linear-gradient(transparent, transparent 45%, #6080FF 45%, #6080FF 55%, transparent 55%, transparent 100%);} 
.icn3d-other {background-image: linear-gradient(transparent, transparent 45%, #DDDDDD 45%, #DDDDDD 55%, transparent 55%, transparent 100%);} 

.icn3d-helix-color {color: #FF0080;}

.icn3d-sheet-color {color: #008000;}
.icn3d-sheet-colory {color: #FFC800;}

.icn3d-fixed-pos {position:fixed;}
/*.icn3d-space-title {width:160px; display:inline-block;} */

.icn3d-bkgd {background-color:#eee;}

/* remove the extra bar in the menu */
    /* background: #eee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; */
.ui-widget-content {
    border: 1px solid #ddd;
    background: #eee;
    color: #333;
}

.icn3d-rad > input{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}
.icn3d-rad > input + .ui-icon{ /* IMAGE STYLES */
  cursor:pointer;
  //border:2px solid transparent;
}
.icn3d-rad > input:checked + .ui-icon{ /* (RADIO CHECKED) IMAGE STYLES */
  //border:2px solid #f00;
  background-position: -64px -144px; //ui-icon-check 
}

.ui-menu-icons .ui-menu-item-wrapper, .ui-menu-icons .ui-menu-item {
    padding-left: 0.4em;
}

.icn3d-rad-text, .icn3d-color-rad-text {
    padding-left: 2em;
}

.icn3d-popup {display:none; position:absolute; z-index:9999; top:-1000px; left:-1000px; background-color:#DDDDDD; text-align:center; width:80px; height:18px; padding:3px;}

.icn3d-saveicon, .icn3d-hideicon {cursor:pointer; position:absolute; top:8px; right:20px;}
.icn3d-hideicon {cursor:pointer; position:absolute; top:8px; right:40px;}

.icn3d-border tr th, .icn3d-border tr td {border-right: solid 1px;}

.icn3d-sticky thead th {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    background-color: rgba(255, 255, 255, 1);
    top: 0;
}

.icn3d-sticky tbody th {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    background-color: rgba(255, 255, 255, 1);
    left: 0;
}
  
.icn3d-snplink {text-decoration: underline; cursor:pointer;}

.icn3d-wifi {width:16px; display:inline-block; background-image: url("ssimages/wifi.png"); background-size: contain; background-repeat: no-repeat;}
.icn3d-license {width:16px; display:inline-block; background-image: url("ssimages/license.png"); background-size: contain; background-repeat: no-repeat;}

.color-picker,
.color-picker:before,
.color-picker:after,
.color-picker *,
.color-picker *:before,
.color-picker *:after {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
.color-picker {
  position:absolute;
  top:0;
  left:0;
  z-index:9999;
  width:172px;
}
.color-picker-control {
  border:1px solid #000;
  -webkit-box-shadow:1px 5px 10px rgba(0,0,0,.5);
  -moz-box-shadow:1px 5px 10px rgba(0,0,0,.5);
  box-shadow:1px 5px 10px rgba(0,0,0,.5);
}
.color-picker-control *,
.color-picker-control *:before,
.color-picker-control *:after {border-color:inherit}
.color-picker-control:after {
  content:" ";
  display:table;
  clear:both;
}
.color-picker i {font:inherit}
.color-picker-h {
  position:relative;
  width:20px;
  height:150px;
  float:right;
  border-left:1px solid;
  border-left-color:inherit;
  cursor:ns-resize;
  background:transparent url('color-picker-h.png') no-repeat 50% 50%;
  background-image:-webkit-linear-gradient(to top,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);
  background-image:-moz-linear-gradient(to top,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);
  background-image:linear-gradient(to top,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);
  -webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-size:100% 100%;
  overflow:hidden;
}
.color-picker-h i {
  position:absolute;
  top:-3px;
  right:0;
  left:0;
  z-index:3;
  display:block;
  height:6px;
}
.color-picker-h i:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  display:block;
  border:3px solid;
  border-color:inherit;
  border-top-color:transparent;
  border-bottom-color:transparent;
}
.color-picker-sv {
  position:relative;
  width:150px;
  height:150px;
  float:left;
  background:transparent url('color-picker-sv.png') no-repeat 50% 50%;
  background-image:-webkit-linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,rgba(255,255,255,0));
  background-image:-moz-linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,rgba(255,255,255,0));
  background-image:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,rgba(255,255,255,0));
  -webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-size:100% 100%;
  cursor:crosshair;
}
.color-picker-sv i {
  position:absolute;
  top:-4px;
  right:-4px;
  z-index:3;
  display:block;
  width:8px;
  height:8px;
}
.color-picker-sv i:before,
.color-picker-sv i:after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  display:block;
  border:1px solid;
  border-color:inherit;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
}
.color-picker-sv i:before {
  top:-1px;
  right:-1px;
  bottom:-1px;
  left:-1px;
  border-color:#fff;
}
.color-picker-h,
.color-picker-sv {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-tap-highlight-color:transparent;
}