/* shared */
.hidden{
  height: 0;
  opacity: 0;
  display: none;
}
.window{
  top: 0;
  left: 100%;
  z-index: 20;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  background-color: var(--bg2);
  transition: left .5s ease;
}
.window.open{
  left: 0;
  display: block;
}
.window .header{
  padding: 1em;
  padding-top: 3em;
  padding-bottom: 2em;
  background-color: var(--bg1);
}
.window .search_bar input{
  background-color: var(--bg2);
}
.window .container{
  z-index: 2;
  padding: 1.5em 1em;
  margin-top: -1.75em;
  background-color: var(--bg2);
  border-radius: 2em 0 0 0;
}
#push_notification_container{
  opacity: 0;
  top: 0.5em;
  right: 0.5em;
  z-index: 300;
  display: grid;
  grid-gap: .5em;
  position: fixed;
  max-width: 20em;
  place-items: center;
  border-radius: 0.5em;
  padding: 0.25em 0.5em;
  transform: translateY(-100%);
  background-color: var(--bg1);
  grid-template-columns: 1.25em 1fr;
  box-shadow: 6px 6px 14px rgb(0 0 0 / 20%);
  transition: transform .35s ease, opacity .35s ease;
}
.cdk-overlay-backdrop,.sweet-overlay{
  top: 0;
  left: 0;
  z-index: 250;
  width: 100%;
  height: 100%;
  position: fixed;
  pointer-events: all;
  /* opacity: .4;
  background: var(--bg4); */
  background-color: rgba(0,0,10,.4);
}
.cdk-overlay-backdrop.cdk-overlay-transparent-backdrop{
  opacity: 0;
  background-color: none!important; 
}
.sweet-alert{
  top: 50%;
  left: 50%;
  z-index: 250;
  padding: 1em;
  max-width: 16em;
  position: fixed;
  text-align: center;
  margin: 0!important;
  border-radius: .5em;
  background-color: var(--bg1);
  box-sizing: border-box;
  transform: translate(-50%,-50%);
  width: calc(100% - 3em)!important;
  width: -moz-calc(100% - 3em)!important;
  box-shadow: 10px 10px 22px 0 rgb(0 0 0 / 10%);
}
.sweet-alert .sa-button-container{
  display: grid;
  grid-gap: .5em;
  direction: rtl;
  grid-template-columns: 1fr 1fr;
}
.sweet-alert h2{
  font-size: 1.2em;
  font-weight: 500;
  margin-bottom: .5em;
}
.sweet-alert p{
  margin-bottom: 1em;
}
.sweet-alert :is(span,input){
  display: none; 
}
.sweet-alert .sa-button-container button{
  border: none;
  padding: .35em .5em;
  font-weight: 500;
  color: #ffffff;
  font-size: inherit;
  text-align: center;
  border-radius: .5em;
  font-family: inherit;
  background-color: var(--color_red);
  background-image: var(--gradient_red);
  width: -webkit-fill-available!important;
  width: -moz-fill-available!important;
}
.sweet-alert .sa-button-container button.confirm{
  background-color: var(--color_blue);
  background-image: var(--gradient_blue);
}
.cdk-overlay-container{
  top: 0;
  left: 0;
  z-index: 230;
  width: 100%;
  height: 100%;
  position: fixed;
  pointer-events: none;
  /* backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px); */
}
.cdk-overlay-pane{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 250;
  position: absolute!important;
  border-radius: .5em;
  background-color: var(--bg1);
  box-sizing: border-box;
  box-shadow: 6px 6px 22px 0 rgb(0 0 0 / 10%);

  min-width: 16em;
  width: fit-content;
  max-width: calc(100% - 3em);
  max-height: calc(100% - 2em);
  width: -moz-calc(100% - 3em)!important;
}
.cdk-overlay-connected-position-bounding-box{
  min-height: unset;
  height: auto!important;
  width: fit-content!important;
}
.cdk-overlay-connected-position-bounding-box .cdk-overlay-pane.mat-tooltip-panel{
  top: unset;
  height: 2em;
  transform: none;
  min-width: unset;
  min-height: unset;
}
.cdk-overlay-container .cdk-global-overlay-wrapper{
  top: 0;
  left: 0;
  z-index: 250;
  width: 100%;
  height: 100%;
  position: fixed;
}
.cdk-overlay-container .mat-dialog-container{
  padding: 0;
  overflow: unset;
  position: relative;
  min-height: 100%;
}
.cdk-overlay-container .btn_close{
  top: 0;
  right: 0;
  width: 1.75em;
  height: 1.75em;
  padding: .45em;
  position: absolute;
  border-radius: 0 .5em;
  background-color: var(--color_red);
  background-image: var(--gradient_red);
}
.btn_close img{
  filter: invert(1) brightness(10);
}
.cdk-overlay-container h2{
  font-weight: 500;
  text-align: center;
  line-height: normal;
  padding: .5em 2em 0 2em;
  overflow: hidden;
  max-height: 1.75em;
  line-height: normal;
  margin-bottom: 0.5em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.cdk-overlay-container h2 .icon{
  margin: 0;
  font-size: 1rem;
  margin-bottom: -.1em;
}
.cdk-overlay-container .btns{
  padding: .5em;
  display: grid;
  grid-gap: .5em;
  grid-template-columns: 1fr 1fr;
}
.cdk-overlay-container .btns :is(p,button){
  border: none;
  padding: .5em;
  font-size: 1rem;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  border-radius: .5em;
  background-color: var(--bg2);
}
.cdk-overlay-container .btns :is(p,button).accept{
  background-color: var(--color_blue);
  background-image: var(--gradient_blue);
}
.btn_add.red,
.btn_form.red,
.icon_box.red,
.cont_btn_side_form.red,
.cont_cont_btn_side_form.red,
.cont_cont_btn_side_form.red .cont_btn_side_form,
.cdk-overlay-container .btns :is(p,button).cancel{
  background-color: var(--color_red);
  background-image: var(--gradient_red);
}
.btn_add.blue,
.btn_form.blue,
.icon_box.blue,
.cont_btn_side_form.blue,
.cont_cont_btn_side_form.blue,
.cdk-overlay-container .btns :is(p,button).blue,
.cont_cont_btn_side_form.blue .cont_btn_side_form{
  background-color: var(--color_blue);
  background-image: var(--gradient_blue);
}
.cdk-overlay-container .tab{
  padding: 0 1em;
  overflow-y: auto;
  max-height: calc(100vh - 14.5em);
}
.tab_title{
  grid-column: -1/1;
  margin-bottom: 0.25em;
  font-weight: 500;
  margin-top: 1.5em;
}
.tab_title:first-child,.tab_title.reduct{
  margin-top: 0;
}
.cdk-overlay-container .tab :is(.grid,.container):not(:last-child) :is(select:last-child,input:last-child,textarea:last-child){
  margin-bottom: .5em;
}
.cdk-overlay-container .tab :is(.grid,.container):last-child :is(select,input,textarea){
  margin-bottom: .5em;
}
.cdk-overlay-container .tab :is(.grid,.container):last-child div:last-child :is(select:last-child,input:last-child,textarea:last-child){
  margin-bottom: 0;
}
.cdk-overlay-container .in_inline{
  display: flex;
  align-items: center;
  margin-bottom: .5em;
}
.cdk-overlay-container .in_inline:last-child{
  margin-bottom: 0;
}
.cdk-overlay-container .in_inline>*{
  margin: 0;
}
.cdk-overlay-container .in_inline>:first-child{
  display: flex;
  margin-right: .5em;
  min-width: fit-content;
}
.mat-select-panel .mat-optgroup-label, .mat-select-panel .mat-option {
  height: unset!important;
  line-height: 1em!important;
  font-size: inherit!important;
}
.mat-select-panel{
  padding: .25em!important;
  min-width: unset!important;
}
.mat-option{
  padding: .25em .5em!important;
  border-bottom: 1px var(--bg2) solid;
}
.mat-option:last-child{
  border-bottom: none;
}
.cdk-overlay-container .mat-tooltip{
  margin: 0;
  padding: .5em;
  font-size: .9em;
  color: var(--bg4);
  max-width: unset;
  border-radius: 0;
  overflow: hidden;
  padding-left: .5em;
  padding-right: .5em;
  text-overflow: ellipsis;
}
.container{
  width: 100%;
  position: relative;
  box-sizing: border-box;
}
.card{
  width: 100%;
  padding: .5em;
  position: relative;
  border-radius: .5em;
  margin-bottom: .15em;
}  
/* .card:last-child{
  margin-bottom: 0;
} */
.special_label{
  /* font-weight: 500; */
  width: fit-content;
  padding: .15em .75em;
  border-radius: .5em;
  display: inline-block;
  font-size: 0.8em!important;
  background-color: var(--color);
  background-image: var(--gradient);
}
.card .special_label:not(.one_liner){
  /* margin-top: .25em; */
}
.card:not(.label) :is(input,select,textarea):not(:disabled){
  background-color: var(--bg1);
}
.card.label{
  border: 1px var(--bg2) solid;
  margin-bottom: -1px;
}
.card.label .special_label{
  background-color: var(--bg2);
}
.card input{
  margin: 0;
}
.icon{
  width: 1em;
	height: 1em;
	display: inline;
  margin: -.1em 0;
	/* opacity: .7; */
  /* margin-right: .35em; */
  /* vertical-align: middle; */
}
.icon.help{
  cursor: pointer;
  padding-bottom: .25em;
  transition: filter .3s ease;
}
.drop_down{
  height: 0;
  overflow: hidden;
  margin-left: 1em;
  /* padding-left: .5em;
  margin-bottom: .5em;
  border-left: 1px var(--bg2) solid; */
}
.drop_down:not(.open){
  display: none;
}
.drop_down.open{
  height: auto;
  /* display: unset; */
  overflow: unset;
}
.btn_more{
  width: 1em;
  height: 1em;
  position: relative;
}
.see_more{
  top: 0;
  right: 0;
  padding: .35em;
  /* font-weight: 500; */
  width: fit-content;
  position: absolute;
  border-radius: .5em;
  align-items: center;
  background-color: var(--color);
    background-image: var(--gradient);
    max-height: -webkit-fill-available;
}
.see_more>p:first-child{
  display: none;
}
.see_more p,
.see_more .btn_more,
.see_more .line{
  pointer-events: none;
}
.btn_more .line{
  top: 50%;
  left: 50%;
  height: 2px;
  position: absolute;
  background-color: var(--bg4);
  width: calc(100% - .25em);
  transform: translate(-50%,-50%) rotate(0);
}
.btn_more.open .line:first-child,
.cont_cont_btn_side_form:not(:disabled):hover .btn_more .line:first-child{
  transform: translate(-50%,-50%) rotate(-180deg)!important;
}
.btn_more .line:last-child{
  transform: translate(-50%,-50%) rotate(90deg);
}
.btn_more.open .line:last-child,
.cont_cont_btn_side_form:not(:disabled):hover .btn_more .line:last-child{
  transform: translate(-50%,-50%) rotate(0)!important;
}
.btn_more.options .line{
  top: 50%;
  left: 50%;
  height: 2px;
  position: absolute;
  background-color: var(--bg4);
  width: calc(100% - .25em);
  transform: translate(-50%,-50%) rotate(0);
}
.btn_more.options .line:nth-child(2){
  transform: translate(-50%,150%) rotate(180deg);
}
.btn_more.options .line:nth-child(3){
  transform: translate(-50%,-250%) rotate(180deg);
}
.btn_more.options.open .line,
.cont_cont_btn_side_form:not(:disabled):hover .btn_more.options .line{
  transform: translate(-50%,-50%) rotate(-225deg)!important;
}
.btn_more.options.open .line:last-child,
.cont_cont_btn_side_form:not(:disabled):hover .btn_more.options .line:last-child{
  transform: translate(-50%,-50%) rotate(45deg)!important;
}
.tab_selector{
  overflow-x: auto;
  padding-right: 1em;
  white-space: nowrap;
  margin-bottom: .5em;
  scroll-behavior: smooth;
  scroll-padding-left: 1em;
  scroll-snap-type: x proximity;
}
.width_fixer{width:32em;}
::-webkit-scrollbar{
  cursor: scroll;
  width: .25em;
  height: .25em;
  display: block;
}
::-webkit-scrollbar:focus{
  cursor: grabbing;
}
::-webkit-scrollbar-track {
    background-color: var(--bg2);
}
::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background-color: var(--color);
    background-image: var(--gradient);
}
.tab_selector p{
  font-weight: 500;
  cursor: pointer;
  padding: 0.15em 0.5em;
  width: fit-content;
  margin-left: 0.5em;
  border-radius: 1.5em;
  background-color: var(--bg2);
  display: inline-block;
  scroll-snap-align: start;
}
.tab_selector p:first-child{
  margin-left: 1em;
}
.tab_selector p.selected{
  background-color: var(--color);
  background-image: var(--gradient);
}
.tab{
  font-size: .9em;
  display: none;
}
.nav_fix_cont{
  font-size: .9em;
}
.tab.open{
  display: block;
}
.tab.open:last-child{
  padding-bottom: 1em;
}
.grid.side1,.grid.side2,.grid.side3{
  display: grid;
  grid-template-columns: 1fr 2em;
}
.grid.side1:not(.separeted)>*:nth-child(1),.grid.side2:not(.separeted)>*:nth-child(1),.grid.side3:not(.separeted)>*:nth-child(1){
  border-radius: .5em 0 0 .5em;
}
.grid.side2:not(.separeted)>*:nth-child(2),.grid.side2:not(.separeted)>*:nth-child(2) .checkmark,
.grid.side3:not(.separeted)>*:nth-child(2),.grid.side3:not(.separeted)>*:nth-child(2) .checkmark,
.grid.side3:not(.separeted)>*:nth-child(3),.grid.side3:not(.separeted)>*:nth-child(3) .checkmark{
  border-radius: 0!important;
}
.grid.side1:not(.separeted)>*:nth-child(2),.grid.side2:not(.separeted)>*:nth-child(3),.grid.side2:not(.separeted)>*:nth-child(3) .checkmark,
.grid.side3:not(.separeted)>*:nth-child(4),.grid.side3:not(.separeted)>*:nth-child(4) .checkmark{
  border-radius: 0 .5em .5em 0!important;
}
.grid.side1.separeted>*:nth-child(1){
  border-radius: .5em;
}
.grid.side1.separeted>*:nth-child(2){
  border-radius: .5em!important;
}
.grid.side1.separeted,
.grid.side2.separeted,
.grid.side3.separeted{
  grid-gap: .5em;
}
.grid.side1:not(.separeted),
.grid.side2:not(.separeted),
.grid.side3:not(.separeted){
  margin-bottom: .5em;
}
.filter_container .filter .grid.side1,
.grid.side1 input,
.grid.side2 input,
.grid.side3 input{
  margin-bottom: 0;
}
.grid.side2{
  grid-template-columns: 1fr 2em 2em;
}
.grid.side3{
  grid-template-columns: 1fr 2em 2em 2em;
}
:is(.grid.side1,.grid.side2,.grid.side3) :is(.icon_box,.btn_side_form){
  /* height: 2em; */
  padding: .45em;
  border-radius: .5em;
}
.tab :is(.grid.side1,.grid.side2,.grid.side3) :is(.icon_box,.btn_side_form){
  height: 2em;
}

