* { outline: none }
button { box-shadow: none !important; }
svg { pointer-events: none }
#eroare-no-access { text-align: center }
#eroare-no-access p { font-size: 26px }
#verifUserExt .userAvailError { background: green }
#verifUserExt .userExistsError { background: red }
#verifUserExt span { width: 100%; display: inline-block; padding: 5px; }
a { text-decoration: none; }
p { margin-bottom: 0 }
pre {font-family: var(--bs-font-sans-serif); white-space: pre-line; font-size: 1rem; font-weight: 400; line-height: 1.5}

a, a:hover, #loginpage .btn-custom, body .btn-custom, .client a, .ticketTab a, table td a, .accordion-button, .accordion-button:not(.collapsed), .select-control, #ticketComentarii, .form-control::placeholder, .form-control:focus, #InsContClientFirma { color: #fff }

/* LOGIN */
#loginpage { background: #1a1a1a; width: 100%; height: 100vh}
#loginpage .btn-custom, body .btn-custom { background: red !important; width: 100%; text-transform: uppercase }
#sub-login-button a { width: 100%; display: inline-block; color: #01a5e6c9; text-decoration: none; padding: 10px 5px; text-align: center; border: 1px solid #01a5e6c9; margin-top: 25px }

/* COMENTARII */
.comentariu { margin: 20px 0; border-bottom: 1px solid #999; padding-bottom: 15px }
.comentariu .c-mesaj { text-align: justify }
.comentariu .c-detalii { margin-bottom: 10px; }
.comentariu .c-user { font-size: 18px; text-transform: capitalize }
.comentariu .c-data  { font-style: italic; font-size: 14px }
.c-detalii svg, .c-detalii .c-user { display: inline }

/* MAIN */
body { background: #1a1a1a; color: #efefef; overflow-x: hidden;}
.col-no-padding { padding: 0 !important; }
.searcharea input { width: 100%; border: 0; border-radius: 0; border-bottom: 1px solid rgba(105, 105, 105, 0.5); margin: 0 }
.icon a { padding: 5px 0; display: block }
.icon { text-align: center; background: #282828 }
#clientActions { text-align: center; }
#clientActions a { font-size: 32px; text-align: center; padding: 10px; display: inline-block }
.borderright, .col-clienti { border-right: 1px solid rgba(105, 105, 105, 0.5) }
#clienti { display: flex; flex-wrap: wrap }
#clienti .client { width: 48%; padding: 5px; text-align: center; margin: 2px; }
.client.hasNoWork { opacity: 0.4 }
.client.hasNep { background-color: rgba(0, 255, 0, 0.1); }
.client a { font-size: 18px; text-decoration: none }
.client a:hover { text-decoration: none; }
.client-nume { padding: 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.client-workToDo { font-size: 11px; font-style: italic }
.client.white-bg .client-img { background: #ffffffbf; background-position: center; background-repeat: no-repeat; background-size: contain }
.client-img { height: 50px; background-position: center; background-repeat: no-repeat; background-size: contain }
.client:hover, .client.selected { background: #333; border-radius: 5px;}
ul#clienti { list-style-type: none; margin: 0; padding: 0; }
.eroare-fara-clienti { text-align: center; width: 100%; font-style: italic; padding: 10px 0 }
h4 { text-align: center; padding: 15px 0 5px;}
#main-page-error { padding: 250px 0 }
#main-page-error i { font-size: 70px; margin-bottom: 25px; }

#ticketeTabs { display: flex; justify-content: center; flex-wrap: wrap; margin: 25px 0 }
.ticketTab a { text-decoration: none; padding: 10px; border: 1px solid #ffffff1b; margin: 0 5px; text-transform: uppercase; font-size: 15px; font-weight: bold }
.ticketTab.ticketeNepreluate a { background-color: #ff000078 }
.ticketTab.ticketeInLucru a { background-color: green }
.ticketTab.ticketeComplete a { background-color: #80808061 }

/* TABELS */
#TabelTasksInlucru, #TabelTasksComplete, #TabelTasksRemoved, #TabelTasksNepreluate, #tabelConturiFirma, #TabelTasksInlucruAltiUseri { table-layout: fixed; width: 100% }
#TabelTasksInlucru thead, .phoneInLucru { background: green }
#TabelTasksInlucruAltiUseri thead { background: darkgreen; }
#TabelTasksComplete thead, .phoneFinalizate { background: #80808061 }
#TabelTasksNepreluate thead, .phoneNepreluate { background: #ff000078 } 
.phoneInLucru a, .phoneNepreluate a, .phoneFinalizate a, .phoneAnulate a { padding: 10px; display: block; border-bottom: 1px solid #979797; }
table td a { padding: 5px 0; display: block; text-decoration: none }
table td { padding: 5px; border: 1px solid #9a9a9a2b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table th { padding: 5px; border: 1px solid #9a9a9a2b }
.actions { cursor: pointer; }
.actions svg { font-size: 32px; }
.actions.finished { color: green }
.actions.remove, .icon-prio { color: red }
.icon-prio-tabel { font-size: 20px }
.prio-2 { opacity: 0.9 } .prio-3 { opacity: 0.8 } .prio-4 { opacity: 0.7 } .prio-5 { opacity: 0.65 } .prio-6 { opacity: 0.6 } .prio-7 { opacity: 0.55 } .prio-8 { opacity: 0.5 } .prio-9 { opacity: 0.45 } .prio-10 { opacity: 0.4 }
#buttonTasksRemoved { width: 80%; font-size: 20px; margin-top: 25px; }
@media screen and (min-width: 1700px) { ul#clienti { height: 850px; overflow-y: auto; }}
@media screen and (min-width: 1000px) { 
  .task-nr { width: 5% }
  .task-titlu { width: 200px } 
  .actions { width: 40px; text-align: center; }
  .task-admin, .task-status { width: 90px; text-align: center }
  .task-prio { width: 70px; text-align: center }
  .task-dead, .task-dataadg, .task-datafin, .task-dataSters, .task-dataAd { width: 170px }
  #TabelTasksNepreluate .task-dataad { width: 175px }
}
.dropdown-filter-icon { border: 0 }
.filtruS:before { content: "⛛"; font-size: 20px}

/* ACORDEOANE */
.accordion-item { border-bottom: 1px solid #ffffff52 }
.accordion-button { padding: 10px }
.accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") }
.accordion-button:not(.collapsed)::after {  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
#task-inlucru .accordion-button { background: green }
#task-complete .accordion-button { background: #80808061 }
#task-nepreluate .accordion-button { background: #ff000078 }
#task-removed .accordion-button { background: transparent }
.accordion-item:last-of-type .accordion-collapse { border: 0 }
#ticket-info div.row { padding: 5px; border-bottom: 1px solid #ffffff2e; }

/* MODALS */
#AdaugaTaskModal .modal-dialog, #PreluareTaskModal .modal-dialog, #TicketInfoModal .modal-dialog { max-width: 700px !important }
#TicketInfoModal { overflow: scroll; }
#DescModal .modal-dialog { max-width: 600px !important; text-align: justify }
.modal-content { background: #343434 }
#DateTaskIns { text-align: center; font-size: 20px }
#AdaugaTaskModal label + select { display: inline-flex !important; flex-direction: column; width: unset }
#ticketComentarii { width: 100%; background: #343434; border: 0 }
#ticketComentarii h5 { margin-bottom: 10px; text-align: center }
#TaskUserC { margin: 15px 0 }
.adaugaComentariuButonHidden { display: none; }
.modal-backdrop { display: none }
.modal {background: rgba(0, 0, 0, 0.5)}
#ticketComentarii { padding: 10px }

/* INPUTS */
label { font-size: 20px }
.select-control { background: transparent; border: 0; font-size: 20px; padding: 0 10px; }
.select-control option { background-color: #282828; font-size: 17px; }
.form-control:focus { border-color: #80bdff8f; box-shadow: none; }
.form-control input, .form-control { color: #fff; padding: 10px 15px; height: unset; background-color: #282828 !important; border: 1px solid #ced4da26; margin: 5px 0; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0}
input[type=number] { -moz-appearance: textfield }
#PrioInputs input, #UserTaskInputs input, #PrioPrelInputs input, #WhiteBGInputs input, #AdminiInputs input { display: none }
#PrioInputs label, #PrioPrelInputs label { padding: 8px 5px; width: calc(100%/ 10.7); background: #424242; text-align: center; cursor: pointer }
#WhiteBGInputs label { padding: 8px 5px; width: calc(100%/ 7); background: #424242; text-align: center; cursor: pointer  } 
#UserTaskInputs label, #AdminiInputs label { padding: 5px 10px; margin: 0 2px; background: #424242; text-align: center; cursor: pointer; display: inline }
#UserTaskInputs, #AdminiInputs { display: inline }
#PrioInputs input:checked+label, #UserTaskInputs input:checked+label, #PrioPrelInputs input:checked+label, #WhiteBGInputs input:checked+label, #AdminiInputs input:checked+label { background: red }
#InsContClientFirma { background: transparent; padding: 5px; border: 0; font-size: 20px; text-align: right; width: 40% }
select option { background: #1a1a1a }

/* TOOLTIPS */
.ui-tooltip { background: #343434 !important; color: #fff !important; border: none !important; box-shadow: none !important; }

@media screen and (max-width: 996px) { .hidden-phone { display: none !important; } }
@media screen and (min-width: 996px) { .hidden-pc { display: none !important; } }

@media only screen and (max-width: 800px) {
  ul#clienti { overflow-x: scroll; width: 100%; white-space: nowrap; display: inline-block }
  ul#clienti li { display: inline-block }
  #clienti .client { width: 32% }
  .client-nume, #main-page-error svg, #clientActions.mobile-hidden { display: none }
  #ui-datepicker-div { display: none !important }
  .icon a { padding: 0 5px 5px; display: block }
  #main-page-error { padding: 50px 0 }
  .searcharea input { padding: 10px 10px 15px }
  .mobile-block { display: block; margin-bottom: 10px }
  #PrioInputs label, #PrioPrelInputs label { padding: 8px 0 !important; width: calc(100%/ 6) !important; margin: 5px 2px }
  .modal-footer { padding: 0 }
  .modal-footer.doubleb input, .modal-footer.doubleb button { width: 50%; display: inline-block; margin: 0; border-radius: 0; height: 40px; border: 0 }
  .modal-footer.singleb button { width: 100%; display: inline-block; margin: 0; border-radius: 0 0 4px 4px; height: 40px; border: 0 }
  #task-complete tr td:last-child, #task-nepreluate tr td:last-child, #tabelConturiFirma tr td:last-child { width: 100% !important; }
  .ticketTab { margin-bottom: 10px; width: 160px; display: flex;text-align: center;}
  .ticketTab a { width: 100%; font-size: 15px }
  #ticketeTabs { margin: 5px 0 }
  #ticketeFront { margin-bottom: 150px } 

	table, thead, tbody, th, td, tr { display: block; }
	thead tr { position: absolute; top: -9999px; left: -9999px;}
  tr { margin-bottom: 15px }
  #TabelTasksInlucru td { border: 1px solid green }
  #TabelTasksComplete td { border: 1px solid #80808061 }
  #TabelTasksNepreluate td { border: 1px solid #ff000078 } 
	td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 35% !important; white-space: normal; text-align: left; }
	td:before { position: absolute; top: 6px; left: 6px; width: 50%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; content: attr(data-title); }
  .actions { display: inline-block; }
  td.actions { padding: 0 !important; width: calc(98%/3) !important; border: 0 !important; display: inline-flex; justify-content: center }
  .task-descriere { height: 40px }
}

ul#clienti::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5 }
ul#clienti::-webkit-scrollbar { width: 12px; background-color: #F5F5F5 }
ul#clienti::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555 }
ul#clienti { scrollbar-color: rgba(0, 0, 0, 0.7) rgba(255, 255, 255, 0.3); scrollbar-width: thin }