/**********************************/
/**                              **/
/**    BFH GLOBAL DEFINITIONS    **/
/**                              **/
/**          HDC V1.0            **/
/**                              **/
/**********************************/

html {
  color: rgba(53,53,53,1)!important;
  font-size: 1em;
  line-height: 1.4;
  font-kerning: normal;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--grauwert5);
  overflow-x: hidden;
}
::selection, ::-moz-selection {
  background: var(--grauwert3);
  text-shadow: none;
}

:root{
  --primary: var(--grau); /* rgb(105,125,145); */
  --secondary: rgb(250,165,0);
  --btn-secondary: rgb(220,220,220);
  --hover: rgb(255,203,62);
  --grau: rgb(75,100,125);
  --grauwert1: rgb(100,120,139);
  --grauwert2: rgb(162,174,185);
  --grauwert3: rgb(193,201,209);
  --grauwert4: rgb(224,228,232);
  --grauwert5: rgb(239,241,243);
  --grauwert6: rgb(244,245,248);
  --dunkelgrun: rgb(82,111,87);
  --redaction: rgb(200,200,200);
  --submitted: rgb(250,215,90);
  --validation: rgb(255,165,0);
  --validated: var(--primary);
  --reviewed: rgb(255,165,0);
  --finished: rgb(105,150,115);
  --bs-btn-active-color: var(--grau);
  --bs-btn-active-border-color: var(--grau);
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}
canvas{
  width: 100%;
  height: 100%;
  z-index:-1;
}

/* Tags for the diff view */
ins {
  display: inline-block;
  background-color: #D6FFCA;
  text-decoration: none;
}

del {
  display: inline-block;
  background-color: #FFCACA;
}

/**  Utils Definitions  **/

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
.noselect { 
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
} 
.hidden {
    display: none !important;
}
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  -webkit-clip-path: none;
  clip-path: none;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit;
}
.invisible {
  visibility: hidden;
}
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.errorlist {
  background-color: yellow;
  list-style: none;
  padding: 5px 10px;
}
section.container-fluid{
  padding-left: 15px;
  padding-right: 15px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
/** Links Definition **/

a {
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
}
a:hover, a:focus, button:focus {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
}
a:hover {
  color: var(--secondary);
  transition: all .15s ease-in-out;
}
#log_vert h1 {
  font-size: 2.5em;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
select {
  padding: 1rem;
  border: 1px solid rgb(220,220,220);
}
ul.no-decoration {
  list-style-type: none;
  padding: 0;
  margin-bottom: 0;
}
form.inline { display: inline-block; }

/**********************/
/**   Login Screen   **/
/**********************/

#login_screen {
  background: url("../img/book_header-4.c1a28eac9933.jpg") no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}
#login_form, #error_form {
  background: rgb(255,255,255);
  padding: 1rem 2rem 2rem 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  min-width: 25%;
  max-width: 50%;
}
#access_form {
  background: rgb(255,255,255);
  padding: 1rem 2rem 2rem 2rem;
}

/** Header **/
#section-lead{
  padding: 20rem 0rem 0rem 0rem;
  margin: 0 0 1rem 0;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  letter-spacing: 0.025rem;
  background: no-repeat center center;
  background-size: cover;
  border-bottom: 8px solid var(--primary);
  border-top: 8px solid var(--primary);
}
#logo_BFH {
  background-color: white;
  padding: 1rem 0 1rem 1rem;
}
#logo_BFH img {
  max-width: 300px;
  width: 100%;
}

/* language switcher */
button[name=language] {
  border: none;
  border-radius: 5px;
  background-color: transparent;
  padding: 2px;
  cursor: pointer;
}
button[name=language].active {
  cursor: default; 
  font-weight: 600;
}
button[name=language]:hover {
  background-color: #eee;
}