.tab .tab_selector p{
  padding: .25em .5em;
  /* background-color: var(--bg1); */
}
.tab .tab_selector p.selected{
  background-color: var(--color);
  background-image: var(--gradient);
}
.tab .tab_selector p:first-child{
  margin-left: 0;
}
.tab .tab{
  padding: 0;
  font-size: 1em;
}
.cont_btn_side_form{
  z-index: 3;
  padding: .4em;
  position: relative;
  border-radius: .5em;
  height: 1.85em;
  background-color: var(--color);
  background-image: var(--gradient);
}
:disabled .cont_btn_side_form{
  cursor: default;
  background-color: unset!important;
}
.list_popup_card .card .cont_btn_side_form{
  /* height: unset; */
  height: 100%;
  max-height: 100%;
  border-radius: 0 .5em .5em 0;
}
:is(
  .btn_add,
  .cont_btn_side_form
):disabled{
  color: var(--bg4);
  background-color: var(--bg2);
}
.cont_btn_side_form.disabled{
  background-color: var(--bg2);
  cursor: default!important;
}
.cont_btn_side_form>*:not(.drop_down){
  width: 100%;
  height: 100%;
}
.cont_btn_side_form img{
  width: 1em;
  height: 1em;
}
.cont_btn_side_form .drop_down{
  top: 1em;
  z-index: 2;
  right: .85em;
  position: absolute;
  border-radius: .5em;
  background-color: var(--bg1);
  box-shadow: 5px 5px 14px rgb(0 0 70 / 10%);
}
.cont_btn_side_form .drop_down.open{
  padding: .5em;
}
.cont_btn_side_form .drop_down p{
  font-weight: 500;
  width: max-content;
  line-height: normal;
  margin-bottom: .25em;
  padding-bottom: .15em;
  border-bottom: 1px var(--bg2) solid;
}
.cont_btn_side_form .drop_down p:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.one_liner{
  max-height: 1.2em;
  overflow: hidden;
  line-height: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.one_liner.special_label{
  /* line-height: 1; */
  display: inline;
  max-height: 1.3em;
  width: fit-content;
  vertical-align: text-bottom;
}
.loading_overlay{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* opacity: 0.8; */
  cursor: wait;
  position: fixed;
  z-index: 99999999;
  background-color: var(--bg1);
}
.loading_overlay.transparent{
  background-color: var(--color);
  background-image: var(--gradient);
}
.loading_overlay .container{
  width: 100%;
  max-width: 10em;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%,-50%);
}
.loading_overlay img{
  animation: zum;
  animation-timing-function: ease;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

@keyframes zum{
  0%{transform: scale(0) translateX(150%);opacity:0;}
  10%{transform: scale(1) translateX(10%);opacity:1;}
  89.9%{transform: scale(1) translateX(-10%);opacity:1;}
  99.9%{transform: scale(0) translateX(-150%);opacity:0;}
  100%{transform: scale(0) translateX(150%);opacity:0;}
}
.base_list{
  overflow-y: auto;
}
.list_popup_card{
  z-index: 1;
  min-height: 6em;
  overflow-y: auto;
  font-size: .9em;
  overflow-x: hidden;
}
.list_popup_card .select_overlay{
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  cursor: pointer;
  position: absolute;
  width: calc(100% - 2em);
  border-radius: .5em 0 0 .5em;
}
.list_popup_card .see_more{
  top: 0em;
  right: 2em;
  z-index: 2;
  padding: 0.4em;
  border-radius: 0.5em 0 0 0.5em;
  background-color: var(--color_alt);
}
.list_popup_card>.card:last-child{
  margin-bottom: 0;
}
.list_popup_card>.card:not(.selectable,.onoff){
  z-index: 3;
  padding: .25em 2.5em .25em .5em;
}
.list_popup_card>.card.two_opt:not(.selectable,.onoff){
  padding-right: 3.75em;
}
.list_popup_card>.card.two_opt:not(.label,.selectable,.onoff) .snd_opt{
  right: 2em;
  border-radius: 0;
}
.list_popup_card>.card:hover{
  z-index: 5;
}
.list_popup_card>.card.reactive:hover{
  background-color: var(--color_light);
}
.list_popup_card .card>.cont_cont_btn_side_form{
  top: 0;
  right: 0;
  width: 2em;
  z-index: 10;
  height: 100%;
  /* font-size: 1rem; */
  position: absolute;
  /* transform: translateY(-50%); */
  border-radius: 0 .5em .5em 0;
}
.list_popup_card .card.doubble{
  padding-right: 4.25em;
}
.list_popup_card .card .id{
  font-size: .8em;
}
.list_popup_card .cont_cont_btn_side_form.selectable{
  top: 0;
  right: 2em;
  border-radius: 0;
  position: absolute;
  background-color: var(--bg3);
}
.list_popup_card .cont_cont_btn_side_form.selectable .cont_btn_side_form{
  background-color: var(--bg3);
}
.list_popup_card .cont_cont_btn_side_form:not(.red,.selectable,:disabled){
  /* border-radius: .5em; */
  background-color: var(--color);
  background-image: var(--gradient);
}
.list_popup_card .cont_cont_btn_side_form:disabled{
  background-color: var(--bg3);
}
.cont_cont_btn_side_form{
  padding: 0;
  background: none;
  text-align: left;
  height: fit-content;
}
.cont_cont_btn_side_form.red{
  border-radius: .5em;
}
.cont_cont_btn_side_form:hover{
  z-index: 100;
}
/* .list_popup_card .cont_cont_btn_side_form:hover .drop_down{
  top: unset;
  bottom: -.25em;
  font-size: .9rem;
  transform: none!important;
} */
.cont_cont_btn_side_form:not(:disabled):hover .drop_down{
  height: unset;
  padding: .5em;
  display: block;
  font-size: .9rem;
  opacity: 1;
  right: .85em;
  pointer-events: unset;
}
.card:nth-child(n+9) .cont_cont_btn_side_form:not(:disabled):hover .drop_down{
  top: -2.5em;
}
.grid .cont_cont_btn_side_form:disabled{
  border-radius: .5em;
}
.btn_add{
  /* margin: auto; */
  display: block;
  font-size: 1em;
  font-family: inherit;
  font-weight: 500;
  width: fit-content;
  padding: 0.25em 0.5em;
  margin-bottom: 0.5em;
  border-radius: 1.5em;
  background-color: var(--color);
  background-image: var(--gradient);
}
.card.selectable.one_liner{
  max-height: 2em;
}
.card.selectable{
  padding: 0;
  padding-left: 1em;
  padding-bottom: .35em;
  background-color: none;
  border-bottom: 1px var(--bg2) solid;
}
.card.selectable::before{
  left: 0;
  top: 50%;
  content: '•';
  position: absolute;
  transform: translateY(calc(-.2em - 50%));
}
.card.selectable:last-child{
  border-bottom: none;
}
.card.selectable.label{
  padding: .25em 0 .25em 1em;
}
.card.checkable.onoff{
  padding: 0;
  display: block;
  font-size: 1em;
  cursor: pointer;
  margin-bottom: 0;
  border-radius: 0;
  position: relative;
  /* font-weight: 500; */
  padding: .25em 2.5em .25em 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom: 1px var(--bg2) solid;
}
.card.checkable.onoff:last-child{
  border-bottom: none;
}
.card.checkable.onoff input{
  width: 0;
  height: 0;
  opacity: 0;
  display: none;
  cursor: pointer;
  position: absolute;
}
.card.checkable.onoff .checkmark_bg{
  top: 50%;
  right: 0;
  width: 2em;
  height: 1.25em;
  position: absolute;
  border-radius: .75em;
  transform: translateY(-50%);
  background-color: var(--bg3);
}
.card.checkable.onoff .checkmark{
  top: 50%;
  width: 1em;
  z-index: 2;
  right: .9em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  background-color: var(--bg1);
}
.card.checkable.onoff input:checked ~ .checkmark{
  right: .1em;
}
.card.checkable.onoff input:checked ~ .checkmark_bg{
  background-color: var(--color);
  background-image: var(--gradient);
}
/* pointers */
select,
.icon_box,
.see_more,
.radio_btn,
#hamburger,
.card.selectable:not(.label),
.cont_btn_side_form,
button:not(:disabled),
.cdk-overlay-container .btns p,
.cdk-overlay-container .btn_close,
.cont_btn_side_form .drop_down.open p,
.sweet-alert .sa-button-container button{
  cursor: pointer;
}
/* hovers */
:is(
  .tab_selector p.selected,
  .filter_container .icon_box.search,
  .tab .cont_btn_side_form:not(:disabled,.disabled),
  .filter_container .icon_box:not(.search,.red,.blue),
  .tab .card .cont_cont_btn_side_form:not(:disabled),
  ):hover, .card.checkable.onoff:hover input:checked ~ .checkmark_bg,
  input[type="date"]:hover::before,
  .card.selectable:not(.label):hover .special_label,
  .radio_btn:hover input:checked:not(:disabled) ~ .checkmark,
  input[type="file"]:hover::before,
  input[type="file"]:hover::before
{
  background-color: var(--color_dark);
  background-image: var(--gradient_dark);
}
:is(
  .tab_selector p:not(.selected),
  .mat-paginator .mat-icon-button,
  .mat-paginator .mat-form-field-infix,
  .card.checkable:not(.checked,.label,.onoff,.selectable),
  input:not(:focus,:disabled), select:not(:focus,:disabled), textarea:not(:focus,:disabled)
):hover, .card.checkable:not(.onoff,.label):hover .checkmark,
.card.checkable.onoff:hover .checkmark_bg,
.radio_btn:hover input:not(:disabled) ~ .checkmark{
  background-color: var(--color_light);
  background-image: var(--gradient_light);
}
:is(
  .mat-option-text,
  .card.selectable:not(.label),
  .cont_btn_side_form .drop_down p
):hover,
.card.checkable.onoff:hover p{
  color: var(--color_text);
}
.cont_btn_side_form .drop_down p:hover img{
  filter: brightness(6) sepia(1) saturate(10) hue-rotate(0deg);
}
.card.selectable:hover .special_label{
  color: var(--bg4);
}
:is(
  .btn_add.red:not(:disabled),
  .btn_form.red:not(:disabled),
  .icon_box.red:not(:disabled),
  .cont_btn_side_form.red:not(.disabled,:disabled),
  .cont_cont_btn_side_form.red:not(:disabled),
  .cdk-overlay-container .btn_close,
  .cont_cont_btn_side_form.red:not(:disabled) .cont_btn_side_form,
  .cdk-overlay-container .btns :is(p,button).cancel
):hover{
  background-color: var(--color_red_dark)!important;
}
:is(
  .btn_add.blue:not(:disabled),
  .btn_form.blue:not(:disabled),
  .icon_box.blue:not(:disabled),
  .cdk-overlay-container .btns .accept:not(:disabled),
  .sweet-alert .sa-button-container button.confirm,
  .cont_btn_side_form.blue:not(.disabled,:disabled),
  .cont_cont_btn_side_form.blue:not(:disabled),
  .cont_cont_btn_side_form.blue:not(:disabled) .cont_btn_side_form,
  .cdk-overlay-container .btns :is(p,button:not(:disabled)).blue
):hover{
  background-color: var(--color_blue_dark)!important;
}
.cont_cont_btn_side_form.selectable:hover,
.cont_cont_btn_side_form.selectable:hover .cont_btn_side_form{
  background-color: var(--bg5)!important;
}
/* elementos de form */
label{
  /* font-size: .8em; */
  line-height: normal;
  margin-bottom: .15em;
}
label>s{
  font-weight: bolder;
  color: var(--color_red);
}
input{
  width: 100%;
  min-height: 1em;
  padding: .3em .5em;
  margin-bottom: .5em;
  border-radius: .5em;
  text-transform: uppercase;
  background-color: var(--bg2);
}
input.filled:not(:disabled){
  border-left: var(--color_blue_light) solid .5em;
}
input.red, select.red{
  border-left: var(--color_red_light) solid .5em;
}
input[type="date"]:not(:disabled){
  text-align: left!important;
  color: var(--bg4);
  min-height: 1.85em;
  position: relative;
}
input[type="date"]::before{
  top: 0;
  right:0;
  z-index: 1;
  height: 100%;
  width: 1.95em;
  position: absolute;
  background-color: var(--color);
  background-image: url('../images/date.svg');
  background-repeat: no-repeat;
  background-size: 1.15em;
  background-position-y: center;
  background-position-x: center;
}
.card:not(.label) input[type="date"]::before{
  background-color: var(--bg3);
}
:is(.cdk-overlay-pane,.card) input[type="date"]:not(:disabled){
  z-index: 2;
}
::-webkit-calendar-picker-indicator {
  z-index: 4;
  padding: .3em;
  width: 1.95em;
  height: 1.95em;
  box-sizing: border-box;
  margin: -.3em -.5em -.3em 0;
  background-color: var(--color);
  background-image: var(--gradient);
}
/* ::-webkit-datetime-edit-text { color: var(--color); font-weight: 500;} */
textarea{
  width: 100%;
  border: none;
  font-size: 1em;
  min-height: 5em;
  font-weight: 300;
  border-radius: .5em;
  padding: .3em .75em;
  margin-bottom: 1em;
  box-sizing: border-box;
  background-color: var(--bg2);
  font-family: 'Inter', sans-serif;
}
select{
  width: 100%;
  min-height: 1em;
  color: var(--bg4);
  padding: .3em .5em;
  border-radius: .5em;
  margin-bottom: 1em;
  padding-right: 1.5em;
  background-color: var(--bg2);
}
.cdk-overlay-container .tab .grid:last-child :is(select,input,textarea){
  margin-bottom: 0;
}
.cdk-overlay-container .tab div.grid:last-child :not(:last-child) :is(.side1,.side2,.side3){
  margin-bottom: 0; 
}
:is(input,textarea,select):disabled{
  opacity: 1;
  cursor: default;
  color: var(--bg4);
  padding-left: .5em;
  box-sizing: border-box;
  border-left: .5em var(--bg3) solid;
}
button.icon_box{
  border-radius: .5em;
  background-color: var(--color);
  background-image: var(--gradient);
}
.tab button.icon_box{
  height: 2em;
}
.icon_box img{
  filter: invert(1) brightness(10);
}
.tab button.cont_btn_side_form{
  font-size: .9rem;
}
:is(input,textarea,select):focus{
  background-color: var(--color_light);
}
input[type="date"]:focus::before{
  background-color: var(--color_dark);
  background-image: var(--gradient_dark);
}
input:last-child,textarea:last-child,select:last-child{
  margin-bottom: 0;
}
.btn_form{
  width: 100%;
  border: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 1em;
  padding: .35em .5em;
  place-items: center;
  border-radius: .5em;
  font-family: inherit;
  background-color: var(--color);
  background-image: var(--gradient);
}
.inline_btn_cont{
  display: flex;
  flex-flow: wrap;
  grid-column: -1/1;
}
.inline_btn_cont button{
  margin-right: .25em;
}
button{
  font-size: 1em!important;
  color: inherit;
  border: none!important;
}
.btn_form:not(last-child){
  margin-bottom: 1em;
}
form button:disabled, .btn_form:disabled{
  cursor: default;
  background-color: var(--bg3)!important;
}
input[type="file"]{
  padding-right: 0;
  position: relative;
  padding-left: 6.5em;
  background-color: unset!important;
  text-transform: none;
}
input[type="file"]::-webkit-file-upload-button{
  display: none;
  visibility: hidden;
}
input[type="file"]:before{
  top: 0;
  left: 0;
  border: none;
  outline: none;
  font-size: 1em;
  cursor: pointer;
  font-weight: 600;
  text-shadow: none;
  position: absolute;
  padding: .25em .5em .25em 1.75em;
  white-space: nowrap;
  border-radius: 1em;
  user-select: none;
  text-transform: capitalize;
  -webkit-user-select: none;
  content: 'Arquivo';
  background-color: var(--color);
  background-image: var(--gradient);
}
.file_in_cont{
  position: relative;
  margin-bottom: .5em;
}
.file_in_cont img{
  top: 50%;
  width: 1em;
  left: 0.5em;
  height: 1em;
  pointer-events: none;
  z-index: 2;
  position: absolute;
  transform: translateY(-50%);
}
.form_error_msg{
  font-size: .8em;
  font-weight: 500;
  margin-bottom: .5em;
  color: var(--color_red);
  text-transform: capitalize;
}
.form_error_msg:blank,.form_error_msg:empty, .form_error_msg:-moz-only-whitespace{ display: none; }
/* main stuff */
main{
  padding-bottom: 3em;
}
.controls{
  padding: 1em;
}
.filter_container>*{
  margin-bottom: .5em;
}
.filter_container .icon_box{
  border: none;
  font-size: 1em;
  font-weight: 500;
  box-sizing: border-box;
  width: calc(50% - .25em);
  padding: .45em;
  border-radius: .5em;
  display: grid;
  place-items: center;
}
.filter_container .icon_box:not(.red){
  background-color: var(--color);
  background-image: var(--gradient);
}
.filter_container .icon_box.search{
  background-color: var(--color);
  background-image: var(--gradient);
}
.filter_container .icon_box:last-child{
  margin-left: .5em;
}
.filter_container .inputs_container .icon_box{
  width: 1.85em;
  height: 1.85em;
  margin-left: 0;
}
.filter_container .inputs_container .grid.side1{
  grid-template-columns: 1fr 2em;
}
.filter_container .icon_box img{
  width: 1em;
  height: 1em;
  /* margin-right: .5em; */
  display: inline-block;
}
.filter_container .icon_box s{
  color: var(--bg4);
}
.filter_container .filter{
  margin-bottom: .5em;
}
.filter_container .filter input{
  margin-bottom: 0;
}
.filter_container .filter:last-child{
  margin-bottom: 0;
}
/* adiconal filter shenanigans */
section.adicional_filter{
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
}
.adicional_filter :is(input,select,textarea){
  margin-bottom: 0;
}
.adicional_filter{
  display: none;
  padding: 0;
  font-size: .9rem;
  grid-gap: .5em;
  grid-column-gap: .75em;
  margin-bottom: .5em;
  margin-top: .5em;
}
.adicional_filter.open{
  display: grid;
}
.adicional_filter .side1, 
.adicional_filter .side2,
.adicional_filter .side3,
.adicional_filter input{
  margin-bottom: 0;
}
.filter_btn{
  position: relative;
}
.filter_container .filter_btn{
  width: 2em;
  margin-left: .5em!important;
  position: relative;
}
.filter_btn .btn_more{
  position: absolute;
  bottom: .4em;
  left: .25em;
  width: .65em;
  height: .65em;
}
/* paginator >:c */
.mat-paginator, .mat-paginator *{
  margin: 0!important;
  padding: 0!important;
  height: auto!important;
  min-height: unset!important;
  color: var(--bg4)!important;
  background: none;
  font-family: unset!important;
  font-size: inherit!important;
}
.mat-paginator{
  margin-top: .25em!important;
}
.mat-paginator .mat-paginator-container{
  padding: 0;
  display: block;
  justify-content: unset;
}
.mat-paginator .mat-paginator-container>*, .mat-paginator .mat-paginator-container>*>*{
  margin: 0;
  display: inline-block;
}
.mat-paginator .mat-paginator-container .mat-paginator-range-actions{
  float: right;
  margin-left: .5em!important;
}
.mat-paginator .mat-paginator-range-label{
  margin: 0;
}
.mat-paginator .mat-icon-button{
  width: 1.85em!important;
  height: 1.85em!important;
  cursor: pointer!important;
  line-height: normal;
  background-color: var(--bg2);
}
.mat-paginator .mat-icon-button:nth-child(2){
  border-radius: .5em 0 0 .5em;
  margin-left: .5em!important;
}
.mat-paginator .mat-icon-button:nth-child(3){
  border-radius: 0 .5em .5em 0;
}
.mat-paginator .mat-icon-button.mat-button-disabled{
  opacity: .1;
  cursor: default!important;
  background-color: none!important;
}
.mat-paginator .mat-icon-button span{
  width: 2em!important;
  height: 2em!important;
}
.mat-paginator .mat-icon-button .mat-paginator-icon{
  width: unset;
}
.mat-paginator .mat-paginator-page-size-select{
  width: 5.5em;
}
.mat-paginator .mat-form-field-infix{
  border: 0;
  padding: 0;
  width: auto;
  border-radius: .5em;
  margin-left: .5em!important;
  padding: .25em .5em!important;
  background-color: var(--bg2);
}
/* sections */
section{
  padding: 0 1rem;
  font-size: .8em;
}
section section{
  padding: 0;
  font-size: 1em;
}
section label{
  font-size: 1em;
}
.card:not(.label,.onoff,p,.selectable){
  background-color: var(--bg2);
}
.card.checkable:not(.onoff){
  display: block;
  font-size: 1em;
  cursor: pointer;
  position: relative;
  padding-left: 2em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.card.checkable.label:not(.onoff){
  cursor: default;
  border: 1px var(--bg2) solid;
}
.card.checkable.label .checkmark{
  background-color: var(--bg4);
}
.card.checkable.checked:not(.onoff){
  background-color: var(--color_light);
}
.card.checkable.checked:not(.onoff) .special_label{
  /* color: var(--color); */
  background-color: var(--color_dark);
  background-image: var(--gradient_dark);
}
.card.checkable:not(.onoff) input{
  width: 0;
  height: 0;
  opacity: 0;
  cursor: pointer;
  position: absolute;
}
.card.checkable:not(.onoff,.label) .checkmark_bg{
  top: 50%;
  left: .5em;
  width: 1em;
  height: 1em;
  position: absolute;
  border-radius: .75em;
  /* background-color: var(--bg4); */
  transform: translateY(-50%); 
}
.card.checkable:not(.onoff) .checkmark{
  top: 50%;
  z-index: 2;
  left: .7em;
  width: .75em;
  height: .75em;
  border-radius: 50%;
  position: absolute;
  border: 1px var(--bg4) solid;
  transform: translateY(-50%);
}
.card.checkable:not(.onoff,.label) .checkmark{
  background-color: var(--bg2);
}
.card.checkable:not(.onoff) input:checked ~ .checkmark{
  background-color: var(--bg4);
}
.card.checkable:not(.onoff) input:checked ~ .checkable{
  background-color: var(--bg2)!important;
}
.grid.double.always{
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr;
}
.parameters{
  padding: .5em;
  margin-top: 1em;
  border-radius: .5em;
  background: var(--bg2);
}
.tab .parameters{
  margin-top: 0;
}
.parameters .bold{
  font-weight: 500;
}
.parameters>div{
  display: flex;
  align-items: center;
  margin-bottom: 0.25em;
  padding-bottom: 0.25em;
  border-bottom: 1px var(--bg3) solid;
}
.parameters>div:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.parameters>div input, .parameters>div p:nth-child(2){
  padding: 0;
  border: none;
  background: none;
  /* font-weight: 500; */
  width: -webkit-fill-available;
  text-align: right;
}
.parameters>div input:disabled{
  border: none;
}
.parameters>div>label{
  margin: 0;
  min-width: max-content;
}
.parameters>div input:hover{
  background-color: none!important;
  background-image: none!important;
}
.radio_btn{
  margin: 0;
  z-index: 1;
  height: 1.85em;
  display: block;
  padding: .3em 0;
  font-weight: 500;
  position: relative;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.radio_btn input{
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.radio_btn .checkmark{
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  height: 100%;
  position: absolute;
  border-radius: .5em;
  background-color: var(--bg3);
}
.radio_btn input:checked ~ .checkmark{
  background-color: var(--color);
  background-image: var(--gradient);
}
.radio_btn input:checked:disabled ~ .checkmark{
  background-color: var(--bg3);
}
.radio_btn .checkmark:after{
  content: "";
  display: none;
  position: absolute;
}
section .fill_all{
  display: grid;
  grid-column-gap: .5em;
}
footer{
  padding: 1em;
  font-size: .8em;
  text-align: center;
}
/* card styling */
.card .top_right{
  /* float: right; */
  top: .35em;
  right: .5em;
  position: absolute;
}
.card .top_right>p{
  margin-top: 0;
  margin-left: .5em;
  display: inline-block;
}
.card h2,.card h3{
  /* font-weight: 500; */
  font-size: 1em;
}
section>.card{
  height: fit-content;
}
section .card p{
  font-size: .9em;
}
.card .date{
  font-size: .7em;
  /* opacity: .5; */
  /* font-weight: 500; */
}
.card .double{
  width: 100%;
  display: grid;
  grid-gap: .5em;
  grid-template-columns: 1fr 1fr;
}
.card .double.iconed{
  place-items: center;
  grid-template-columns: 1fr 1em 1fr;
}
.card .triple{
  width: 100%;
  display: grid;
  grid-gap: .5em;
  grid-template-columns: 1fr 1fr 1fr;
}
.card .acimetric3{
  width: 100%;
  display: grid;
  grid-gap: .5em;
  grid-template-columns: 3fr 1fr;
}
.card .flex{
  display: flex;
  align-items: center;
}
.card .flex>*{
  margin-right: .5em;
}
.card .flex>*:last-child{
  margin-right: 0;
}
.card .drop_down{
  margin-left: 0;
}
.card .icon_box{
  width: 2em;
  height: 2em;
  padding: .35em;
  max-width: 2em;
  border-radius: .5em;
}
.card .icon_box:not(.red){
  background-color: var(--color);
  background-image: var(--gradient);
}
.card .money{
  /* font-weight: 500; */
  text-align: right;
}
.card .description{
  line-height: normal;
}
.card .tinted{
  /* font-weight: 500; */
  color: var(--color_text);
}

/* colored cards */
.tags{
  grid-row: 1/2;
  grid-column: -1/1;
}
.tags .special_label{
  margin-bottom: .5rem;
}
.tags .special_label:not(:last-child){
  margin-right: .5em;
}
.card .bullet_indicator{
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.5em;
  background-color: var(--color);
  background-image: var(--gradient);
}
.card.label .bullet_indicator{
  background-color: var(--bg2);
}
.card .bullet_indicator.white{
  background-color: var(--bg1);
}
/* purple */
/* .card.purple,.card.checkable.purple .checkmark{
  background-color: var(--color_purple_light);
}
.card.purple:hover,.card.checkable.purple:hover .checkmark{
  background-color: var(--color_purple_dlight);
}
.card.purple.checked.checkable,
.card.purple .special_label,
.special_label.purple,
.card.purple .icon_box{
  background-color: var(--color_purple);
}
.card.purple.checkable.checked:not(.onoff) .special_label, .card.purple s{
  color: var(--color_purple);
}
.card.checkable.purple.checked:not(.onoff):hover{
  background-color: var(--color_purple_dark)!important;
} */
.card.purple .bullet_indicator, .bullet_indicator.purple{
  background-color: var(--color_purple);
}
.tags .special_label.purple{
  background-color: var(--color_purple);
}
/* blue */
/* .card.blue,.card.checkable.blue .checkmark{
  background-color: var(--color_blue_light);
}
.card.blue:hover,.card.checkable.blue:hover .checkmark{
  background-color: var(--color_blue_dlight);
}
.card.blue.checked.checkable,
.card.blue .special_label,
.special_label.blue,
.card.blue .icon_box{
  background-color: var(--color_blue);
}
.card.blue.checkable.checked:not(.onoff) .special_label, .card.blue s{
  color: var(--color_blue);
}
.card.checkable.blue.checked:not(.onoff):hover{
  background-color: var(--color_blue_dark)!important;
} */
.card.blue .bullet_indicator, .bullet_indicator.blue, .special_label.blue{
  background-color: var(--color_blue);
  background-image: var(--gradient_blue);
}
.tags .special_label.blue{
  background-color: var(--color_blue);
  background-image: var(--gradient_blue);
}
input.blue{
  background-color: var(--color_blue_light);
}
input.blue:hover{
  background-color: var(--color_blue_dlight);
}
/* cyan */
/* .card.cyan,.card.checkable.cyan .checkmark{
  background-color: var(--color_cyan_light);
}
.card.cyan:hover,.card.checkable.cyan:hover .checkmark{
  background-color: var(--color_cyan_dlight);
}
.card.cyan.checked.checkable,
.card.cyan .special_label,
.special_label.cyan,
.card.cyan .icon_box{
  background-color: var(--color_cyan);
}
.card.cyan.checkable.checked:not(.onoff) .special_label, .card.cyan s{
  color: var(--color_cyan);
}
.card.checkable.cyan.checked:not(.onoff):hover{
  background-color: var(--color_cyan_dark)!important;
} */
.card.cyan .bullet_indicator, .bullet_indicator.cyan{
  background-color: var(--color_cyan);
}
.tags .special_label.cyan{
  background-color: var(--color_cyan);
}
/* green */
/* .card.green,.card.checkable.green .checkmark{
  background-color: var(--color_green_light);
}
.card.green:hover,.card.checkable.green:hover .checkmark{
  background-color: var(--color_green_dlight);
}
.card.green.checked.checkable,
.card.green .special_label,
.special_label.green,
.card.green .icon_box{
  background-color: var(--color_green);
}
.card.green.checkable.checked:not(.onoff) .special_label, .card.green s{
  color: var(--color_green);
}
.card.checkable.green.checked:not(.onoff):hover{
  background-color: var(--color_green_dark)!important;
} */
.card.green .bullet_indicator, .bullet_indicator.green{
  background-color: var(--color_green);
}
.tags .special_label.green{
  background-color: var(--color_green);
}
/* orange */
/* .card.orange,.card.checkable.orange .checkmark{
  background-color: var(--color_orange_light);
}
.card.orange:hover,.card.checkable.orange:hover .checkmark{
  background-color: var(--color_orange_dlight);
}
.card.orange.checked.checkable,
.card.orange .special_label,
.special_label.orange,
.card.orange .icon_box{
  background-color: var(--color_orange);
}
.card.orange.checkable.checked:not(.onoff) .special_label, .card.orange s{
  color: var(--color_orange);
}
.card.checkable.orange.checked:not(.onoff):hover{
  background-color: var(--color_orange_dark)!important;
} */
.card.orange .bullet_indicator, .bullet_indicator.orange{
  background-color: var(--color_orange);
}
.tags .special_label.orange{
  background-color: var(--color_orange);
}
/* red */
/* .card.red,.card.checkable.red .checkmark{
  background-color: var(--color_red_light);
}
.card.red:hover,.card.checkable.red:hover .checkmark{
  background-color: var(--color_red_dlight);
}
.card.red.checked.checkable,
.card.red .special_label,
.special_label.red,
.card.red .icon_box{
  background-color: var(--color_red);
}
.card.checkable.red.checked:not(.onoff) .special_label, .card.red s{
  color: var(--color_red);
}
.card.checkable.red.checked:not(.onoff):hover,
.sweet-alert .sa-button-container button:not(.confirm):hover{
  background-color: var(--color_red_dark);
} */
.card.red .bullet_indicator, .bullet_indicator.red{
  background-color: var(--color_red);
  background-image: var(--gradient_red);
}
.special_label.red,
.tags .special_label.red{
  background-color: var(--color_red);
  background-image: var(--gradient_red);
}
.card .card:not(.onoff){
  margin: 0;
  z-index: 0;
  margin-top: .25em;
}
.card .card:not(.onoff,.red,.orange,.blue,.green,.purple,.cyan){
  background-color: var(--bg1);
}
.card>.card:not(.onoff):first-child{
  margin-top: 0;
}
.card .card.label{
  border: 1px var(--bg1) solid;
}
.card .card .card:not(.onoff,.label),.card .card:not(.label) .card:not(.onoff,.label):hover{
  background-color: var(--bg2);
}
.card .card .card.label{
  border: 1px var(--bg2) solid;
}
.card:not(.label) .card:not(.onoff,.red,.orange,.blue,.green,.purple,.cyan):hover{
  background-color: var(--bg1);
}
.card.label .card:hover{
  background-color: var(--bg2)!important;
}
/* .card.checkable.checked :is(.tinted,s){
  color: var(--bg1);
} */
/* .card.checkable.checked:not(.onoff) .card{
  color: var(--color);
  background-color: var(--bg4)!important;
} */
.card.label .card{
  background-color: var(--bg2);
}
.card .left_right.always{
  display: flex;
  align-items: center;
}
.card .left_right.always>*:nth-child(1){
  width: 100%;
  line-height: 1.5;
}
.card .left_right.always>*:nth-child(2){
  text-align: right;
  min-width: max-content;
}
.tiny_legend{
  font-size: .6em;
  margin-bottom: -.25em;
  /* font-weight: bolder; */
}
/* relatoios */
.cardr{
  /* border: 1px solid var(--bg2);
  padding: .5em;
  border-radius: .5em; */
  margin-bottom: .5em;
}
.titler{
  margin-top: 1em;
  font-weight: 500;
  margin-bottom: .25em;
}
.titler:first-child{
  margin-top: 0;
}
.cardr b{
  display: inline;
  font-weight: 600;
  /* color: #4b739f;
}
.cardr p{
  color: #000000; */
}
.cardr .money_cont{
  display: flex;
}
.cardr .money_cont p:last-child{
  width: 100%;
  text-align: right;
}
.cardr .spacer{
  width: 100%;
  height: 1px;
  display: block;
  margin: .1em 0;
  background-color: var(--bg2);
}
.cardr .spacer:last-child{
  display: none;
}
.cardr .tiny{
  font-size: .8em;
}
/* nnew cards stuff */
.card.iconed{
  transition: background .3s ease;
  padding-right: 2.5em;
}
/* .card.iconed.inactive{
  background-color: var(--bg3);
} */
.card.iconed:not(.label,.selected,.inactive):hover{
  background-color: var(--color_light);
}
/* .card.iconed.inactive:not(.label,.selected):hover{
  background-color: var(--bg5);
} */
.special_info_cont{
  display: flex;
}
.special_info_cont p:first-child{
  width: 100%;
}
main.tabled .special_info_cont{
  margin-right: .5em;
}
.card.iconed .select_overlay{
  top: 0;
  left: 0;
  z-index: 10;
  height: 100%;
  cursor: pointer;
  position: absolute;
  width: calc(100% - 2em);
}
.card.iconed.selected{
  background-color: var(--color_blue_light);
}
/* .card.iconed.selected.inactive{
  background-color: var(--bg5);
} */
/* .card.iconed.selected s{
  color: #ffffff;
} */
/* .card.iconed.selected .bullet_indicator:not(.red,.blue,.green,.cyan,.orange,.purple){
  background-color: #ffffff;
} */
section .card.iconed .btn_detalhes{
  right: 0;
  bottom: 0;
  width: 2em;
  max-height: 2em;
  height: 100%;
  position: absolute;
  border-radius: .5em;
  background-color: unset;
  transition: background .3s ease;
}
section .card.iconed .btn_detalhes:hover{
  background-color: var(--bg3);
}
/* tabled */
body.tabled::-webkit-scrollbar{
  display: block;
}
.card h3, .card p{
  min-height: 1em;
}
main.tabled .main_listings{
  display: grid;
  grid-template-columns: 1fr;
  overflow-x: auto;
}
main.tabled .main_listings>.card{
  display: grid;
  align-items: center;
  margin-bottom: .15em;
  grid-template-columns: 1fr;
}
main.tabled .main_listings>.card :is(p,h3,h4){
  font-size: 1em;
}
main.tabled .main_listings .label.card .card:not(label),
main.tabled .main_listings div.card .card:not(label){
  margin-top: 0;
  padding: 0;
  background-color: unset!important;
}
main.tabled .main_listings label.card.checkable.checked{
  background-color: var(--color_light);
}
main.tabled .main_listings>.card .money{
  text-align: left;
}
main.tabled .card_only{
  display: none;
}
/* main.tabled .main_listings .card .card *:nth-child(2){
  text-align: right;
} */
main.tabled .card .top_right>*:first-child{
  margin: 0;
}
main.tabled .main_listings .date{
  font-size: 1em;
}
main.tabled .main_listings .card .special_label{
  margin-top: 0;
  padding: 0 .5em;
  max-width: 100%;
}
main.tabled .main_listings .top_right{
  position: static;
}
.nav_fix .tab{
  margin-bottom: 2.5em;
}
.nav_fix .nav_fix_cont{
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: end;
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  padding: 2rem .5rem 4rem .5rem;
}
.nav_fix .fix_info{
  left: 0.5rem;
  display: grid;
  height: 2.5em;
  bottom: 3.15rem;
  padding: 0.5em;
  grid-gap: 0.25em;
  font-weight: 500;
  position: absolute;
  padding-left: 3.5em;
  border-radius: 0.5em;
  place-content: center;
  width: calc(100% - 1rem);
  background-color: var(--color);
    background-image: var(--gradient);
    grid-template-columns: 1fr 1fr;
}
.nav_fix .nav_fix_cont .btn_more{
  left: 0.5rem;
  z-index: 11;
  width: 2.5em;
  height: 2.5em;
  bottom: 3.15rem;
  padding: 0.5em;
  cursor: pointer;
  position: absolute;
  pointer-events: all;
  border-radius: 0.5em;
  background-color: var(--bg4);
}
.nav_fix .nav_fix_cont .btn_more .line{
  pointer-events: none;
  width: 1.5em;
  height: 4px;
  border-radius: 2px;
  background-color: var(--bg1);
}
.nav_fix .nav_fix_cont .drop_down{ 
  height: 0%;
  width: 100%;
  padding: .5em;
  margin-left: 0;
  display: block;
  overflow-y: auto;
  pointer-events: all;
  border-radius: 0.5em;
  padding-top: 0em;
  padding-bottom: 0em;
  background-color: var(--bg1);
  transition: height .5s ease, padding-top .5s ease, padding-bottom .5s ease;
  box-shadow: 5px 5px 14px rgb(0 0 70 / 20%);
}
.nav_fix .nav_fix_cont .drop_down.open{
  height: 100%;
  padding-top: 1em;
  padding-bottom: 1.5em;
}
/* queries */
@media only screen and (max-width: 340px){
  body{
    font-size: .9em;
    min-width: 280px;
  }
  .card>.double:not(.iconed){
    display: block;
  }
  .tab .mat-paginator{
    font-size: .9em!important;
    margin-top: 0.25em!important;
  }
}
@media only screen and (min-width: 600px){
  ::-webkit-scrollbar {
    cursor:pointer;
  }
  ::-webkit-scrollbar{
    width: .5em; 
    height: .5em;
    cursor: grab;
    display: block;
  }
  .cdk-overlay-container .cdk-global-overlay-wrapper .cdk-overlay-pane{
    max-width: 30em;
  }
  .cdk-overlay-container .tab :is(.grid.double,.grid.acimetric3){
    display: grid;
    grid-column-gap: 1em;
  }
  .cdk-overlay-container .tab .grid.double{
    grid-template-columns: 1fr 1fr;
  }
  .cdk-overlay-container .tab .grid.acimetric3{
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
  .cdk-overlay-container .btns{
    margin: auto;
    max-width: 16em;
    /* margin-top: 1em; */
  }
  .controls{
    position: relative;
  }
  .filter_container>*{
    margin-bottom: 0;
  }
  .filter_container{
    display: grid;
    grid-gap: .5em;
    max-width: 20em;
    grid-template-columns: 1fr 1fr;
  }
  .filter_container .inputs_container{
    grid-column: 1/3;
  }
  .filter_container .filter:last-child{
    margin-bottom: 0;
  }
  .filter_container .filter label{
    width: max-content;
  }
  .mat-paginator{
    grid-column: 1/-1;
  }
  section{
    display: grid;
    grid-column-gap: .5em;
    grid-template-columns: 1fr 1fr;
  }
  footer, .fill_all{
    grid-column: 1/-1;
  }
  /* card styling */
  .card .left_right{
    display: flex;
    align-items: center;
  }
  .card .left_right>*:nth-child(1){
    width: 100%;
    align-self: baseline;
  }
  .card .left_right>*:nth-child(2){
    text-align: right;
    min-width: max-content;
  } 
  .list_popup_card .card .id{
    font-size: 1em;
  }
}
@media only screen and (min-width: 840px){
  .filter_container{
    max-width: 28em;
    width: fit-content;
    grid-template-columns: 1fr 1.85em 1.85em;
  }
  .filter_container .filter{
    margin-bottom: 0;
  }
  .filter_container .inputs_container{
    display: flex;
    grid-column: unset;
  }
  .filter_container .filter{
    display: flex;
    margin-right: .5em;
    align-items: center;
  }
  .filter_container .filter *{
    margin-bottom: 0;
  }
  .filter_container .filter:last-child{
    margin-right: 0;
  }
  .filter_container .filter :is(input,select){
    margin-left: .5em;
    width: min-content;
  }
  .filter_container .filter input{
    max-width: 9em;
  }
  .filter_container .icon_box{
    width: 1.85em;
    height: 1.85em;
    padding: .45em;
    border-radius: .5em;
    display: grid;
    place-items: center;
  }
  .filter_btn{
      width: 1.85em;
  }
  .filter_actions{
    margin-left: .5em!important;
  }
  .cdk-overlay-container .cdk-global-overlay-wrapper .cdk-overlay-pane.janela{
    width: calc(100% - 2em);
    height: calc(100% - 2em);
    max-width: calc(1920px - 2em);
    max-height: calc(100% - 2em);
    height: 100%;
  }
  .cdk-overlay-container .cdk-overlay-pane.janela form{
    height: 100%;
  }
  .cdk-overlay-container .cdk-overlay-pane.janela .tab.open{
    display: grid;
    grid-column: 1/-1;
    grid-column-gap: 1em;
    height: 100%!important;
    grid-auto-rows: max-content;
    grid-template-columns: 1fr 1fr;
    max-height: calc(100vh - 10.5em);
  }
  .cdk-overlay-container .cdk-overlay-pane.janela .tab.open .tab.open{
    max-height: unset;
    padding-bottom: 0;
  }
  .cdk-overlay-container .cdk-overlay-pane.janela .list_popup_card input{
    margin: 0;
    padding: 0 0.15em;
  }
  .cdk-overlay-container .cdk-overlay-pane.janela .tab.open.short_tab{
    overflow-y: inherit;
  }
  .cdk-overlay-container .cdk-overlay-pane.janela .parameters,
  .cdk-overlay-container .cdk-overlay-pane.janela .list_popup_card,
  .cdk-overlay-container .cdk-overlay-pane.janela .tab_selector{
    grid-column: 1/-1;
  }
  .janela .list_popup_card>.card:not(.selectable,.onoff){
    padding: .25em 2.5em .25em .5em;
  }
  .janela .card .date{
    font-size: 1em;
  }
  .cdk-overlay-container .cdk-overlay-pane.janela .btns{
    left: 50%;
    bottom: 0;
    position: fixed;
    transform: translateX(-50%);
  }
  .cdk-overlay-container .cdk-overlay-pane.janela .in_inline:not(.always){
    display: block;
    align-items: center;
    margin-bottom: 0; 
  }
  .cdk-overlay-container .cdk-overlay-pane.janela .in_inline:not(.always):last-child{
    margin-bottom: 1em;
  }
  .cdk-overlay-container .cdk-overlay-pane.janela .in_inline:not(.always)>input{
    margin-bottom: .5em;
    margin-right: 0;
  }
  section,
  .cdk-overlay-container .cdk-overlay-pane.janela .tab.open{
    grid-template-columns: 1fr 1fr 1fr;
  }
  .cdk-overlay-container .cdk-overlay-pane.janela .card{
    margin-bottom: .15em;
  }
  .cdk-overlay-container .cdk-overlay-pane.janela .top_right{
    position: static;
  }
  .cdk-overlay-container .cdk-overlay-pane.janela .top_right .special_label{
    margin: 0;
  }
  .cdk-overlay-container .cdk-overlay-pane.janela .money{
    text-align: left;
  }
  .nav_fix .tab{
    margin-bottom: 1em;
  }
  .nav_fix .nav_fix_cont{
    padding: 2rem .5rem 4rem .5rem;
  }
  .nav_fix .nav_fix_cont .drop_down{ 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: .5em;
    grid-auto-rows: min-content;
  }
}

@media only screen and (min-width: 1100px){
  section, .cdk-overlay-container .cdk-overlay-pane.janela .tab.open{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .cdk-overlay-container .cdk-overlay-pane.janela.nav_fix .tab.open{
    margin-right: calc(50% - .5em);
    grid-template-columns: 1fr 1fr;
  }
  .nav_fix .tab{
    margin-bottom: 1em;
  }
  .nav_fix .nav_fix_cont .btn_more{
    bottom: 5em;
  }
  .nav_fix .nav_fix_cont{
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
  }
  .nav_fix .fix_info{
    padding-left: 1em;
  }
  .nav_fix .nav_fix_cont .btn_more{
    display: none;
  }
  .nav_fix .nav_fix_cont .drop_down{ 
    height: 100%;
    padding-top: 1em;
    padding-bottom: 1.5em;
  }
}
@media only screen and (min-width: 1380px){
  section, .cdk-overlay-container .cdk-overlay-pane.janela .tab.open{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  .cdk-overlay-container .cdk-overlay-pane.janela.nav_fix .tab.open{
    grid-template-columns: 1fr 1fr 1fr;
  }
}
/* dark theme */
@media (prefers-color-scheme:dark){ 
  .loading_overlay img{
    filter: hue-rotate(-34deg) saturate(1.5);
  }
  ::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(10);
    background-color: #0055ff;
  } 
  body{
    background-color: var(--bg1);
  }
  .loading_overlay.transparent{
    background-color: rgba(0,0,0,.5);
  }
  .sweet-alert,
  .cdk-overlay-pane{
    background-color: var(--bg2);
  }
  .btn_form, .btn_add,
  .sweet-alert .sa-button-container button,
  .cdk-overlay-container .btns :is(p,button).accept,
  input,select,textarea{
    color: #ffffff;
  }
  input.blue{
    background-color: var(--color_cyan_light)!important;
  }
  .card.selectable,
  .cont_btn_side_form .drop_down p{
    color: #ffffff;
    border-radius: 0;
    border-bottom: 1px var(--bg5) solid;
  }
  :is(input,textarea,select):disabled{
    border-left: .5em var(--bg5) solid;
  }
  .tab_selector p,
  .radio_btn .checkmark,
  .card .card:not(.onoff),
  .cont_btn_side_form .drop_down,
  .mat-paginator .mat-icon-button,
  .mat-paginator .mat-form-field-infix,
  .card:not(.label) .card:not(.onoff):hover,
  .cdk-overlay-pane :is(input,select,textarea),
  .list_popup_card>.card:not(.label,.selectable,.onoff),
  .card:not(.label) :is(input,select,textarea):not(:disabled),
  .tab .parameters, .card.label .bullet_indicator{
    background-color: var(--bg3);
  }
  .tab .card:not(.label) :is(input,select,textarea):not(:disabled),
  .list_popup_card .cont_cont_btn_side_form:disabled{
    background-color: var(--bg5);
  }
  :is(.cdk-overlay-pane,.card) input[type="date"]::before{
    background-color: var(--bg3);
  }
  .nav_fix .nav_fix_cont .drop_down{ 
    background-color: var(--bg2);
  }
  .card.checkable.onoff .checkmark{
    background-color: #ffffff;
  }
  .cont_btn_side_form .drop_down p:hover img{
    filter: brightness(5) sepia(1) hue-rotate( 8deg) saturate(22);
  }
  .card.checked .card:not(.onoff,.red){
    background-color: var(--bg4)!important;
    color: #000000;
  }
  .card.checkable.onoff .checkmark_bg{
    background-color: var(--bg2);
  }
  .tab .card.label{
    border: 1px var(--bg3) solid;;
  }
  .sweet-alert,
  .cdk-overlay-pane,
  .cont_btn_side_form .drop_down,
  .nav_fix .nav_fix_cont .drop_down{
    box-shadow: 6px 6px 22px 0 rgb(0 0 0);
  }
  input[type="date"]::before{
    background-image: url('../images/datew.svg');
  }
  #scroll_top{
    background-color: var(--bg3);
  }
}
/* animations --Teste-- */
/* :is( #options p, .mat-option-text,
  .card.selectable,
  .cont_btn_side_form .drop_down p ),
  nav .sub_title>:is(p,a),
  .card.checkable.onoff p{
  transition: color .35s ease;
}
#options p img{
  transition: filter .35s ease;
} */
.list_popup_card .card,
:is( .tab_selector p,
.mat-paginator .mat-icon-button,
nav #main_menu .list_item .icon_box,
.mat-paginator .mat-form-field-infix,
.card.checkable:not(.checked,.label,.onoff,.selectable,.blue,.red),
input:not(:focus,:disabled),
select:not(:focus,:disabled),
textarea:not(:focus,:disabled) ),
.card.checkable:not(.onoff,.label,.blue,.red) .checkmark,
.card.checkable.onoff .checkmark_bg, input[type="date"]::before,
.radio_btn input:not(:disabled) ~ .checkmark,
.adicional_filter>.btn_more,
:is( #btn_options,
  .tab_selector p.selected,
  .filter_container .icon_box.search,
  .cdk-overlay-container .btns .accept,
  .tab .cont_btn_side_form:not(:disabled,.disabled),
  .filter_container .icon_box:not(.search,.red),
  .card.checkable.checked:not(.onoff,.blue,.red),
  .sweet-alert .sa-button-container button.confirm,
  .tab .card .cont_cont_btn_side_form:not(:disabled), ),
  .card.checkable.onoff input:checked ~ .checkmark_bg,
  .card.selectable .special_label,
  .radio_btn input:checked:not(:disabled) ~ .checkmark,
  :is( .btn_add.red,
    .btn_add.blue,
    .btn_form.red,
    .icon_box.red,
    .cont_btn_side_form.red:not(.disabled,:disabled),
    .cont_cont_btn_side_form.red:not(:disabled),
    .cdk-overlay-container .btns :is(p,button).blue,
    .cdk-overlay-container .btn_close,
    .cont_cont_btn_side_form.red:not(:disabled)
    .cont_btn_side_form,
    .cdk-overlay-container .btns :is(p,button).cancel ),
    .card.checkable.red.checked:not(.onoff):hover,
    .sweet-alert .sa-button-container button:not(.confirm),
    .card.red,
    .card.checkable.red .checkmark{
    transition: background .35s ease;
}
#btn_options.open .line:first-child{
  transform: translate(-50%,-50%) rotate(-180deg)!important;
}
#hamburger .line{
  transition: transform .35s ease, top .35s ease;
}
#hamburger.open .line{
  transform: translate(-50%,-50%) rotate(135deg);
}
#hamburger.open .line:last-child {
  transform: translate(-50%,-50%) rotate(45deg);
}
.btn_more .line {
  transform: translate(-50%,-50%) rotate(0);
  transition: transform .35s ease;
}
nav .sub_title>.btn_more>.line{
  transition: transform .35s ease
}
#options.open {
  opacity: 1;
  right: 0.5em;
  pointer-events: unset;
}
#options {
  opacity: 0;
  right: -3.5em;
  bottom: 3.5em;
  display: block;
  pointer-events: none;
  transition: right .35s ease, opacity .35s ease;
}
.cont_btn_side_form .drop_down{
  opacity: 0;
  right: -.85em;
  display: block;
  pointer-events: none;
  transition: right .35s ease, opacity .35s ease;
}
/* new page menu */
.filter_container{
  padding-bottom: 2em;
  margin-bottom: .5em;
  position: relative;
}
.filter_container .filter_actions .icon_box p s{
  display: none;
}
.filter_container .filter_actions{
  position: absolute;
  left: 0em;
  bottom: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 2em;
  width: calc(50% - .25em);
}
.filter_container .filter_actions .icon_box:nth-child(1),
.filter_container .filter_actions .icon_box:nth-child(2){
  margin: 0;
  width: 100%;
  border-radius: .5em 0 0 .5em;
}
.filter_container .filter_actions .icon_box:nth-child(2){
  border-radius: 0 .5em .5em 0;
}
.filter_container .icon_box.search{
  background-color: var(--color_blue);
  background-image: var(--gradient_blue);
}
.filter_container .icon_box.search:hover{
  background-color: var(--color_blue_dark);
  background-image: var(--gradient_blue_dark);
}
@media only screen and (min-width: 600px){
  .filter_container{
    padding-bottom: 2em;
  }
}
@media only screen and (min-width: 840px){
  .filter_container{
    padding-bottom: 0;
    margin-bottom: 0;
    position: static;
  }
  .filter_container .filter_actions{
    z-index: 2;
    position: static;
  }
}
/* new blue btns shenanigans */
.inverted.sweet-alert .sa-button-container button{
  background-color: var(--color);
  background-image: var(--gradient);
}
.inverted.sweet-alert .sa-button-container button:hover{
  background-color: var(--color_dark);
  background-image: var(--gradient_dark);
}
.inverted.sweet-alert .sa-button-container button.confirm{
  background-color: var(--color_red);
  background-image: var(--gradient_red);
}
.inverted.sweet-alert .sa-button-container button.confirm:hover{
  background-color: var(--color_red_dark);
  background-image: var(--gradient_red_dark);
}
.tab{
  /* background-color: red; */
}