/***************
 * Base States *
 ***************/

window {
  border-radius: 12px;
  background-image: linear-gradient(#dcdcdc, #dcdcdc);
  background-color: #dcdcdc;
  color: rgba(0, 0, 0, 0.87);
  border: 2px solid #bbd;
  border-style: solid solid solid solid;
}

frame {
  border-style: solid solid solid solid;
}

columview {
  background-image: linear-gradient(#F8F8F8, #F8F8F8);
  background-color: #F8F8F8;
  color: rgba(0, 0, 0, 0.87);
  border: 2px solid #171717;
  border-style: solid solid none solid;
  border-radius: 6px;
}

grid {
  background-image: linear-gradient(#F8F8F8, #F8F8F8);
  background-color: #F8F8F8;
  color: rgba(0, 0, 0, 0.87);
  border-style: none;
}

textview>border {
  background-color: #F8F8F8;
}

.titlebar box {
  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
  border-top: 2px;
  border-width: 2px;
  border-style: none none none none;
  color: rgba(0, 0, 0, 0.87);
  font-weight: bold;
}

.sidebar {
  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
  background-image: linear-gradient(#1D252A, #1D252A);
  border-style: none none none none;
  color: #ffffff;
  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12);

}

.sidebar>row:focus {
  font-weight: bolder;
  color: #ffff00;

}

:link {
  color: #245DDA;
  background-color: transparent;
  text-decoration: none;
}

.close {
  color: #F8F8F8;
  font-size: 28px;
  font-weight: bold;
}

.minimize {
  color: #F8F8F8;
  font-size: 28px;
  font-weight: bold;
}

.maximize {
  color: #F8F8F8;
  font-size: 28px;
  font-weight: bold;
}

.close:hover {
  opacity: 1;
}

.close:focus {
  color: #F8F8F8;
  text-decoration: none;
}

.false {
  color: red;
}

.true {
  color: green;
}

.nothing {
  color: rgba(0, 0, 0, 0.87);
}

image {
  padding: 0px;

}

.parent {
  font-weight: 500;
}

headerbar {
  background-image: none;
  background-color: #2B2B2B;
  font-size: medium;
  border-style: none none none none;
  color: #F8F8F8;
}

/*************
 * Notebooks *
 *************/
notebook>header tab {
  background-image: linear-gradient(#F8F8F8, #F8F8F8);
  transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
  min-height: 24px;
  min-width: 24px;
  padding: 3px 12px;
  border-color: transparent;
  outline: none;
  border-radius: 9px;
  box-shadow: none;
  color: rgba(0, 0, 0, 0.87);
  font-weight: 500;
}

notebook {
  border: 2px solid #171717;
  border-style: none none none none;
  background-color: #F8F8F8;
  border-radius: 9px;
  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
}

notebook>header>tabs>tab {
  background-image: linear-gradient(#F8F8F8, #F8F8F8);
  min-height: 24px;
  min-width: 24px;
  padding-top: 8px;
  margin-bottom: 6px;
  margin-right: 6px;
  padding-bottom: 8px;
  background-color: #F8F8F8;
  color: rgba(0, 0, 0, 0.87);
  font-weight: 600;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 2px 6px 0 rgba(0, 0, 0, 0.12);
}

notebook>header>tabs>tab:hover {
  box-shadow: 0 6px 4px -1px rgba(0, 0, 0, 0.2), 0 6px 3px 0 rgba(0, 0, 0, 0.14), 0 6px 6px 0 rgba(0, 0, 0, 0.12);
}

notebook>header>tabs>arrow:hover {
  box-shadow: 0 6px 4px -1px rgba(0, 0, 0, 0.2), 0 6px 3px 0 rgba(0, 0, 0, 0.14), 0 6px 6px 0 rgba(0, 0, 0, 0.12);
}

notebook>header tab:checked {
  background-image: linear-gradient(#171717, #171717);
  transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: inset 0 0 0 2px #fafbfc;
  background-color: #333333;
  background-clip: padding-box;
  border-style: solid;
  color: #d43c50;
  font-weight: bolder;
  border: 2px solid #171717;
  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
}

/*************
 * Button *
 *************/

button.text-button {
  color: #F8F8F8;
  font-weight: 600;
  background-image: radial-gradient(farthest-side, #333333 0%, rgba(51, 51, 51, 0) 0%);
  background-color: #343d46;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 12px;
}

button.text-button:checked {
  color: #d43c50;
  border-radius: 9px;
}

button.text-button:hover {
  box-shadow: 0 6px 4px -1px rgba(0, 0, 0, 0.2), 0 6px 3px 0 rgba(0, 0, 0, 0.14), 0 6px 6px 0 rgba(0, 0, 0, 0.12);
  outline: none;
}

button.text-button:disabled {
  box-shadow: none;
  background-image: none;
  background-color: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.38);
  filter: none;
  opacity: 1;
}

button.combo {
  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
  min-height: 16px;
  min-width: 16px;
  background-image: none;
  background-color: #F8F8F8;
  outline: none;
}

button.combo:only-child {
  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
  border-radius: 6px;
  font-weight: 550;
  transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: inset 0 0 0 2px #fafbfc;
  background-color: #F8F8F8;
  color: rgba(0, 0, 0, 0.87);
  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
  outline: none;
  border-style: solid;
  border: 2px solid;
}

button.combo:hover {
  box-shadow: 0 6px 4px -1px rgba(0, 0, 0, 0.2), 0 6px 3px 0 rgba(0, 0, 0, 0.14), 0 6px 6px 0 rgba(0, 0, 0, 0.12);
}

button.dropdown {
  background-color: #F8F8F8;
  color: #000;
}

label{
  font-weight: 500;
}
popover.background>arrow,
popover.background>contents {
  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
  padding: 6px;
  background-color: #F8F8F8;
  background-clip: border-box;
  border-radius: 12px;
  color: rgba(0, 0, 0, 0.87);
  border: 2px solid #171717;
}

popover.background modelbutton {
  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
  min-height: 22px;
  min-width: 56px;
  padding: 3px 9px;
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.87);
  font: initial;
  text-shadow: none;
  box-shadow: none;
  background: none;
}

popover.background modelbutton:hover {
  transition: none;
  background-color: #333333;
  color: #F8F8F8;
}

.osd popover.background>arrow,
.osd popover.background>contents,
popover.background.touch-selection>arrow,
popover.background.touch-selection>contents,
popover.background.magnifier>arrow,
popover.background.magnifier>contents,
.osd {
  color: rgba(0, 0, 0, 0.87);
  background-clip: padding-box;
  border-radius: 6px;
  border: none;
}

scrollbar>range>trough>slider {
  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
  min-width: 8px;
  min-height: 8px;
  border: 4px solid transparent;
  border-radius: 9999px;
  background-clip: padding-box;
  background-color: rgba(0, 0, 0, 0.87);
  box-shadow: none;
  outline: none;
}

entry {
  background-image: linear-gradient(gray, gray);
  min-height: 36px;
  padding: 0 8px;
  caret-color: currentColor;
  transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
  background-color: gray;
  color: rgba(0, 0, 0, 0.87);
  outline: none;
}

entry.search {
  background-image: linear-gradient(#343d46, #343d46);
  transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
  background-color: #13576E;
  border-radius: 10px;
  color: white;
  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 0px 2px 2px #343d46;
}

entry:focus-within>text>placeholder {
  opacity: 0;
}

header {
  background-image: linear-gradient(#F8F8F8, #F8F8F8);
  transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
  min-height: 24px;
  min-width: 24px;
  padding: 6px 12px;
  border-width: 1px;
  border-color: transparent;
  background-color: #F8F8F8;
  border-style: none none none none;
  outline: none;
  background-clip: padding-box;
  box-shadow: none;
  color: #171717;
  font-weight: 500;
}


columnview.view>header>button,
treeview.view>header>button {
  text-align: left;
  background-image: linear-gradient(#F8F8F8, #F8F8F8);
  min-height: 0;
  min-width: 0;
  font-weight: bold;
  color: #000;
  background-color: #F8F8F8;
  background-image: none;
  border-style: none none solid none;
  border: 1px solid #333333;
  border-radius: 0;
  border-image: linear-gradient(to bottom, #F8F8F8 20%, rgba(0, 0, 0, 0.11) 20%, rgba(0, 0, 0, 0.11) 80%, #F8F8F8 80%) 0 1 0 0/0 1px 0 0 stretch;
}

columnview.view:selected,
treeview.view:selected {
  border-radius: 0;
  box-shadow: none;
  border: 0px;
}

listview {
  background-image: linear-gradient(#F8F8F8, #F8F8F8);
  background-color: #F8F8F8;
  border-radius: 0px;
}

dropdown>button {
  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
  background-image: linear-gradient(#F8F8F8, #F8F8F8);
  border-radius: 10px;
  border-style: solid;
  border: 2px solid rgba(0, 0, 0, 0.87);
  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
  font-weight: 550;
  color: #000;
}

dropdown>button :only-child {
  font-weight: 600;
  transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
}

listview>row :hover {
  border-style: none none none none;
  outline: transparent;
  background-color: rgba(0, 0, 0, 0);
  font-weight: bolder;
  font-style: oblique;
  transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);

}


popover.background listview>row {
  padding: 4px 8px;
  border: none;
  margin: 0px;
  outline: none;
  border-style: none none none none;
  background-color: transparent;
}

treeview {
  background-image: linear-gradient(#F8F8F8, #F8F8F8);
  border-color: #F8F8F8;
  border-style: solid;
  border-width: 2px;
  border-radius: 12px;
}

columnview {
  background-image: linear-gradient(#F8F8F8, #F8F8F8);
  background-color: #F8F8F8;
  border-color: #F8F8F8;
  color: rgba(0, 0, 0, 0.87);
  border-style: solid;
}

columnview.view.expander,
treeview.view.expander {
  min-width: 16px;
  min-height: 16px;
  -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
  color: rgba(255, 255, 255, 0.7);
}

stack {
  min-width: 16px;
}

viewswitcher {
  min-width: 10px;
  border-radius: 12px;
  font-weight: 900;
}