/** infos **/
#section_infos {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
#section_infos h1{
  font-size: 1em;
  margin: 0 0 0.5rem 0;
  font-weight: 700;
  color: var(--primary);
}
#section_infos h1:before{
  content: '\2023 ';
  font-size: 2rem;
  margin: 0 0.5rem 0rem 0;
  line-height: 0.1rem;
  color: var(--secondary);
  vertical-align: -350%;
}
section h2:not(#thesis_minipanel2), label.abstract_form, label.first-level{
  margin-top: 0;
  font-size: 1.05em;
  font-weight: 600;
  color: var(--grauwert2);
}
.group-panel{
  padding: 1rem;
  background: white;
}
.panel {
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.white {
  background: white;
}
.grau {
  background-color: var(--grauwert4);
}
.grau-border {
  border: 1px solid var(--grauwert4);
}

/**  Bullet List inline  **/
.ul-inline {
  margin: 0;
  list-style-type: none;
  text-align: right;
  font-size: 0.8rem;
}
.ul-inline li {
  display: inline;
}
.ul-inline li:before {
  content: ' | ';
  color: rgb(0 0 0);
}
.ul-inline li:first-child:before {
  content: '';
}
.ul-inline li a {
  color: var(--primary);
  font-weight: 400;
}
#login_infos {
  text-align: right;
  margin: 0 0 0.5rem 0;
  font-size: 0.9em;
}

/**  Footer Definitions  **/
footer {
  margin-top: 2rem;
  background-color: var(--grauwert4);
  border-top: 8px solid var(--primary);
  height: 300px;
  padding-top: 2rem;
  font-size: 1.15em;
}
footer ul{
  list-style-type: none;
  padding: 0;
}
footer ul li{
  font-weight: 700;
}
footer ul li ul li{
  font-weight: 400;
}
/** Footer definitions end **/

.columns {
  column-count: 2;
  column-gap: 2rem;
}
.no-columns {
  margin-bottom: 3rem;
}
.legend {
  font-size: 0.8em;
}

[class*="_ttl"] {
/*   margin: 0 0 0.5rem 0; */
  font-size: 1.2em !important;
  font-weight: 700;
}

/* Msg status / Counters / colors */
.msg {
  text-align: center;
  width: 100%;
}
.status_msg {
  font-size: 1.25rem;
  font-weight: 700;
}
.lastlog_msg, .lastmod_msg, .comments_date {
  text-align: right;
  font-size: 0.8em;
  font-weight: normal;
}
.warning {
  color: orange;
}
.error, .red {
  color: red;
}
.ok {
  color: green;
}
.bold {
  font-weight: 700;
}
.incomplete .student_identification,.incomplete .prof_identification {
  border-left: 8px solid rgb(232,94,108) !important;    
}
#wrkgrp-incomplete {
  display: none;
  margin-right: 0.5rem;
  margin-top: -5px;
}

