*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100dvh;
  margin: 0;
  padding: 0;
}

/* Global Colors */
:root {
  --red: #D82E42;
  --gop-red: #da1f2c;
  --alert-red: #ff0000;
  --dark-red: #9D3832;
  --orange: #ff8000;
  --burnt-orange: #c76400;
  --blush: #f2dcda;
  --pastel-pink: #ffecea;
  --dusty-pink: #ebdbda;
  --blue: #104DD5;
  --bright-yellow: #ffff00;
  --pale-yellow: #ededd3;
  --green: #4F9B27;
  --mint-green: #d3edd3;
  --pastel-green: #e0f7e0;
  --med-green: #3b7d18;
  --dark-green: #26570d;
  --med-violet: #7e1f7e;
  --brown: #6c4a1a;
  --dark-slate: #565B67;
  --slate: #7a8296;
  --light-slate: #c1c6d5;
  --grey-med: #555;
  --grey-light: #888;
  --grey-lighter: #AAA;
  --black: #000;
  --white: #fff;
  --pastel-blue: #d7f2ff;
  --dusty-blue: #d3e1e7;
  --light-blue: #aad3dd;
  --sky-blue: #1c5ec1;
  --sea-blue: #0e2a9d;
}

.color-red {
  color: var(--alert-red);
}

.color-green {
  color: var(--med-green);
}

.color-grey {
  color: var(--grey-lighter);
}

.color-black {
  color:#000000;
}

.cursor-pointer:hover {
  cursor: pointer;
}

.webixappstart {
  opacity: 0;
}
.webixapp {
  transition: opacity 500ms;
  opacity: 1;
}

.right-align {
  text-align: right !important;
}

.top_toolbar {
  /* background-color: var(--gop-red);
  color: var(--white); */
}
.logo {
  background: url("../media/utgop_logo_red_40.webp") 2px 0px  no-repeat;
}

.logo .webix_template {
  padding: 7px 0 0 50px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--gop-red);
}

.webix_header.webix_dark .webix_template {
  text-align: center;
  line-height: 56px;
}
.avatar .mainphoto {
  border-radius: 25px;
  widows: 40px;
  height: 40px;
  position: relative;
  top: -4px;
}
.status {
  position: relative;
  top: -25px;
  left: 25px;
  font-size: 10px !important;
  text-shadow: -1px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff;
}

.highlight {
  background-color: #eee;
}
.highlight-blue {
  background-color: #6cd7f0;
}
.no-cps {
  background-color: var(--blush);
}
.other-party {
  color: #777;
  background-color: #ddd;
}

/* headers (templates) */
.webix_view.chart_header {
  text-align: center;
}
/* transactions grid */
.method {
  margin-bottom: -8px;
}
/* features grid */
.header_center,
.column_center {
  text-align: center;
}
.feature.webix_icon.wxi-plus-circle {
  color: #55CD97;
}
.feature.webix_icon.wxi-minus-circle {
  color: #DADEE0;
}
/* widgets grid */
.yellow {
  color: #FDBF4C;
}
.green {
  color: #55CD97;
}
.blue {
  color: #1CA1C1;
}
.custom_dark {
  background: var(--dark-slate);
  font-size: 18px;
  color: #ffffff;
  font-weight: normal;
  letter-spacing: 1px;
  text-align: center;
}
.custom_dark .webix_template {
  line-height: 55px;
}
/* forms */
.radio_demo .webix_radio_option {
  margin-bottom: 20px;
}
.webix_view.form_photo > div {
  padding: 0px;
}
/*pivot*/
.webix_pivot_configure_toolbar .webix_el_label .webix_el_box,
.webix_pivot_configure_toolbar .webix_el_label {
  margin-right: 5px;
  overflow: visible;
}

.data_table_header_top {
  line-height: 35px !important;
}

.webix_win_head .webix_view {
  background: var(--dark-slate);
  color: #fff;
}

.webix_layout_toolbar.grey-toolbar {
  background: var(--slate);
  color: #fff;
}
.webix_layout_toolbar.grey-toolbar .webix_header {
  background: var(--slate);
  color: #fff;
}
.webix_layout_toolbar.grey-toolbar .webix_icon {
  color: var(--light-slate);
}
.webix_layout_toolbar.grey-toolbar .webix_icon_button:hover:before {
  background-color: var(--dark-slate);
}

.webix_header.modal-header {
  background: var(--slate);
  color: #fff;
}

.webix_header.red-header {
  background: var(--dark-red);
  color: #fff;
}

