html, body, div, span,iframe, p,a,img,i, ul,li,section{margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
menu,nav,section {display: block;}

body{color: var(--table-p-color)!important; font-family: 'Roboto Condensed', sans-serif; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */-webkit-text-size-adjust: 100%; background-color: var(--main-bg-color);}
ol,ul {list-style: none;}
a {text-decoration: none;}

h1{ color: var(--h1);}

/*set bg*/

.bg-productie{}
.bg-notif{background-image: url(../images/bg-notif.png); background-repeat: no-repeat; background-size:auto; background-position: bottom right;}
.bg-mourals{background-image: url(../images/bg-mourals.png); background-repeat: no-repeat; background-size:auto; background-position: bottom right;}
.bg-wallstory{background-image: url(../images/bg-wallstory.png); background-repeat: no-repeat; background-size:auto; background-position: bottom right;}
.bg-generic{ background-repeat: no-repeat; background-size:auto; background-position: bottom right; }

/*navigation*/
.navbar-light .navbar-toggler{ float: right; border: none;}
.bg-light{ background: transparent!important; padding-top: 4vh; padding-bottom: 0;}

.navbar-brand{ font-size:21px; font-weight:bold; padding: 0!important; margin: 0; line-height: 0; }
.navbar-expand-lg .navbar-nav .nav-link{padding-left:1.5rem}
.navbar-nav{ font-size:18px; padding:0; margin:35px 0 0 0 }

.navbar-light .navbar-nav .nav-link{color:var(--nav-link-color)}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{color:var(--nav-link-hover-color)}

/*dropdown-menu*/
.dropdown-menu{  border:none; right: 0; left: unset!important; margin-top: 15px!important; }
.dropdown-toggle::after{ float:right; margin-top:8px}
.dropdown-toggle li{ display: block!important; clear: both!important; color: var(--drop-down-main);}

.dropdown-item{ font-weight: bold; font-size: 1rem; margin-bottom: 10px; color: var(--drop-down-main); }
.dropdown-item:hover,
.dropdown-item.selected{ width: 100%; background-color: var(--dropdown-menu-bg-color); color: var(--dropdown-item-hover-color);}



.dropdown-menu li {position: relative;}
.dropdown-menu .dropdown-submenu {display: none; position: absolute; left: 100%; top: -27px; border: 2px solid rgba(0,0,0,0);}
.dropdown-menu .dropdown-submenu-left {right: 100%; left: auto;}
.dropdown-menu > li:hover > .dropdown-submenu {display: block;}

.dropdown-item.disabled, .dropdown-item:disabled{ color: rgba(0,0,0,0.4);}



/*left-menu*/
.left-menu li a{ text-decoration:none; color: var(--nav-link-color);}
.left-menu li a.selected{ font-weight:bold; color: var(--table-p-color); }
.left-menu li a:hover{ color: var(--table-p-color)}

.left-menu2{ font-size:24px; margin-top:20vh}
.left-menu2 li{ padding-bottom:0.5vh}
.left-menu2 li a{ text-decoration:none; color: var(--left-menu2-li-a-color); text-transform: uppercase; }
.left-menu2 li a:hover{ opacity:0.8}

/*login*/
.bg-login{ background-image: url(/images/bg-login.png); background-repeat: no-repeat; background-size:cover; background-position: top left; }
.main-login { margin-top: 36vh;}
.main-login h1{ color: var(--heading-color); font-size: 6vw; line-height: 1;}
.main-login h2{ color: var(--heading-color); font-size: 2vw; margin-top: 4vh;}
.main-login h2 span{ font-size: 1.4vw; color: rgba(0,236,222,1);}
.main-login h2 a{ text-decoration: none; color: rgba(255,255,255,1);}
.main-login h2 a:hover{ text-decoration: none; color: rgba(255,255,255,0.7);}


.login{ margin-bottom: 26vh; }
.login h3{ font-size: 3rem; color: #221958; font-weight: bold; margin-bottom: 4vh; }
.login .f1{ font-size: 1.2rem; margin-bottom: 2vh;}

.login .highlight{ background-color: var(--green-hover); font-size: 1.2rem; text-align: center; line-height: 2.2; }

.login .link-login{text-decoration: none; color: var(--pink); font-weight: bold; font-size: 1.2rem; line-height: 1.8;}
.login .link-login:hover{text-decoration: none; color: var(--pink-hover);}

.error h4{ font-weight: bold; color: var(--pink-hover);}

/*body*/
.logo-set{ margin:auto; display:block; margin-bottom:2vh; height:50px }

.tiltu-home{font-weight: bold; padding-bottom: 1vh; font-size: 1.4rem; color: var(--f1-color);}
.scroll{overflow-y: auto; height: 40vh; overflow-x: hidden; padding-right: 15px;}
.scroll1{overflow-y: auto; height: 15vh; overflow-x: hidden; padding-right: 15px;}
.scroll2{overflow-y: auto; height: 56vh; overflow-x: hidden; }
.scroll3{overflow-y: auto; height: 60vh; overflow-x: hidden; padding-right: 15px;}


/*raport departament*/
.raport_departament{ background-color: var(--raport-bg); border-radius: 0.35rem; padding: 15px; margin-top: 35px; display: inline-block; width: 100%; color: var(--f1-color); }
.raport_departament h3{ font-weight: bold; color: var(--blue-hover); line-height: 1; font-size: 21px;}
.raport_departament h4{ font-weight: bold; color: var(--blue-hover); line-height: 1; font-size: 21px; text-align: right;}
.raport_departament .left{ background-color: rgba(255, 147,30,0.6); border-right: 5px solid var(--raport-bg); text-align: right; padding-top: 5px;  color: var(--dark)}
.raport_departament .right{ background-color: rgba(255, 29,37,0.6); border-right: 10px solid var(--raport-bg); padding-top: 5px; color: var(--dark) }

/* nav pills */
.nav-pills {}
.nav-pills a { padding: 0.5rem; }
.nav-pills a.selected{ text-decoration: underline; }

/* width */
::-webkit-scrollbar {width: 6px; border-radius:0.25rem; background: var(--dropdown-bg)   }
  
/* Track */
::-webkit-scrollbar-track { background: var(--dropdown-bg); border-radius:0.25rem;}
  
/* Handle */
::-webkit-scrollbar-thumb { background: var(--f1-border-color); border-radius:0.25rem; }
::placeholder{ color: rgba(0,0,30,0.2)!important;}
/* :required{color: rgba(0,0,30,0.2)!important;} */



/*tolltip*/
.tooltip-container {position: relative; text-align: center;}
.tooltip-container:hover .tooltip-content-left {visibility: visible; opacity: 1; transition: 0.25s all ease; transition-delay: 0s;}
.tooltip-container:hover .tooltip-content-top {visibility: visible; opacity: 1; transition: 0.25s all ease; transition-delay: 0s;}
.tooltip-container:hover .tooltip-content-top2 {visibility: visible; opacity: 1; transition: 0.25s all ease; transition-delay: 0s;}
.tooltip-container:hover .tooltip-content-top3 {visibility: visible; opacity: 1; transition: 0.25s all ease; transition-delay: 0s;}
.tooltip-container:hover .tooltip-content-top4 {visibility: visible; opacity: 1; transition: 0.25s all ease; transition-delay: 0s;}

.tooltip-content-left {visibility: hidden;opacity: 0; position: absolute; right: 30px; top: -5px; padding: 8px 15px; margin: 16px; font-size: 15px; min-width: 160px; transition: 0.25s all ease;transition-delay: 0.25s;z-index: 2;color: var(--f1-color); background-color: var(--dropdown-menu-bg-color); border-radius: 0.25rem; text-align: right;}
.tooltip-content-top {visibility: hidden;opacity: 0; position: absolute; right: 0; top: -50px; padding: 8px 15px; margin: 16px; font-size: 15px; width: max-content ; transition: 0.25s all ease;transition-delay: 0.25s;z-index: 2;color: var(--f1-color); background-color: var(--dropdown-menu-bg-color); border-radius: 0.25rem; text-align: right; border: 1px solid rgba(235, 235, 235, 1);}
.tooltip-content-top2 {visibility: hidden;opacity: 0; position: absolute; right: 30px; top: -70px; padding: 8px 15px; margin: 16px; font-size: 15px; min-width: 170px; transition: 0.25s all ease;transition-delay: 0.25s;z-index: 2;color: var(--f1-color); background-color: var(--dropdown-menu-bg-color); border-radius: 0.25rem; text-align: right;}
.tooltip-content-top3 {visibility: hidden;opacity: 0; position: absolute; right: 100px; top: -60px; padding: 8px 15px; margin: 16px; font-size: 15px; min-width: 170px; transition: 0.25s all ease;transition-delay: 0.25s;z-index: 2;color: var(--f1-color); background-color: var(--dropdown-menu-bg-color); border-radius: 0.25rem; text-align: right;}
.tooltip-content-top4 {visibility: hidden;opacity: 0; position: absolute; right: 40px; top: -50px; padding: 8px 15px; margin: 16px; font-size: 15px; min-width: 170px; transition: 0.25s all ease;transition-delay: 0.25s;z-index: 2;color: var(--f1-color); background-color: var(--dropdown-menu-bg-color); border-radius: 0.25rem; text-align: right;}


/*facturi*/
.cap-table-default{ width: 100%; border: none; padding: 0; margin: 0;}
.cap-table-default td{ padding: 0 15px 15px 0 ;}
.cap-table-default p{ font-size: 18px; color: var(--f1-color); padding: 5px 0; line-height: 1; border-bottom: 3px solid var(--dropdown-bg) ;}

.body-table-default{ border: none;}
.body-table-default p{ color: var(--table-p-color); }
.body-table-default a{ float: left; margin-right: 5px; color: var(--f1-color);}
.body-table-default a:hover{color: var(--f1-color); opacity: 0.8;}
.body-table-default span{color: var(--table-p-color);}



/*facturare*/
.factura{ background-color: rgba(255,255,255,1); padding:40px 60px; border-radius: 0.25rem;}
.factura .bg{ background-color: var(--dark); color: rgba(255,255,255,1); padding: 10px 0;}
.factura .bg-grey{ background-color:  rgba(0, 0, 0, 0.1); padding: 10px 0;}

.factura .header h2{ font-weight: bold; padding: 0; margin: 0; color: var(--dark);}
.factura .header p{color: var(--dark); padding: 10px 0 30px 0; font-size: 18px;}
.factura .header h3{ font-weight: bold; padding: 0; margin: 0; font-size: 21px;}

.factura .date-facturare h3{ font-size: 24px; font-weight: bold; color: var(--dark);}
.factura .date-facturare p{ padding-top: 8px; color: var(--dark);}

.factura .servicii{ margin-top: 5px; margin-bottom: 10px; border-bottom: 1px solid var(--dark);}
.factura .servicii h6{ padding: 0; margin: 0; font-weight: bold; font-size: 14px; }
.factura .servicii p{ padding: 0; margin: 10px 0; color: var(--dark);}

.factura .total h6{ font-weight: bold; color: var(--dark); padding: 0; margin: 0;}

.factura .subtotal h6{ font-weight: bold; color: var(--dark); padding: 0; margin: 0;}

.factura .footer{ background-color: none; border: none; text-align: center; height: auto;}
.factura .footer h6{padding: 0; margin: 0; font-weight: bold; color: var(--dark);}


/*admin*/
/*statusuri supra admin*/
.status-minim{ color: var(--blue-hover); font-weight: bold; font-size: 18px;}
.status-mediu{ color: var(--orange-hover); font-weight: bold;}
.status-extrem{ color: var(--red-hover); font-weight: bold;}

.red-dot {color: #DB2828!important; font-size: 16px; margin-right: 4px;}
.note-count {font-size: 10px; vertical-align: top;}


/*footer*/
.footer{ text-align:center; padding: 2vh; margin-top: 2vh; border-top: 1px solid rgba(0,0,0,0.1); background-color: var(--footer-bg); height: 8vh;}
.footer ul li{ display:inline; margin:0 20px}
.logo-set-footer{ height:30px }

.footer-page{ padding-top: 1vh; margin-top: 4vh; border-top: 2px solid var(--butoane-status); border-radius: 1px;}
.footer-page p{ color: var(--table-p-color);}


/*green*/
.hr{ background-color:var(--dropdown-bg); height:4px; border-radius: 0.25rem;}





/*alege culoarea*/
.form-check{width: max-content; }
.form-check ul{margin: 0; padding: 9px 0 0 0;}
.form-check ul li{ display: inline; }
.form-label{ color: var(--f1-color); }
input[type=radio] {display: none; }
input[type=radio]:checked + label span {transform: scale(1.25);}
input[type=radio]:checked + label .red {border: 2px solid #711313;}
input[type=radio]:checked + label .orange {border: 2px solid #873a08; }
input[type=radio]:checked + label .yellow {border: 2px solid #816102;}
input[type=radio]:checked + label .olive {border: 2px solid #505a0b;}
input[type=radio]:checked + label .green {border: 2px solid #0e4e1d;}
input[type=radio]:checked + label .teal {border: 2px solid #003633;}
input[type=radio]:checked + label .blue {border: 2px solid #103f62;}
input[type=radio]:checked + label .violet {border: 2px solid #321a64;}
input[type=radio]:checked + label .purple {border: 2px solid #501962;}
input[type=radio]:checked + label .pink {border: 2px solid #851554;}
  /*texte*/
  input[type=radio]:checked + label .black {border: 2px solid #000;}
  input[type=radio]:checked + label .grey {border: 2px solid #4D4D4D;}
  input[type=radio]:checked + label .dark-blue {border: 2px solid #221958;}

/*label { width: 18px!important; height: 18px; margin-right: 10px; cursor: pointer; } !* moved to local page *!*/
label:hover span {transform: scale(1.25);}
label span {display: block; width: 100%; height: 100%; transition: transform 0.2s ease-in-out; }
label span.red {background: #DB2828;}
label span.orange {background: #F2711C;}
label span.yellow {background: #FBBD08;}
label span.olive {background: #B5CC18;}
label span.green {background: #21BA45;}
label span.teal {background: #00B5AD;}
label span.blue {background: #2185D0;}
label span.violet {background: #6435C9;}
label span.purple {background: #A333C8;}
label span.pink {background: #E03997;}

/*texte*/
label span.black {background: var(--dark);}
label span.grey {background: #4D4D4D;}
label span.dark-blue {background: #221958;}

.bg-left{ float:left; width:75%; margin-top:1vh}
.bg-left li{ padding:5px 0 5px 10px; margin-top:10px; font-size: 14px; border-radius: 0.25rem;}
.bg-left li a{ color: var(--f1-color); font-weight: bolder;  }

.bg-right{ float:right; width:20%; margin-top:1vh}
.bg-right li{ padding:5px 0; margin-top:10px; text-align:center; font-size: 14px;}
.bg-right li a{ color: var(--f1-color); font-weight: bolder;  }

.bold{ font-weight: bold!important;}

/*tabel mpd/mourals/notif/walstory */
.cap-tabel{ border-bottom:1px solid rgba(250,250,250,0); border-radius: 0.25rem; }
.cap-tabel th{  font-size:14px; letter-spacing:-0.2px; }

.body-tabel{border-bottom:1px solid rgba(250,250,250,0)}
.body-tabel p{ color: var(--table-p-color);}
.body-tabel th{ border-right:6px solid rgba(0,0,0,0); font-size:14px; font-weight:normal}
.body-tabel a{ text-decoration: underline; color: var(--link-color); font-weight: bold; }
.body-tabel .action{ text-decoration: none;}

.table-aditional-icon{ padding: 1px 5px; margin-left: 5px; border-radius: 0.25rem;}
.table-aditional-icon i{ color: var(--main-bg-color); font-size: 14px;}


.cap-tabel-category{border-radius: 0.25rem; background-color:rgba(255,147,30,0.6); color: var(--dark);}
table.dataTable thead th, table.dataTable thead td{ border-bottom: 10px solid rgba(242,242,242,1);}
.table>:not(caption)>*>*{ border: none; background-color: var(--main-bg-color)}
.dataTables_wrapper .dataTables_filter { margin-bottom: 3vh;}
.dataTables_filter{border-bottom:1px solid var(--table-p-color)!important;}
.dataTables_wrapper .dataTables_filter input{ width: 380px; border:none; background-color:transparent!important; border-radius: 0;}
.dataTables_wrapper .dataTables_info{ margin-top: 1vh;}
.dataTables_wrapper .dataTables_paginate{margin-top: 1vh;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{  border: none; border-radius: 0.25rem; background-color:rgba(0,193,207,0.6)}

table, td{padding: 0; margin: 0;}
.table{--bs-table-striped-bg:var(--bg-table-striped);}

.cap-table-default1{ width: 100%; border: none; }
.cap-table-default1 td{ background-color: var(--table-header); padding:10px 70px 10px 10px;  border-bottom: 4px solid var(--main-bg-color)!important; }
.cap-table-default1 p{ font-size: 18px; color: var(--f1-color); padding: 5px 0; line-height: 1; }

.cap-table-default1-b{ width: 100%; border: none; }
.cap-table-default1-b td{ background-color: var(--table-header); padding:10px 70px 10px 10px;  border-bottom: 1px solid var(--main-bg-color)!important; }
.cap-table-default1-b p{ font-size: 18px; color: var(--f1-color); padding: 5px 0; line-height: 1; }

.cap-table-default1-c{ width: 100%; border: none; }
.cap-table-default1-c td{ background-color: rgba(0,0,0,0.18); padding:10px 70px 10px 10px;  border-bottom: 4px solid var(--main-bg-color)!important; }
.cap-table-default1-c p{ font-size: 18px; color: var(--f1-color); padding: 5px 0; line-height: 1; }


.cap-table-default2{ width: 100%; border: none; }
.cap-table-default2 td{ background-color: var(--table-header); padding:6px 10px;  border-bottom: 4px solid var(--main-bg-color)!important; }
.cap-table-default2 p{ font-size: 18px; color: var(--f1-color); padding: 5px 0; line-height: 1; }

.dataTables_wrapper .dataTables_length select{ border-radius: 0!important; border-bottom: 1px solid var(--table-p-color)!important; border-top: none!important; border-left: none!important; border-right: none!important;}
.dataTables_wrapper .dataTables_filter input{border: none!important;}
table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_desc:after{ color: var(--table-p-color); opacity: 0.8!important; }
table.dataTable thead>tr>th.sorting:after, table.dataTable thead>tr>th.sorting_asc:after, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>th.sorting_asc_disabled:after, table.dataTable thead>tr>th.sorting_desc_disabled:after, table.dataTable thead>tr>td.sorting:after, table.dataTable thead>tr>td.sorting_asc:after, table.dataTable thead>tr>td.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc_disabled:after, table.dataTable thead>tr>td.sorting_desc_disabled:after{color: var(--table-p-color); margin: 3px 0 0 0; }
table.dataTable thead>tr>th.sorting:before, table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_desc:before, table.dataTable thead>tr>th.sorting_asc_disabled:before, table.dataTable thead>tr>th.sorting_desc_disabled:before, table.dataTable thead>tr>td.sorting:before, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_desc:before, table.dataTable thead>tr>td.sorting_asc_disabled:before, table.dataTable thead>tr>td.sorting_desc_disabled:before{color: var(--table-p-color);  }

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{ border: none!important; background: none!important; background-color: var(--blue-hover)!important; margin:0!important }
.dataTables_wrapper .dataTables_paginate .paginate_button{ padding: 5px 12px!important;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background: none!important; background-color: var(--btn-info)!important; border-radius: 0.25rem!important; border-color: rgba(0,0,30, 0.7)!important; color: rgba(0,0,30, 1)!important; }
.dataTables_wrapper{ color: var(--table-p-color)!important;}
.table.dataTable tbody th, table.dataTable tbody td{ padding: 4px 10px!important;}
.table.dataTable>thead>tr>th, table.dataTable>thead>tr>td{ padding: 6px 10px!important; }

/*tabel documente oficiale*/
.nir table{width: 100%;}
.nir table .bg-blue{ background-color: rgba(0,0,60,1); color: #fff;}
.nir table .bg-grey{ background-color: rgba(0,0,0,0.07)}
.nir table .bg-grey-hover{ background-color: rgba(0,0,0,0.08)}
.nir table .bg-red-hover{ background-color: rgba(255,29,37,0.1)}

.nir table h5{ padding: 10px 0 0 0; margin: 0; font-weight: bold; font-size: 18px;}
.nir table h6{ padding: 10px 5px 0 5px; margin:0; font-weight: bold;}
.nir table p{ padding: 5px;}

/*pontaj*/
.pontaj table td{ padding: 0; margin: 0;}
.pontaj table .heading-1 { float: left; font-size: 34px; font-weight: normal; padding-top: 3px; color: rgba(105,105,110,0.7);}
.pontaj table h2 { font-size: 18px; font-weight: bold; margin: 0;}
.pontaj table .days{ font-size: 14px; padding-left: 20px; float: left; text-align: left; padding-top: 8px; color: rgba(105,105,110,0.7);}
.pontaj table .ora{ padding: 5px 0 5px 10px; color: rgba(0,0,30,1);}
.pontaj .profile{ padding: 7px 0 5px 15px;}
.pontaj .image-profile{ height: 50px; width: 50px; border: 1px solid rgba(255,255,255,1); background-color: #fff; border-radius: 50%; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 2px 4px -1px rgba(0, 0, 0, .15);}
.pontaj .profile a{ color: rgba(0,0,30,1);}

.pontaj .project-name{ font-weight: bold; text-transform: uppercase; color: rgba(120,120,130,1); font-size: 14px;}
.pontaj .project-name:hover{ opacity: 0.7;}
.pontaj .weekend{ background-color: rgba(72, 237, 174, 0.2);}
.pontaj .today{ background-color: rgba(255, 255, 255, 0.6); border-left: 2px solid rgba(255,29,37,0.9)!important; }
.pontaj .text-muted{opacity: 0.3;}

/*card pontaj*/
.card-pontaj div{ margin: 5px; padding: 10px; border-radius: 0.2rem; color: rgba(0,0,0,1);}
.card-pontaj:hover{opacity: 0.55;}

.card-color-decont{background-color: rgba(255, 255, 255, 0.7);}
.card-color-pontaj{background-color: transparent; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 3px 4px -1px rgba(0, 0, 0, .15); border-bottom: 3px solid rgba(255,147,30,0.8); background-image: linear-gradient(125deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .4) 70%);}
.card-color-proiect{background-color: transparent; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 3px 4px -1px rgba(0, 0, 0, .15); border-bottom: 3px solid rgba(0,235,145,0.8); background-image: linear-gradient(125deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .4) 70%);}
.card-color-pontaj .heading1{ font-weight: bold; }
.card-color-pontaj .price{ font-size: 14px;}
.card-color-proiect .heading1{ font-weight: bold; }

/*deconturi*/
.celula-semnatura{ border: 1px solid rgba(0,0,30,1); padding: 15px;}


/*acordeon*/
.accordion-header h4{ font-size: 1.2rem; color: var(--f1-color);}

.accordion-item{ background-color: rgba(255,255,255,0);}
.accordion-button{background-color: rgba(255,255,255,0); padding: 0;}
.accordion-button-right{float: right; width: 5%;}
.accordion-button-right .btn-delete{ padding: 2px 6px 3px 6px; border-radius: 50%; border:none; background-color: var(--btn-danger); color:var(--btn-link-color); }
.accordion-button-right .btn-delete:hover{text-decoration:none; background-color: rgba(255,29,37,0.9); color:var(--link-hover-color);}
.accordion-button-right .btn-delete i{ font-size: 12px;}
.accordion-body{padding: 0;}

.accordion-button:not(.collapsed){ background-color: rgba(255,255,255,0); box-shadow: none;}
.text-center{ text-align: center;}


/*search*/
.search{ margin-left: 15px; border-bottom: 1px solid var(--f1-border-color);}
.search .f3{ border: none!important; font-size: 16px; background-color: transparent; color: var(--btn-date-filter2); border-radius: 0; padding: 0; width: auto;}
.btn-search{ padding: 12px 0 0 0; margin: 0; border: none;  background-color: rgba(255, 255,255,0); color: var(--f1-color); border-bottom: 1px solid var(--f1-border-color)}

/*top filters*/
.date-filter li{ display:inline; border-bottom: 1px solid var(--data-filter2); margin:0 15px 0 0; padding:6px 0; }
.date-filter li a{ color:var(--link-data-filter2); text-decoration:none; font-size:1rem; font-weight: normal; font-weight: bold;  }
.date-filter li a:hover{ color:var(--link-data-filter2);}
.date-filter li a.selected{ color:var(--link-data-filter2); }
.date-filter li:hover{border-bottom: 1px solid var(--data-filter2-hover);}
.date-filter li.selected{  color:var(--link-hover-color); border-bottom: 1px solid var(--data-filter2-hover);}


.btn-filter1{ border-bottom: 1px solid #000; border-left: none; border-top: none; border-right: none; font-size: 16px; background-color: transparent;}
.btn-filter2{ border-bottom: 1px solid var(--nav-link-color); border-left: none; border-top: none; border-right: none; font-size: 16px; background-color: transparent; color: var(--nav-link-color);}

.status-filter{ float:right; text-align: right; width: 100%;}
.status-filter li{ display:inline; color: var(--status-filter);}
.status-filter li a{ color:var(--status-filter); text-decoration:none; font-size: 14px; }
.status-filter li a.selected{ font-weight: bold; }
.status-filter li a:hover{ opacity:0.6}
.status-filter-span{ margin-top:-10px; display: -webkit-inline-box; position: absolute; padding:5px; border-radius:0.25rem; line-height:8px; font-size: 14px; color: var(--f1-color); font-weight: bolder;}

.status-filter-span2{ display:table-caption; padding:5px; border-radius:0.25rem; line-height:8px; font-size: 14px; color: var(--f1-color); font-weight: bolder;}


/*alerte facturi si stock*/
.alerte{ margin-top:-22px; margin-left: 33px; display:table-caption; padding:5px; border-radius:0.25rem; line-height:8px; font-size: 14px; font-weight: bolder;}

.date-filter2 li{display:inline; margin:0 14px 0 0; border-bottom: 1px solid var(--data-filter2);  }
.date-filter2 li a{color:var(--link-data-filter2);}

.date-filter2 li:hover{ color:var(--link-hover-color); border-bottom: 1px solid var(--data-filter2-hover);}
.date-filter2 li:hover a{ color:var(--link-data-filter2);}

.date-filter2 li.selected{ color:var(--link-hover-color); border-bottom: 1px solid var(--data-filter2-hover);}

.date-filter2 li .dropdownTitle1{  text-decoration:none; font-size:1rem; font-weight: bold; float: left; padding: 6px 5px 6px 0!important;}
/* .date-filter2 li .dropdownTitle1.selected{ background-color:var(--link-data-filter2-hover); color:var(--link-data-filter2-selected); border-radius:0.25rem 0 0 0.25rem;} */

.date-filter2 li .dropdownTitle2{  text-decoration:none; font-size:1rem; font-weight: bold; float: left; padding: 6px 0 6px 5px!important;}
/* .date-filter2 li .dropdownTitle2.selected{ background-color:var(--link-data-filter2-hover); color:var(--link-data-filter2-selected); border-radius:0 0.25rem 0.25rem 0; height: 100%;} */


.date-filter2 .dropdown-menu{margin-top: 8px!important; right: 68%!important; background-color: rgba(0,193,207,1)!important;}
.date-filter2 .dropdown-menu li{ margin: 0;}
.date-filter2 .dropdown-menu li a{color: #212529!important; padding: 8px 15px; margin: 0;}
.date-filter2 .dropdown-menu li a:hover{ color: var(--link-hover-color)!important;}


/*detaliu comanda*/
.detaliu-comanda{ color: var(--detaliu-comanda-color);}
.detaliu-comanda h1{ text-align:center; font-weight:bold; text-transform:uppercase; margin-bottom:2vh}
.detaliu-comanda h2{ padding-top:8px; font-weight: normal; color: var(--f1-color); padding-left: 30px;}

.detaliu-comanda h2 span{ margin:0 30px 0 0; font-weight: bold;}

.left-detaliu{word-wrap: break-word; color: var(--left-detaliu-color)}
.left-detaliu h3{ font-weight:bold; font-size:21px; margin-bottom:2vh}
.left-detaliu p{ font-size:18px; margin-bottom:15px}

.right-comanda table{ width:100%}
.right-comanda table tr{ border-bottom:1px solid var(--table-border-bottom);}
.right-comanda table p{ padding:0 0 6px 0; margin-top:1vh }
.right-comanda .bold{ font-weight:bold}

/*butoane functionalitati*/
.functionalitati{ text-align: center; float: right; }
.functionalitati li{ padding-bottom: 30px;}
.functionalitati a{ font-size: 1.2rem; color: var(--main-bg-color); border-radius: 50%; padding: 8px 0; display: block; width: 38px; height: 38px; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 1px 2px -1px rgba(0, 0, 0, .15);}
.functionalitati a:hover{ text-decoration: none; color: var(--main-bg-color); opacity: 0.7;}
.functionalitati i{text-shadow: 0 0 1px rgba(0, 0, 0, .2);}

/*butoane functionalitati modal*/
.functionalitati-modal{ text-align: center; float: right; }
.functionalitati-modal li{ padding-bottom: 30px;}
.functionalitati-modal a{ font-size: 1.2rem; color: var(--main-bg-color); border-radius: 50%; padding: 8px 0; display: block; width: 38px; height: 38px;}
.functionalitati-modal a:hover{ text-decoration: none; color: var(--main-bg-color); opacity: 0.7;}

.default{ background-color: var(--dark); color: var(--main-bg-color);}
.default i{color: var(--main-bg-color)}


/*butoane detaliu comanda*/
.butoane-status{ border-top:2px solid var(--dropdown-bg); padding-top:2vh; margin-top:2vh; text-align:center}
.butoane-status ul li{ display:inline; margin:0 5px}
.btn-status{ padding:6px 12px; text-decoration:none; color:var(--f1-color); font-weight:bold; font-size: 14px; opacity: var(--btn-status-opacity);}
.btn-status:hover{ color:var(--f1-color); text-decoration:none; opacity:1}
.btn-status.active{opacity: 1!important;}

.butoane-status1{ border-top:2px solid var(--dropdown-bg); padding-top:2vh; margin-top:2vh;}

/*status colors*/
.noua, .ofertare{ background-color:var(--status-noua); border-radius: 0.25rem; }
.comanda-noua{ background-color:var(--status-noua); border-radius: 0.25rem; }
.preview{ background-color:var(--status-preview); border-radius: 0.25rem; }
.dtp{ background-color: var(--status-dtp); border-radius: 0.25rem; }
.in-dtp{ background-color: var(--status-dtp); border-radius: 0.25rem; }
.print{ background-color:var(--status-print); border-radius: 0.25rem; }
.in-print{ background-color:var(--status-print); border-radius: 0.25rem; }
.finalizat{ background-color:var(--status-finalizat); border-radius: 0.25rem; }
.anulata, .anulare{ background-color:var(--status-anulata); border-radius: 0.25rem; }
.necesar{ background-color:var(--status-necesar); border-radius: 0.25rem; color: var(--status-necesar-color)} 
.expediat, .confirmare{ background-color:var(--status-expediat); border-radius: 0.25rem; }

.status-bullet{ width: 14px; height: 14px; margin: 0 10px 0 0; float: left; border-radius: 50%; }
.circle-true{width: 14px; height: 14px; margin-right: 10px; float: left; border-radius: 50%; border: 2px solid rgba(0,235,145,1); margin-top: 2px;}
.circle-false{width: 14px; height: 14px; margin-right: 10px; float: left; border-radius: 50%; border: 2px solid rgba(255,29,37,0.8); margin-top: 2px;}

.status-bullet0{ background-color:var(--status-noua); }
.status-bullet1{ background-color:var(--status-preview); }
.status-bullet2{ background-color:var(--status-dtp); }
.status-bullet3{ background-color:var(--status-print); }
.status-bullet4{ background-color:var(--status-finalizat); }
.status-bullet5{ background-color:var(--status-expediat); }
.status-bullet6{ background-color:var(--status-anulata); }

.anulata p{ color: #fff!important;}
.anulata a{ color: var(--link-color)}

.edit{background-color:var(--btn-edit); border-radius: 0.25rem;}

/*modal*/
.modal-dialog{ margin-top:20vh}
.modal-header{ border-bottom:none; padding: 40px 60px 10px 0;}
.modal-body{ text-align:center; padding:20px 40px 20px 61px}
.modal-body h5{ font-size:28px; font-weight:bold; margin-bottom:1vh; color: var(--color-modal-text);}
.modal-body p{ font-weight:bolder; color: var(--color-modal-text);}
.modal-footer{ border: none;}

/* .modal-content{background-color: var(--modal-content);} */
.modal-content{background-color: transparent;
  background-image: linear-gradient(125deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .7) 56%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 3px 8px -1px rgba(0, 0, 0, .15);
  border: none;}
/* Make modal backdrop fully transparent */
.modal-backdrop {
  opacity: 0.7 !important; backdrop-filter: blur(3px); background-image: linear-gradient(125deg, rgba(180, 180, 185, .3), rgba(180, 180, 185, .5) 56%); background-color: transparent;
}
/*modal cookies*/
/* .modal-contet{ background-color:rgba(34,25,88,1); position:absolute; bottom:0; padding:2vh } */
.modal-contet{ position:absolute; bottom:8vh; padding:2vh }
.modal-contet .text_modal{ padding: 0 80px;}
.modal-contet h5{color:#fff; font-size:21px}
.modal-contet p{ color:#a9c2e0; font-size:16px; margin-bottom:2vh }
.modal-contet .close2{ background-color: rgba(0,193,207,1); color: rgba(255,255,255,1); padding: 8px 40px; border-radius: 0.8rem; text-decoration: none; box-shadow: 0 2px 3px rgb(0 0 0 / 20%); font-weight: bold; font-size: 18px; line-height: 1; margin: 1vh 1vw 0 0; display: inline; }
.modal-contet .close2:hover{  background-color: rgba(0,193,207,0.7); color: rgba(255,255,255,1); text-decoration:none  }
.modal-contet .bt-cookie{ border: 2px solid rgba(0,193,207,1); color: rgba(0,193,207,1); padding: 6px 38px; border-radius: 0.8rem; text-decoration: none; box-shadow: 0 2px 3px rgb(0 0 0 / 20%); font-weight: bold; font-size: 18px; line-height: 1; margin: 1vh 0 0 0;}
.modal-contet .bt-cookie:hover{  border: 2px solid rgba(0,193,207,0.7); color: rgba(0,193,207,0.7); text-decoration:none  }

/*set text GDPR*/
.set-GDPR{color: var(--dark); margin-bottom: 10vh;}
.set-GDPR h1{ font-size: 32px; font-weight: bold;}
.set-GDPR .heading2-GDPR{ margin-top: 4vh; font-size: 21px; font-weight: bold;}
.set-GDPR p{ font-size: 18px; margin-top: 1vh;}
.set-GDPR ul{ margin: 20px 0 0 40px;}
.set-GDPR li{ list-style: disc; font-size: 18px;}

/*alerte*/
.alert-success{background-color:var(--alert-success); border: none; color: var(--dark); padding:10px 20px; margin-top: 2vh;}
.alert-success .me-2{ height: 20px;}
.alert-success .btn-close{ opacity: 0.8; height: 20px; padding:10px 20px}

.no-task{ font-size: 2rem; font-weight: bold; margin-top: 20vh; color: var(--no-task);}

/*mark*/
.codurii .mark, mark { background-color: transparent; color: rgba(255,79,205,1); font-weight: bold;}
.codurii .mark, mark:hover{color: rgba(255,79,205,0.7); cursor: pointer;}

/*detalii companie*/
.date-companie{ color: rgba(0,0,30,1);}

/*info cont*/
.info-cont .bg-1{ background-color: var(--blue);}
.info-cont .bg-2{ background-color: var(--pink);}
.info-cont .bg-3{ background-color: var(--orange);}
.info-cont .bg-4{ background-color: var(--green); background-image: linear-gradient(90deg, var(--blue)45%, var(--green));}
.info-cont .bg-5{ background-color: var(--orange); background-image: linear-gradient(90deg, var(--pink)45%, var(--orange));}


.info-cont .set{padding: 25px 15px; border-radius: 0.25rem;}
.info-cont .set .heading-h1{ font-size: 32px; color: var(--f1-color); font-weight: bold;}
.info-cont .set .heading-h2{ font-size: 26px; color: var(--f1-color); font-weight: bold; line-height: 1.45;}
.info-cont .set .heading-h3{ font-size: 21px; color: var(--f1-color); }
.info-cont .set .heading-h4{ font-size: 18px; color: var(--f1-color); font-weight: normal;}
.info-cont .set .heading-h4 span{ font-weight: bold;}
.info-cont .set .heading-h5{ font-size: 16px; color: var(--f1-color); font-weight: bold;}


.info-cont .set .heading{ font-size: 16px; color: var(--f1-color);}
.info-cont .set .heading-2{ font-size: 21px; color: var(--f1-color);}
.info-cont .set .heading a{ font-weight: bold; color: var(--f1-color);}
.info-cont .set .heading a:hover{color: var(--f1-color); text-decoration: none;}
.info-cont .set .number{font-size: 21px; font-weight: bold; color: var(--f1-color); padding-top: 5px; margin-top: 5px; border-top: 1px solid var(--f1-border-color);}
.info-cont .set .number-2{font-size: 28px; font-weight: bold; color: var(--f1-color); }

.inline-list{ text-align: end;}
.inline-list li{display: inline-flex;}

/* form
--------------------------------------- */
.dropdown-toggle::after {display: none; }
.tipul-de-persoana{border-bottom: 1px solid var(--f1-border-color); padding: 16px 0 5px 0; line-height: 14px;}
.tipul-de-persoana a{ color: var(--f1-color)!important; width: 100%; display: block;}
.tipul-de-persoana .open{ min-width: 100%!important; background-color:var(--dropdown-bg); border: 1px solid var(--dropdown-border); padding: 4px 0; margin-top: -24px!important; margin-left: -12px!important; box-shadow:0 2px 12px 5px rgba(0,0,60,0.2);}
.tipul-de-persoana .open a{ color: var(--dropdown-a-color)!important; width: 100%; display: block; font-size: 1rem; font-weight: bold; padding: 0; margin: 0; border-top: solid 3px var(--dropdown-bg); border-left: solid 20px var(--dropdown-bg); border-bottom: solid 6px var(--dropdown-bg); }
.tipul-de-persoana .open a:hover{ background-color: var(--dropdown-a-hover); padding: 0; border-top: solid 3px var(--dropdown-a-hover); border-left: solid 20px var(--dropdown-a-hover); border-bottom: solid 6px var(--dropdown-a-hover); }

.search-client .select2-container--default .select2-selection--single{border-left:none; border-top: none; border-right: none; border-radius: 0; border-bottom:1px solid var(--f1-border-color); margin-top:1vh; padding:0; background-color:transparent!important;  } 
.search-client .select2-container .select2-selection--single .select2-selection__rendered{ padding-left: 0;}
.search-client .select2-container--default .select2-selection--single .select2-selection__arrow b{ display: contents;}
.select2-container--default .select2-selection--single .select2-selection__rendered{ color: var(--f1-color)!important;}
.select2-container--open .select2-dropdown--below{ border:1px solid var(--dropdown-border)!important; top: -34px; border-radius: 0.3rem 0.3rem 0.3rem 0.3rem!important; box-shadow: 0 2px 12px 5px rgba(0,0,60,0.2);; background-color: var(--dropdown-bg); }

.select2-container--default .select2-selection--single .select2-selection__placeholder{ color: var(--f1-color)!important;}
.select2-container--default .select2-search--dropdown .select2-search__field {border-radius:0!important; border-bottom:1px solid var(--f1-border-color)!important; border-top:none!important; border-left:none!important; border-right:none!important; background-color: transparent; color: rgba(255,255,255,1); }
.select2-results__option{ color: rgba(255,255,255,1);}
.select2-container{ width: 100%!important;}


.f1{ width:100%; border-radius:0; padding:0; margin-top:1vh; border-bottom:1px solid var(--f1-border-color); border-top:none; border-left:none; border-right:none; background-color:transparent!important; color: var(--f1-color)!important;}
.f1:focus {box-shadow:none; background-color:transparent!important;}
.f1-b{ width:100%; border-radius:0; padding:0 10px 0 0; margin-top:1vh; border-bottom:1px solid var(--f1-border-color); border-top:none; border-left:none; border-right:none; background-color:transparent!important; color: var(--f1-color);}
.f1-c{ width:100%; border-radius:0; padding:0; margin:0; border-bottom:1px solid var(--f1-border-color); border-top:none; border-left:none; border-right:none; background-color:transparent!important; color: var(--f1-color)!important;}
.f1-c:focus {box-shadow:none; background-color:transparent!important;}
.f2{ width:100%; border-radius:0; margin-top:1vh; border-bottom:1px solid var(--f1-border-color); border-top:none; border-left:none; border-right:none; background-color:transparent; text-align:left; padding:0 0 10px 0;}

/* styles the item in the list */
select option {
  color: #ccc;
  font-style: italic;
}
/* styles the default state to be placeholder-like */

select.form-select:invalid {
  color: rgba(0,0,30,0.2)!important;
}

select.form-select:valid option{
  color: rgba(0,0,30,0.2)!important;
}

/* select.form-select:invalid option {
  font-style: normal;
  color: #4b5154;
}
select.form-select:invalid option {
  color: #ccc;
  font-style: italic;
} */


.data-order-number{ width:100%; border-radius:0; padding:0 0 0 5px; margin-top:1vh; border-bottom:1px solid var(--f1-border-color); border-top:none; border-left:none; border-right:none; background-color:transparent!important; color: var(--f1-color)!important;}



.label-f1{ width: 100%; margin-top:1vh; border-bottom:1px solid var(--f1-border-color); color: var(--f1-color); line-height: 1.48; font-weight: bold; }

textarea{ margin-top: 10px;}
.form-control:focus{box-shadow:none !important; background-color:transparent!important; border-bottom:1px solid #000;}

.form-check-input:checked {background-color: rgba(0,235,145,1);border-color: rgba(0,210,145,1);}

.btn-1{ border: none; background-color:var(--green); color:var(--btn-color); padding:6px 40px; border-radius:8px; font-weight: bold; font-size: 1rem; line-height: 1.2; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 1px 2px -1px rgba(0, 0, 0, .15); }
.btn-1:hover{background-color:var(--green-hover); color:var(--btn-color);}

.btn-2{ border: none; background-color:var(--blue); color:var(--btn-color); padding:6px 40px; border-radius:8px; font-weight: bold; font-size: 1rem; line-height: 1.2; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 1px 2px -1px rgba(0, 0, 0, .15);}
.btn-2:hover{background-color:var(--blue-hover); color:var(--btn-color); }

.btn-2b{ border: none; background-color:var(--blue); color:var(--btn-color); padding:4px 0 4px 15px;  border-radius:0.25rem; font-weight: normal; font-size: 1rem; line-height: 1.2; width: 100%; display: block; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 1px 2px -1px rgba(0, 0, 0, .15); }
.btn-2b:hover{background-color:var(--blue-hover); color:var(--btn-color); }

.btn-2c{ border: none; background-color:var(--orange); color:var(--btn-color); padding:6px 40px; border-radius:8px; font-weight: bold; font-size: 1rem; line-height: 1.2; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 1px 2px -1px rgba(0, 0, 0, .15); }
.btn-2c:hover{background-color:var(--orange-hover); color:var(--btn-color); }

.btn-3{ border: none; background-color:var(--pink); color:var(--btn-color); padding:6px 40px; border-radius:8px; font-weight: bold; font-size: 1rem; line-height: 1.2; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 1px 2px -1px rgba(0, 0, 0, .15);}
.btn-3:hover{background-color:var(--pink-hover); color:var(--btn-color);}

.btn-3b{ border: none; background-color:var(--pink); color:var(--btn-color); padding:4px 0 4px 15px; border-radius:0.25rem; font-weight: normal; font-size: 1rem; line-height: 1.2; width: 100%; display: block; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 1px 2px -1px rgba(0, 0, 0, .15);}
.btn-3b:hover{background-color:var(--pink-hover); color:var(--btn-color);}

.btn-4{ border: none; background-color:var(--btn-4); color:var(--btn-color); padding:6px 40px; border-radius:8px; font-weight: bold; font-size: 1rem; line-height: 1.2; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 1px 2px -1px rgba(0, 0, 0, .15);}

.btn-5{ border: none; background-color:var(--grey); color:var(--f1-color); padding:6px 40px; border-radius:8px; font-weight: bold; font-size: 1rem; line-height: 1.2; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 1px 2px -1px rgba(0, 0, 0, .15);}
.btn-5:hover{border: none; background-color: var(--grey-dark-hover); color:var(--f1-color);}

.btn-5b{ border: none; background-color:rgba(0,0,30,1); color:var(--btn-5-color); padding:6px 40px; border-radius:8px; font-weight: bold; font-size: 1rem; line-height: 1.2; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 1px 2px -1px rgba(0, 0, 0, .15);}

.btn-6{ border: none; background-color:var(--dark); color:var(--btn-5-color); padding:4px 8px; border-radius:4px; line-height: 1.2; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 1px 2px -1px rgba(0, 0, 0, .15);}
.btn-6:hover{ text-decoration:none; color:var(--link-hover-color); opacity:0.7}

.btn-7{ border: none; background-color:var(--blue); color:#fff; padding:6px 40px; border-radius:8px; font-weight: bold; font-size: 1.2rem; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 1px 2px -1px rgba(0, 0, 0, .15); }
.btn-7:hover{ background-color:var(--blue-hover)}

.btn-add{ background-color:var(--blue); color:var(--btn-color); padding:4px 10px; border-radius:8px; font-size: 14px; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 1px 2px -1px rgba(0, 0, 0, .15);}
.btn-add:hover{ background-color:var(--blue-hover); color:var(--btn-color);}

.btn-info{border:none; color:var(--main-bg-color)!important; padding:0 1px 2px 4px; border-radius:0.25rem; background-color:var(--blue);}
.btn-info:hover{text-decoration:none; color:var(--main-bg-color); background-color:var(--blue-hover);}
.btn-info i{ font-size: 12px;}

.btn-cancel{ border:none; color:var(--btn-link-color); padding:0 6px 2px 6px; border-radius:0.25rem; background-color: var(--btn-cancel);}
.btn-cancel:hover{text-decoration:none; color:var(--link-hover-color); background-color: rgba(255,79,205,0.9);}
.btn-cancel i{ font-size: 12px;}

.btn-danger{ border:none; color:var(--main-bg-color)!important; padding:0 6px 2px 6px; border-radius:0.25rem; background-color: var(--red);}
.btn-danger:hover{text-decoration:none; color:var(--main-bg-color); background-color: var(--red-hover);}
.btn-danger i{ font-size: 12px;}

.btn-dark{border: none; color:var(--main-bg-color); padding:0 6px 2px 6px; border-radius:0.25rem; background-color:var(--blue); }
.btn-dark:hover{text-decoration:none; color:var(--main-bg-color); background-color:var(--blue-hover);}
.btn-dark i{ font-size: 12px;}

.btn-preview{border: none; color:var(--btn-color); padding:0 6px 2px 6px; border-radius:0.25rem; background-color:rgba(255,79,205,0.8); }
.btn-preview:hover{text-decoration:none; color:var(--link-hover-color); background-color:rgba(255,79,205,0.9);}
.btn-preview i{ font-size: 12px;}

.btn-green{border: none; color:var(--btn-color); padding:0 6px 2px 6px; border-radius:0.25rem; background-color:rgba(0,235,145,0.8); }
.btn-green:hover{text-decoration:none; color:var(--link-hover-color); background-color:rgba(0,235,145,0.9);}
.btn-green i{ font-size: 12px;}

.btn-warning{border: none; color:var(--link-warning-color); padding:4px 5px; border-radius:50%; background-color:var(--btn-warning); font-size: 16px!important;}
.btn-warning:hover{text-decoration:none; color:var(--link-warning-hover-color); background-color:var(--btn-hover-warning);}

.btn-success{border: none; color:var(--link-warning-color); padding:4px 6px; border-radius:50%; background-color:var(--btn-success); font-size: 16px!important;}
.btn-success:hover{text-decoration:none; color:var(--link-warning-hover-color); background-color:var(--btn-hover-success);}

.disabled-btn{ pointer-events: none; opacity: 0.3;}
.disabled-btn2{ pointer-events: none; opacity: 0.8;}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    background: rgba(255,29,37,0.9)!important; background-color: rgba(255,29,37,0.9)!important; 
}

.link{ text-decoration: none; color: var(--detaliu-comanda-color); }
.link:hover{ color: var(--detaliu-comanda-color); opacity: 0.7;}
.truncated-link {
  display: block;
  width: 75%;
  line-height: 35px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*color*/
.blue{ background-color: var(--blue)}
.blue-hover{ background-color: var(--blue-hover)}

.pink{ background-color: var(--pink)}
.pink-hover{ background-color: var(--pink-hover)}

.green{ background-color: var(--green)};
.green-hover{ background-color: var(--green-hover)}

.orange{ background-color: var(--orange)}
.orange-hover{ background-color: var(--orange-hover)}

.purple{ background-color: var(--purple)}
.purple-hover{ background-color: var(--purple-hover)}

.red{ background-color: var(--red)}
.red-hover{ background-color: var(--red-hover)}

.grey{ background-color: var(--grey)}
.grey-hover{ background-color: var(--grey-hover)}

.dark{ background-color: var(--dark)}
.cog{ background-color: var(--cog)!important}

/* set txt adaugare sablon email
--------------------------------------- */
.tox-tinymce{ border: none!important; border-radius: 0!important; }
.tox .tox-edit-area__iframe{ background-color: rgba(0, 0, 0, 0)!important;}
.tox .tox-statusbar{ background-color: rgba(0, 0, 0, 0)!important; border-top: 1px solid var(--table-border-bottom)!important;}

.tox .tox-toolbar-overlord{ background-color: rgba(0,0,0,0)!important;}
.tox:not(.tox-tinymce-inline) .tox-editor-header{ background-color: var(--bg-table-striped)!important;}

.tox .tox-toolbar__primary{ background: transparent!important;}


.meniu-departamente a{ color: var(--nav-link-color); font-weight: bold; font-size: 1.2rem; padding: 0; margin: 0 14px 0 0; border-bottom: 1px solid var(--nav-link-color); }
.meniu-departamente a:hover{color: var(--table-p-color); border-bottom: 1px solid var(--table-p-color);  }
.meniu-departamente a.selected{ color: var(--table-p-color); border-bottom: 1px solid var(--table-p-color);   }

.tox .tox-tbtn{ color: var(--table-p-color)!important;}
.tox .tox-tbtn svg{fill: var(--table-p-color)!important;}
.tox .tox-statusbar__branding svg{ fill: var(--main-bg-color)!important;}
.tox .tox-editor-container p{ color: var(--table-p-color)!important;}
.tox .tox-dialog-wrap__backdrop{ background-color: rgba(0,0,30,0.7)!important;}
.tox .tox-edit-area{ background-color: rgba(242,242,242,0.8);}
.tox .tox-dialog{ background-color: var(--raport-bg)!important; border-radius: 0.35rem!Important;}
.tox .tox-dialog__body-content{ padding:0!important; }
.tox .tox-textarea-wrap{border-radius: 0!important; border: none!important}
.tox .tox-dialog__footer{ background-color: var(--raport-bg)!important;}
.tox .tox-dialog__header{ background-color: var(--raport-bg)!important;}
.tox .tox-listboxfield .tox-listbox--select, .tox .tox-textarea, .tox .tox-textarea-wrap .tox-textarea:focus, .tox .tox-textfield, .tox .tox-toolbar-textfield{ background-color: rgba(242,242,242,0.8)!important; border-radius: 0!important; border: none!important}

/* set margin top
--------------------------------------- */
.mt-1{ margin-top:1vh!important}
.mt-2{ margin-top:2vh!important}
.mt-3{ margin-top:3vh!important}
.mt-4{ margin-top:4vh!important}
.mt-6{ margin-top:6vh!important}
.mt-8{ margin-top:8vh!important}
.mt-10{ margin-top:10vh!important}
.mt-12{ margin-top:12vh!important}
.mt-15{ margin-top:15vh!important}
.mt-20{ margin-top:20vh!important}


/* set margin bottom
--------------------------------------- */
.mb-2{ margin-bottom: 2vh!important;}
.mb-4{ margin-bottom: 4vh!important;}

/* set padding top
--------------------------------------- */
.pt-8{ padding-top:8vh!important}

/* set
--------------------------------------- */
.heading2{ font-size:18px; width:100%; border-bottom:3px solid var(--f1-border-color); padding-bottom:10px; font-weight: bold; color: var(--f1-color);}
.p-form{ font-size:16px; width:100%; border-bottom:1px solid var(--f1-border-color); padding:6px 0; color: var(--table-p-color); height: 100%;}
.hr-form{border-bottom:1px solid var(--dark);}
.hr-form input{ margin: 16px 0 0 0;}
.hr-form label{ padding: 16px 0 0 0; text-align: left;}

.left{ text-align:left}
.center{ text-align:center}
.right{ text-align:right}


.fa-angle-down:before{content:"";}

.hr-line{ border-bottom: 1px solid var(--f1-border-color); height: 100%;}
.hr-line p{ color: var(--f1-color); }
.hr-line label{ width: 100%!important; padding: 7px 0 0 0; margin: 0;}
.hr-line sup{ float: right;}
.label-f1 sup{ float: right; padding-top: 18px;}
.input-group-text{ border-radius:0; padding: 0; border-bottom:1px solid var(--f1-border-color); border-top:none; border-left:none; border-right:none; background-color:transparent!important; color: var(--f1-color)!important; line-height: normal;}


/* form modifications */
.inline-form-control { display: inline-block; width: auto; }

.sidebar-sticky {
  position: -webkit-sticky; /* Required for Safari */
  position: sticky;
  top: 0; /* Set the top offset during scroll */
  height: 100vh; /* Optional: Set to the height of the viewport */
  overflow-y: auto; /* Optional: Adds scroll to the sidebar if content overflows */
}

/*offcanvas*/
.offcanvas-body{ padding: 0 0 0 15px; height: 100vh;}
.offcanvas-start{ width: 100%;}

/*meniu mobile*/
.btn-tableta{ border: 1px solid rgba(228,229,233,1);  text-align: center; border-radius: 0.5rem;}
.btn-tableta i{ font-size: 42px; color: rgba(228,229,233,1); padding: 25px 25px 15px 25px ;}
.btn-tableta p{ font-size: 14px; color: #000; padding-bottom: 15px; text-transform: capitalize;}

.mobile-highlight{ background-color: rgba(255,255,255,1); border-radius: 0.5rem; padding: 10px 20px;}
.mobile-highlight .circle{ height: 60px; width: 60px; border-radius: 50%; background-color: rgba(228,229,233,1); text-align: center; font-size: 3.4vh; padding-top: 14px;}
.mobile-highlight .profile-link{ padding-top: 10px;}
.mobile-highlight .profile-link a{ font-size: 18px; font-weight: bold; color: var(--link-color);}
.mobile-highlight .log-out{ font-size: 1.4rem;}
.mobile-highlight .log-out a{ color: var(--link-color);}


/*bottom menu*/
/* .bottom-menu{ background-color: rgba(255,255,255, 0.8); padding: 10px 10px 10px 10px; border-radius: 0.5rem; margin: auto; width: fit-content; box-shadow: 0px 0px 2px rgba(0,0,0,0.4); border: 1px solid rgba(255, 255,255,1); } */
.bottom-menu {
  padding: 10px 10px 10px 10px;
  border-radius
Defines the radii of the outer border edge.
Learn more
Don't show
: 0.5rem; margin: auto; width: fit-content;
  
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset 1px 1px rgba(255, 255, 255, .02), inset -1px -1px rgba(255, 255, 255, .1), 1px 3px 12px -1px rgba(0, 0, 0, .15);
  background-color: transparent;
  background-image: linear-gradient(125deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 70%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(10px); border-radius:1rem;
}
.nav-pills .round{ border-radius: 50%; height: 36px!important; width: 36px!important; padding-top: 9px; text-align: center; margin: 0 10px; box-shadow: inset 1px 1px rgba(255, 255, 255, .2), inset -1px -1px rgba(255, 255, 255, .1), 1px 1px 2px -1px rgba(0, 0, 0, .15);}
.nav-pills .divider{ width:2px!important; height: 36px!important; background-color: rgba(0, 0, 0, 0.3); border-right: 1px solid rgba(255, 255, 255, 0.5); margin: 0 15px;}
.nav-pills li a{ color: #fff; text-shadow: 0 0 1px rgba(0, 0, 0, .2);}

/* devices min 576
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media (min-width: 576px){
.modal-dialog { margin: auto; margin-top: 15vh; left: 3.6vw; min-width: 1000px;}
}




/* devices max 1099
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1099px) {
  .set-bg{padding:0 2%;}
  .left-menu{ font-size:1.4rem; }
  .status-filter li{ padding:0 0 0 10px; font-size:1rem; }
  .detaliu-comanda h1{ font-size: calc(1.375rem + 1.1vw);}
  .functionalitati{ margin-top: 5vh;}
  .body-tabel p{ font-size: 14px;}
  .detaliu-comanda h2{ font-size:14px; }

}


/* devices min 1024 iPad 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1024px) {
  .set-bg{padding:0 0 14vh 0!important;}
  .left-menu{ margin-top:0; text-transform: capitalize; font-size:1.4rem;}
  .left-menu li{ padding:0.7vh 0; border-bottom: 1px solid rgba(228,229,233,1);}

  .status-filter li{ padding:0 30px 0 0; font-size:0.8rem; }
  .detaliu-comanda h1{ font-size: calc(1.375rem + 0.6vw);}
  .functionalitati{ margin-top: 10vh; min-height: 71.2vh; }
  .body-tabel p{ font-size: 14px;}
  .detaliu-comanda h2{ font-size:14px; }

}

/* devices min 1400
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1369px) {
  .set-bg-navigation{padding:0 5% 0 5%!important}
  .set-bg{padding:4vh 5% 0 5%!important}
  .left-menu{ margin-top:20vh; text-transform: uppercase; font-size:1.8rem;}
  .left-menu li{ padding: 0 0 0.7vh 0; border: none;}

  .status-filter li{ padding:0 30px 0 0; font-size:0.8rem; }
  .functionalitati{ margin-top: 20vh; min-height: 63vh; }
  .body-tabel p{ font-size: 16px;}
  .detaliu-comanda h2{ font-size:18px; }
}

/* chat box
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.chat-box-message {border : 1px solid rgba(235, 235, 235, 1); border-radius: 0.25rem; padding: 10px 30px 30px 30px; margin: 0 0 10px; background-color: var(--dropdown-menu-bg-color); }
.chat-box-message-title{ font-size: 18px; margin-bottom: 10px;}
.chat-box-time {font-size: 16px; color: var(--f1-color); margin: 0 0 10px; }

.bg-color-green { background-color: var(--green-hover); }
.bg-color-orange { background-color: var(--orange-hover); }
.bg-color-blue { background-color: var(--blue-hover); }
.bg-color-pink { background-color: var(--pink-hover); }
.bg-color-grey { background-color: var(--grey-hover); }


input.filter { width: 100%; border-radius: 0.25rem; padding: 0 0 0 15px; margin: 0; border:1px solid rgba(0,0,60,0.4);  background-color:rgba(255,255,255,0.6); color: var(--f1-color)!important;}
input.filter:focus {box-shadow:none; background-color:rgba(255,255,255,1);}