/**  Forms / Inputs / Submits  **/
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
  width: 100%;
  border: 1px solid var(--grauwert4);
  padding: .75em;
}
input:not([type="checkbox"]):not([type="radio"]):not(.newinputs > *):not([data-dbdp-config]) {
  border-radius: 0.25rem;
  padding: .75em;
  width: 100%;
  border: 1px solid var(--grauwert4);
}
legend{
  font-size: 1em;
}
.newinputs > input[type="text"], .newinputs > input[type="email"],
.newinputs > input[type="password"]{
  padding: 5px 5px 2px 5px;
  border: 0;
  border-bottom: 1px solid rgb(220,220,220);
  margin-bottom: 0.5rem;
  width: 100%;
}
.newinputs > input#id_titre {
  font-size: initial !important;
  font-weight: initial !important;
}
.new-labels {
  font-size: 0.9em;
  color: rgb(130,130,130);
  font-weight: 500;
}
.form-select, .form-control{
  font-size: 1em;
}
/**  buttons  **/
.btn-stack{
  display: flex;
}
.btn{
  align-items: center;
  display: inline-flex;
  font-size: 1em;
  color: white;
  white-space: normal;
  border-radius: 0.5rem;
  justify-content: center;
}
.btn:hover {
  background-color: var(--hover);
}
.btn-primary, .btn-secondary {
  border: 0px solid transparent;
}
.btn-primary{
  --bs-btn-bg: var(--primary);
}
.btn-secondary {
  --bs-btn-bg: var(--btn-secondary);
  color: rgb(80,80,80);
}
.btn-back {
  background: white;
  color: var(--primary);
  padding: 1rem 2rem 1rem 1rem !important;
}
.btn-back svg {
  width: 1.5em;
  height: 1.5em;
  margin-right: .5rem;
}
.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}
.btn-rs {
  margin: 0;
  padding: 0.5rem 1.75rem;
}
.btn.disabled{
  border: 0;
}
[class^="btnicon"]::before {
  display: inline-block;
  content:'';
  left: 20px;
  width: 12px;
  height: 12px;
  padding: 0;
  margin-right: 0.5rem;
}
.btn-act {
  background: transparent!important;
  color: transparent;
}
.btn-act:hover {
  background: var(--hover)!important;
}
.btn-act a {
  display: block;
  width: 24px;
}
a.btnicon_edit::before { 
  background: url("../img/icos/edit.596c86b11b96.png") no-repeat left;
  background-size: contain;
}
.btnicon_edit {
  color: white;
}
button[name='thesis_submit'] {
  width: 100%;
}
.itf {
  background: transparent;
  color: var(--primary);
}
#pdf_actions, #master_actions, #multimedia_actions, #approval_actions {
  display: grid;
  background-color: var(--grauwert4);
  padding: 1rem;
  margin-bottom: 1rem;
}
#pdf_preview img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
}
button#preview, button#preview-paused {
  text-align: center;
  margin-bottom: 1rem;
}
#next_step_warning {
  margin-top: 0.5rem;
  font-style: italic;
  color: red;
}
.btn.disabled, .btn:disabled{
  background-color: var(--bs-gray-200);
  color: var(--bs-gray-500);
  border: 1px solid var(--bs-gray-500);
}
.btn:disabled:hover, .btn.disabled:hover {
  cursor: not-allowed;
  pointer-events: auto !important;
}
/* Thesis comment */
#thesis_submit {
  padding: 0;
  margin: 1rem 0 0 0;
}
#thesis_text {
  padding: 0.75rem;
}
.thesis_comment_submit {
  padding: 1rem;
  font-size: 1.2em;
  font-weight: 700;
  color: rgba(102,102,102,1);
  width: 100%;
  margin: 0;
}
.thesis_comment_submit:hover {
  color: rgb(255,255,255);
  background-color: var(--primary);
}

#comments_container {
  list-style-type: none;
  padding: 0;
}
.comment, .action {
  padding: 1em;
  margin: 1rem auto 0 0;
}
.comment {
  border-radius: .25rem;
  max-width: calc(100% - 1.4em);
  margin-left: 1.4em;
}
.action{
  border-radius: .25rem;
  background: rgba(105,150,115,0.35) !important;
}
.comment:nth-child(2n) {
  background: white;
}
.comment:nth-child(2n+1) {
  background: var(--grauwert4);
}
.comment:before {
  content: '';
  display: block;
  position: absolute;
  left: -1.4em;
  top: 10%;
  z-index: -1;
}
.comment:nth-child(2n):before {
  border-left: 10px solid transparent;
  border-right: 10px solid white;
  border-top: 10px solid white;
  border-bottom: 10px solid transparent;
}
.comment:nth-child(2n+1):before {
  border-left: 10px solid transparent;
  border-right: 10px solid var(--grauwert4);
  border-top: 10px solid var(--grauwert4);
  border-bottom: 10px solid transparent;
}
.step_action{
  color: rgba(105,150,115,1) !important;
  text-transform: uppercase;
    font-weight: 600;
}
.action_user{
  color:black;
  text-transform: initial;
}
.prof_comment + .prof_comment{
  margin-top:1rem;
}
.comment:first-child {
  margin-top: 0;
}

/* end thesis comment */

/* wysiwig editor style */
.note-editor.note-frame {
  border: 2px solid var(--grauwert4);
  border-radius: 0.5rem;
}
.note-editor.note-frame .note-statusbar .note-resizebar {
  height: 18px;
  padding-top: 5px;
}
.note-editor.note-frame .note-statusbar {
  background-color: var(--grauwert5);
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-top: 2px solid var(--grauwert4);
}
.note-btn {
  padding: 0.5rem 1.75rem !important;
  background: var(--primary);
  border: 2px solid var(--grauwert4) !important;
  border-radius: 0.35rem;
}
.note-editable p{
  margin-bottom: 0;
}
.note-editable.card-block {
  padding: 1.5em !important;
}
.note-toolbar {
  background: var(--grauwert5);
  border-bottom: 0 transparent;
}
/* end wysiwig editor style */