.webix_property .webix_property_label {
  background-color: #ddd;
}
.webix_property .disabled .webix_property_label {
  background-color: #d4d0d0;
}
.webix_property .disabled .webix_property_value {
  background-color: #f4eeee;
}
.webix_property .disabled .webix_property_value input[type="checkbox"] {
  pointer-events: none;
  opacity: 0.6;
}
.webix_property .highlight-empty .webix_property_value:empty {
  background-color: #ffeeee;
  border: solid 1px var(--alert-red);
}

.webix_control.highlight-empty select {
  background-color: #ffeeee;
  border: solid 1px var(--alert-red);
}
.webix_control select:invalid {
  background-color: #ffeeee;
  border: solid 1px var(--alert-red);
}

.webix_button {
  border-radius: 8px;
}

.check-cell .webix_cell {
  text-align: center;
}

/* Style read-only property elements */
.webix_property .webix_property_line.prop-read-only .webix_property_value {
  background-color: #eee;
}

.textarea_label label {
  padding-left: 15px;
}

.webix_dtable .webix_column.photo_cell > .webix_cell {
  background-image: url(/media/people/no_photo_36.webp);
  background-size: 36px 36px;
  background-repeat: no-repeat;
  background-position: center;
}

.webix_cell.over, .webix_dtable .webix_column>div.webix_cell.over.webix_row_select {
    background-color: pink;
}

.thincol.webix_column .webix_cell, .webix_hcolumn .thincol.webix_hcell,
.thincols .webix_column .webix_cell, .thincols .webix_hcolumn .webix_hcell {
  padding: 0 5px;
}

.verified {
  background-color: var(--mint-green);
}
.unverified {
  background-color: var(--blush);
}
.verify-ready {
  background-color: var(--pale-yellow);
}
.role-error {
  background-color: var(--pastel-pink);
}
.role-warning {
  background-color: var(--pale-yellow);
}

.photo_prompt {
  width: 450px;
}

.notes {
  font-size: 0.75em;
}

.controlFix select, .controlFix input {
  margin-right: 0;
}

.controlRequired {
  background: var(--blush);
}

.controlRequired label {
  color: var(--dark-red);
}

/* User forms */
.pw_reqs {
  background-color: #ddeeff;
}
.pw_reqs .webix_template {
  margin: 8px 0 -8px 0;
}
.pw_msgs {
  background-color: #fafadd;
}
.pw_msgs .webix_template {
  margin: 8px 0 -8px 0;
}
.webix_property_line.pw_invalid .webix_property_label, .pw_invalid .webix_property_label:focus {
  color: #FF5C4C;
  background-color: #ffdedb;
  /* border-color: #ff8d82; */
}
.webix_property_line.pw_valid .webix_property_label, .pw_valid .webix_property_label:focus {
  color: #278326;
  background-color: #caeaca;
  /* border-color: #57b656; */
}

/* Delegate Card */
.delegate-card, .role-card {
  display: inline-block;
  border: 1px solid var(--grey-light);
  border-radius: 10px;
  margin: 0.5em;
  padding: 1em;
  text-align: center;
  font-size: 16px;
}
.delegate-name, .role-name {
  font-size: 1.25em;
  font-weight: bold;
}
.delegate-title, .role-title {
  text-transform: uppercase;
  letter-spacing: 1px;
}
.delegate-precinct, .role-precinct {
  font-size: 1.125;
}

.result_images .webix_dataview_item {
  padding: 1px;
}