/**  Modals  **/
.modal-content {
	border: 0;
}
.modal-backdrop {
  background: var(--grau);
}
.modal-backdrop.show {
  opacity: 0.85;
}
.modal-title, .modal-subtitle {
  margin-top: 0;
  color: var(--primary);
  font-weight: 700;
  line-height: initial;
}
.modal-title {
  font-size: 1.5em;
  text-align: center;
}
.modal-subtitle {
  font-size: 1.15em;
  text-align: left;
}
.modal-header {
 border-bottom: 0;
}
.modal-footer {
  border-top: 0;
}
.modal-validate {
  background: url("../img/validation.0ef6f1b456fa.png");
}
.modal-submit, .modal-revision {
  background: url("../img/submission.c7f614bcd738.png");
}
.modal-validate, .modal-submit, .modal-revision {
  background-size: cover;
  height: auto;
  padding: 1rem 1rem 18.75em 1rem;
  background-repeat: no-repeat;
  background-position-x: center;
}
#confirmbox{
  text-align: center;
}
#slider-indicators{
  border-bottom: 1px solid var(--grauwert3);
  counter-reset: slide-counter;
}
#slider-indicators .carousel-indicators button{
  background-color: var(--grauwert3);
  counter-increment: slide-counter;
  text-indent:initial;
  margin: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  bottom: -100px;
}
#slider-indicators .carousel-indicators button:before{
  content: counter(slide-counter);
  color: white;
  display: inline-flex;
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  font-weight: 700;
  background: transparent;
}
#slider-indicators .carousel-indicators button.active{
  background-color: var(--hover);
}
#slider-indicators .carousel-indicators [data-bs-target] {
    position: relative;
}

/* Filters Table */

#filters_toolbar ul {
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  margin-bottom: 0;
}
#filters_toolbar ul li {
  display: inline-block;
  margin-top: 0.25rem;
}
#filters_toolbar ul li a:hover {
  color: white;
}
span[id^="count"] {
  margin-left: 0.5rem
}
.badge[class*="status-"] {
  min-width: 85px;
  color: white;
  padding: 0.5rem 0.75rem;
}
.status {
  display: none;
}
.status-all {
  background: black;
}
.badge.status-student_prepare {
  background: var(--redaction);
}
.badge.status-mentor_comment, .badge.status-expert_comment, .badge.status-secret_comment {
  background: var(--submitted);
}
.badge.status-finished {
  background: var(--finished);
}
.list_status {
  display: inline-block;
  font-size: 2.5rem;
  letter-spacing: -0.375rem;
}
.list_status.status-student_prepare {
  color: var(--redaction);
}
.list_status.status-mentor_comment, .list_status.status-expert_comment, .list_status.status-secret_comment {
  color: var(--submitted);
}
.list_status.status-finished {
  color: var(--finished);
}
.list-status-cell {
  white-space: nowrap;
  padding-right: 0 !important;
  position: relative;
}
.abstract_locked {
  width: 1.5rem;
  position: absolute;
  left: calc(50% - 0.2rem);
  top: calc(50% - 0.5rem);
}
#back_panel {
  margin-bottom: 1rem;
  padding-top: 1rem;
}
#schedule {
  position: relative;
  background: white;
  margin-bottom: 1rem;
  counter-reset: step-counter;
  padding-top: 1rem;
}
#schedule-bar {
  list-style-type: none;
  padding: .5rem .75rem;
}
#schedule-bar li {
  position: relative;
  padding: 0.5rem;
  background: var(--submitted);
}

#schedule-bar li:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 0.5rem;
  background: rgba(0,0,0,0.15);
  margin-bottom: 1rem;
  left: 0;
  top: 0;
}
.step-number {
  display: block;
  height: 15px;
  font-weight: 700;
}
.step-text {
  display:block;
  padding: 0.5rem;
  margin-top: 0.5rem;
  margin-left: 2.75rem;
  text-transform: uppercase;
  font-size: 0.8em;
  line-height: 0.8rem;
  font-weight: 600;
}
.step-text:before {
  position: absolute;
  left: 0.75rem;
  top: 2.5rem;
  counter-increment: step-counter;
  content: counter(step-counter);
  height: auto;
  font-weight: 700;
  font-size: 5.25em;
  color: white;
}
.step-date {
  margin-left: 2.75rem;
  padding-left: 0.5rem;
  min-height: 2em;
}
[id*="date-input"] {
  font-size: 0.9em;
  padding: 0 0.5rem;
  height: calc(1.75rem + 2px);
  border: 1px solid rgb(220,220,220);
  text-transform: uppercase;
  margin-left: 2.25rem;
  width: 90%;
}
.step_date {
  text-align: right;
  font-size: 700;
}
.inactive {
  background: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.45);
}
.inactive:before > * {
  color: rgba(0,0,0,0.25);
}
.achieved {
  background: rgba(105,150,115,0.55) !important;
  color: rgba(105,150,115,1) !important;
}
.achieved span:before {
  content: url("../img/icos/checked.dd2ce6d5cc67.svg");
  width: 32px;
  top: initial;
}
.expired {
  font-weight: bold;
  color: red !important;
}
.locked span:before{
  content: '';
  background-image: url("../img/icos/locked.d5fa449b4534.svg");
  background-size: contain;
  width: 2.5rem;
  height: 2.5rem;
  background-repeat: no-repeat;
  top: initial;
}
.infos_ttl, label[for='id_comment'] {
  font-size: 1.5em;
  color: var(--primary);
  font-weight: 700;
}
.infos_ttl::after {
  display: flex;
  height: 1rem;
  margin: 0 -1rem .5rem;
  content: '';
  border-bottom: 4px solid var(--grauwert5);
}
.division_ttl{
  font-size: 1.1em !important;
  background: var(--grauwert2);
  padding: 1rem;
  color: white;
}
.division_ttl::before{
  content: '\2023 ';
  font-size: 2rem;
  margin: 0 0.5rem 0rem 0;
  line-height: 0.1rem;
  color: var(--secondary);
  vertical-align: -350%;
}
label.required:before {
  content: '*';
}
label[for='id_department'], label[for='id_filiere'], label[for='id_year'], label[for='id_session'] {
  width: 100%;
}
label.label_template{
  margin-bottom: 0.25rem;
}
#id_department, #id_filiere, #id_year, #id_session {
  width: 100%;
  padding: .375rem .75rem;
  border: 1px solid rgb(220,220,220);
}
.toolbox {
  position: absolute;
  right: 1rem;
  top: .5rem;
}
.toolbox a img {
  margin-left: 0.25rem;    
}
ul.wkf-list {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
  margin-bottom: 0;
}
ul.wkf-list li {
  padding: 1rem;
  background: var(--grauwert5);
}
.alert-warning > .row > .col > div:first-child {
  font-weight: 700;
}
.alert-icon {
  width: 1.5rem;
}
.alert-status {
  background: rgba(255,255,255,.5);
  border-radius: 0.5rem;
  padding: 0.25rem;
}
.dd-handle {
  cursor: move;
}