/* Precinct Role Tiles */
.webix_dataview.prec_tiles {
  border: none;
}
.webix_dataview.prec_tiles .webix_dataview_item {
  border-color: revert;
  border: none;
  padding: 6px 6px 6px 6px;
}
.tile {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding: 0.5em 1em;
  background-color: white;
  border: 1px solid var(--grey-light2);
  box-shadow: rgba(0,0,0,0.1) 0 2px 5px;
  border-radius: 12px;
  line-height: 18px;
}
.prec_tiles div.tile.saving {
  background-color: var(--bright-yellow);
}
.prec_tiles div.tile.removing {
  background-color: var(--alert-red);
}
.tile .tile_icon {
  position: absolute;
  right: 14px;
}
.tile.vacant .tile_icon {
  color: var(--grey-lighter);
}
.tile.partial .tile_icon {
  color: var(--orange);
}
.tile.unverified .tile_icon {
  color: var(--alert-red);
}
.tile .tile_icon:hover:after {
  position: absolute;
  z-index: 1;
  right: 4px;
  top: 2px;
  padding: 4px 6px;
  background-color: var(--white);
  border-radius: 6px;
  box-shadow: rgba(0,0,0,0.1) 0 2px 4px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  color: var(--grey-light);
  white-space: nowrap;
}
.tile.vacant .tile_icon:hover:after {
  content: "Add Person";
  border: solid 1px var(--grey-lighter);
}
.tile.partial .tile_icon:hover:after {
  content: "Missing Data";
  border: solid 1px var(--orange);
}
.tile.unverified .tile_icon:hover:after {
  content: "Unverified";
  border: solid 1px var(--alert-red);
}
.tile.complete .tile_icon {
  color: var(--med-green);
}
.tile_role {
  font-weight: 600;
}
.webix_drag_zone {
  background-color: rgba(0,0,0,0);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.prec_leaders .tile { background-color: var(--pastel-green); }
.prec_sd .tile { background-color: var(--pastel-pink); }
.prec_sd .tile.alt { background-color: var(--dusty-pink); }
.prec_cd .tile { background-color: var(--pastel-blue); }
.prec_cd .tile.alt { background-color: var(--dusty-blue); }

.prec_tiles .tile.vacant {
  background: white;
}

/* Tabbar */
.webix_all_tabs .webix_item_tab {
  border-radius: 10px 10px 0 0;
}
.webix_all_tabs .webix_item_tab.webix_selected {
  color: var(--white);
  background-color: var(--sky-blue);
  box-shadow: none;
}
.webix_all_tabs .webix_item_tab.webix_selected:hover {
  color: var(--white);
  background-color: var(--sea-blue);
}
.webix_all_tabs .webix_item_tab.webix_selected:focus {
  color: var(--white);
  background-color: var(--sea-blue);
}

.webix_item_tab_text .mdi {
    color: var(--light-blue);
}
.webix_item_tab_text .mdi:hover {
    color: var(--white);
}

.pp_test_btn {
  border-radius: 5px;
  padding: 4px 8px;
  background-color: #DDE;
  margin-left: -4px;
}
.pp_test_btn:hover {
  color: #fff;
  background-color: #77C;
}

.pp_link_btn {
  border-radius: 5px;
  padding: 4px 8px;
  background-color: #EDD;
  margin-left: -4px;
}
.pp_link_btn:hover {
  color: #fff;
  background-color: #C77;
}

.pp_tree_btn {
  border-radius: 5px;
  padding: 4px 8px;
  background-color: #DED;
  margin-left: -4px;
}
.pp_tree_btn:hover {
  color: #fff;
  background-color: #6A6;
}

.pp_green, .pp_green:hover {
  background-color: #6B6;
}
.pp_red, .pp_red:hover {
  background-color: #C66;
}

.webix_cell.fade_row {
  opacity: 0.4;
}

.condensed-font .webix_hcell, .condensed-font .webix_cell {
  font-family: 'roboto condensed';
  font-size: 13px;
}

/* Photo cropper */
#upload_block {
    position: relative;
}
#crop_img {
  display: block;
  max-width: 100%;
  max-height: 800px;
}
#guide {
    position: absolute;
    top: 0;
    pointer-events: none;
}

.caucus_docs .webix_dataview_item {
  padding: 0;
  position: relative;
  border-bottom: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
}
.caucus_docs .webix_dataview_item::before {
  position: absolute;
  top: 1px;
  left: 1px;
  text-shadow: black 0 2px 5px;
}
.docType1::before {
  content: "🗳️";
}
.docType2::before {
  content: "📄";
}
.docType3::before {
  content: "📸";
}

/* Rules for sizing the icon. */
.mdi.md-7 { font-size: 7px; }
.mdi.md-8 { font-size: 8px; }
.mdi.md-9 { font-size: 9px; }
.mdi.md-10 { font-size: 10px; }
.mdi.md-12 { font-size: 12px; }
.mdi.md-14 { font-size: 14px; }
.mdi.md-16 { font-size: 16px; }
.mdi.md-18 { font-size: 18px; }
.mdi.md-21 { font-size: 21px; }
.mdi.md-24 { font-size: 24px; }
.mdi.md-30 { font-size: 30px; }
.mdi.md-36 { font-size: 36px; }
.mdi.md-42 { font-size: 42px; }
.mdi.md-48 { font-size: 48px; }
.mdi.md-54 { font-size: 54px; }
.mdi.md-60 { font-size: 60px; }
.mdi.md-66 { font-size: 66px; }
.mdi.md-72 { font-size: 72px; }