/** Diff styles **/
.diff-infos{
  background: var(--grauwert4);
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
.diff-mentions{
  margin: 0.5rem 0;
}
.diff-mentions a{
  color: var(--grau);
  font-weight: 700;
}
.diff-mentions a:hover{
  color: var(--secondary);
  font-weight: 700;
}
.diff-comment{
  width: calc(100% - 4em);
  margin: 1em 2em;
  padding: 0.75em;
  font-style: italic;
  background: white;
  border-radius: 0.25em;
}
.diff-comment:before, .diff-comment:after{
  display: inline-flex;
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  content: '';
}
.diff-comment:before{
  background: center / contain no-repeat  url("../img/chevron-left.55b86be6491b.png");
  text-align: left;
  left: 1.5em;
  align-self: start;
}
.diff-comment:after{
  background: center / contain no-repeat  url("../img/chevron-right.4e3da7f5ca12.png");
  text-align: right;
  right: 1.5em;
  align-self: end;
}
.diff-user{
  font-weight: 700;
}
.diff-tip{
  opacity: 1 !important;
  background: var(--grau);
}
.diff-tip > .popover-arrow {
  background-color: transparent !important;
}
.diff-tip > .tooltip-inner >row>button{
  background-color: transparent !important;
}
.diff-tip[data-popper-placement^=top] .popover-arrow::after{
  border-top-color: var(--grau) !important;
}
.diff-tip[data-popper-placement^=bottom] .popover-arrow::after {
  border-bottom-color: var(--grau) !important;
}
.diff-tip[data-popper-placement^=left] .popover-arrow::after {
  border-left-color: var(--grau) !important;
}
.diff-tip[data-popper-placement^=right] .popover-arrow::after {
  border-right-color: var(--grau) !important;
}
.diff-choice{
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0; 
}
.diff-approval, .diff-rejection{
  border: 0;
  cursor: pointer;
  border-radius: 0;
  padding: 0 0.25rem;
  background: transparent;
}
.diff-approval:hover{
  background: var(--approved);
}

.diff-rejection:hover{
  background: var(--rejected);
}
.diff-tip-approved > .tooltip-inner {
  padding: 0.5rem;
  background-color: var(--approved) !important;
  max-width: 300px;
  font-size: 0.95em;
}
.diff-tip-approved[data-popper-placementt^=top] .popover-arrow::after {
  border-top-color: var(--approved) !important;
}
.diff-tip-approved[data-popper-placement^=bottom] .popover-arrow::after {
  border-bottom-color: var(--approved) !important;
}
.diff-tip-approved[data-popper-placement^=left] .popover-arrow::after {
  border-left-color: var(--approved) !important;
}
.diff-tip-approved[data-popper-placement^=right] .popover-arrow::after {
  border-right-color: var(--approved) !important;
}
.diff-tip-rejected > .tooltip-inner {
  padding: 0.5rem;
  background-color: var(--rejected) !important;
  max-width: 300px;
  font-size: 0.95em;
}
.diff-tip-rejected[data-popper-placement^=top] .popover-arrow::before {
  border-top-color: var(--rejected) !important;
}
.diff-tip-rejected[data-popper-placement^=bottom] .popover-arrow::before {
  border-bottom-color: var(--rejected) !important;
}
.diff-tip-rejected[data-popper-placement^=left] .popover-arrow::before {
  border-left-color: var(--rejected) !important;
}
.diff-tip-rejected[data-popper-placement^=right] .popover-arrow::before {
  border-right-color: var(--rejected) !important;
}
.icon-ui, .icon-ui-md{
  display: inline-block;
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
}
.icon-ui{
  width: 2em;
  height: 2em;
}
.icon-ui-md{
  width: 3em;
  height: 3em;
}
.diff-tip-rejected > .tooltip-inner > .icon-ui, .diff-tip-approved > .tooltip-inner > .icon-ui {
  width: 1.5em;
  height: 1.5em;
  margin-top: 0.125em;
  margin-bottom: 0.125em;
}
span.nl {
  user-select: none;
  color: rgb(132, 204, 255);
}

/** Modals svg **/
.checkmark {
  display: none;
  width: 100px;
  margin: 2rem auto;
}
.path {
  stroke-dasharray: 300;
  stroke-dashoffset: 0;
  -webkit-animation-name: load, spin;
  -webkit-animation-duration: 3s, 3s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-name: load, spin;
  animation-duration: 3s, 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50px 50px;
}
.path-complete {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.check {
  stroke-dasharray: 110;
  stroke-dashoffset: -110;
  stroke-width: 0;
}
.check-complete {   
  -webkit-animation: check 1s ease-in forwards;
  animation: check 1s ease-in forwards;
  stroke-width: 15;
  stroke-dashoffset: 0;
}
.fill {
  stroke-dasharray: 285;
  stroke-dashoffset: -257;
  -webkit-animation: spin-fill 3s cubic-bezier(0.700, 0.435, 0.120, 0.600) infinite forwards;
  animation: spin-fill 3s cubic-bezier(0.700, 0.465, 0.120, 0.600) infinite forwards;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50px 50px;
}
.fill-complete {
  -webkit-animation: fill 1s ease-out forwards;
  animation: fill 1s ease-out forwards;
}
@-webkit-keyframes load {
 0% {
  stroke-dashoffset: 300;
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 }
 50% {
  stroke-dashoffset: 0;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 }
 100% {
  stroke-dashoffset: -300;
 }
}
@keyframes load {
 0% {
  stroke-dashoffset: 285;
  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 }
 50% {
  stroke-dashoffset: 0;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 }
 100% {
  stroke-dashoffset: -285;
 }
}
@-webkit-keyframes check {
 0% {
  stroke-dashoffset: -110;
}
 100% {
  stroke-dashoffset: 0;
 }
}
@keyframes check {
 0% {
  stroke-dashoffset: -110;
}
 100% {
  stroke-dashoffset: 0;
 }
}
@-webkit-keyframes spin {
  0% {
  -webkit-transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
  transform: rotate(0deg);
  }
  100% {
  transform: rotate(360deg);
  }
}

@-webkit-keyframes spin-fill {
  0% {
  -webkit-transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(720deg);
  }
}
@keyframes spin-fill {
  0% {
  transform: rotate(0deg);
  }
  100% {
  transform: rotate(720deg);
  }
}

@-webkit-keyframes fill {
  0% {
  stroke-dashoffset: 285;
  }
  100% {
  stroke-dashoffset: 0;
  }
}
@keyframes fill {
  0% {
  stroke-dashoffset: 285;
  }
  100% {
  stroke-dashoffset: 0;
  }
}

.success-resp {
  stroke: rgb(105,150,115);
  transition: stroke .6s;
}

#wait-overlay {
  display: none;
  z-index: 1000;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; left: 0;
  text-align: center;
  background-color: white;
  opacity: 0.8;
}
#wait-overlay #checkmark {
  width: 100px;
  position: absolute;
  top: 45%;
}
#helpers {
  position: fixed;
  right: 0;
  z-index: 10000;
  top: 50%;
  display: flex;
  transform-origin: bottom right;
  transform: rotate(-90deg);
  padding-bottom:0;
}
#helpers ul{
  display:flex;
  list-style-type: none;
  padding:0;
  margin:0;
  flex-direction: row;
}
#helpers li{
  display: inline-flex;
}
#helpers li + li{
  margin-left:0.015rem;
}
#helpers li a{
  font-weight:600;
  color: white;
  padding: 0.5rem 1rem;
  background: var(--primary);
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}
#helpers li a:hover{
  background: var(--hover);
}

/************************/
/**   Media Queries    **/
/************************/

@media (max-width: 575px) {
  body {
    font-size: 0.75rem;
  }
  #section-lead {
    padding: 5rem 0rem 0rem 0rem;
  }
  [class^="btnicon"]::before {
    display: inline-block;
    content:'';
    width: 24px;
    height: 24px;
    padding: 0;
    margin-right: 0;
  }
  .btnicon_edit {
  font-size: 0;
  }
  .template_ttl {
    font-size: 0.9rem !important;
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  body {
    font-size: 0.8rem;
  } 
    .template_ttl {
    font-size: 0.9rem !important;
  }
}
@media (min-width: 992px) {
  body {
    font-size: 0.9rem;
  }
}

@media only screen and (min-width: 1600px) {
  .container {
    max-width: 1520px;
  }
}
@media only screen and (min-width: 1800px) {
  .container {
    max-width: 1720px;
  }
}
@media only screen and (min-width: 1919.9px) {
  .container {
    max-width: 1800px;
  }
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

@media print {
  *, *:before, *:after {
    background: transparent !important;
    color: #000 !important; 
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a, a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after, a[href^="javascript:"]:after {
    content: '';
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr, img {
    page-break-inside: avoid;
  }
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
  h2, h3 {
    page-break-after: avoid;
  }
}