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: #000; 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*/
.set-bg{padding:0 5%;}

.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;}

/*navigation*/
.bg-light{ background: transparent!important; padding-top: 3vh;}

.navbar-brand{ font-size:21px; font-weight:bold; }
.navbar-expand-lg .navbar-nav .nav-link{padding-right:1.5rem; padding-left:1.5rem}
.navbar-nav{ font-size:18px; width:100%; display:block; text-align:right; 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{ background-color:var(--dropdown-menu-bg-color); 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;}

.dropdown-item{ font-weight: bold; font-size: 1rem; margin-bottom: 10px; }
.dropdown-item:hover{ width: 100%; background-color: transparent; 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;}


/*left-menu*/
.left-menu{ font-size:1.8rem; margin-top:20vh; text-transform: uppercase;}
.left-menu li{ padding-bottom:0.7vh}
.left-menu li a{ text-decoration:none; color: var(--left-menu-li-a-color); text-shadow: var(--text-shadow);}
.left-menu li a.selected{ font-weight:bold; }
.left-menu li a:hover{ opacity:0.8}

.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(https://mpd.alizcollection.ro/images/bg-login.png); background-repeat: no-repeat; background-size:contain; background-position: top left; }
.main-login { margin-top: 36vh;}
.main-login h1{ color: var(--heading-color); font-size: 5vw; line-height: 4.4vw;}
.main-login h2{ color: var(--heading-color); font-size: 1.4vw; margin-top: 4vh;}
.main-login h2 span{ font-size: 1.4rem;}
.main-login h2 a{ text-decoration: none; color: var(--link-color);}
.main-login h2 a:hover{ text-decoration: none; opacity: 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;}
.btn-7{ border: none; background-color:#221958; color:#fff; padding:10px 60px; border-radius:8px; font-weight: bold; font-size: 1.2rem; }
.btn-7:hover{ opacity: 0.8;}

.error h4{ font-weight: bold; color: #FF4FCD;}

/*body*/
.body-page{ padding-top: 6vh; min-height: 82vh; padding-bottom: 12vh ; }

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

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

/* width */
::-webkit-scrollbar {width: 6px; border-radius:0.25rem; background: #fff;   }
  
  /* Track */
  ::-webkit-scrollbar-track { background: #fff; border-radius:0.25rem;}
   
  /* Handle */
  ::-webkit-scrollbar-thumb { background: rgba(34,25,88,0.9); border-radius:0.25rem; }
  



/*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 }


/*green*/
.green .hr{ background-color:var(--hr-home); height:4px; border-radius: 0.25rem;}
.mpd{background-color:rgba(0,235,145,0.8); color: #000;}

/*pink*/
.pink .hr{ background-color:var(--hr-home); height:4px; border-radius: 0.25rem;}
.notif{background-color:rgba(255,79,205,0.8); color: #000;}

/*blue*/
.blue .hr{ background-color:var(--hr-home); height:4px; border-radius: 0.25rem;}
.mourals{background-color:rgba(0,193,207,0.8);color: #000;}

/*red*/
.red .hr{ background-color:var(--hr-home); height:4px; border-radius: 0.25rem;}
.walstory{background-color:rgba(255,29,37,0.8);color: #000;}

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


.bg-left{ float:left; width:75%; margin-top:1vh}
.bg-left li{ padding:5px 0 5px 10px; margin-top:10px; font-size: 14px; text-shadow: var(--text-shadow);}
.bg-left li a{ color: #000; text-shadow: var(--text-shadow); }

.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: #000; text-shadow: var(--text-shadow); }

/*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{ font-size: 14px; 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;}

.cap-tabel-category{border-radius: 0.25rem; background-color:rgba(255,147,30,0.6); color: #000;}
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(--bg-table-striped)}
.dataTables_wrapper .dataTables_filter { margin-bottom: 3vh;}
.dataTables_filter{border-bottom:1px solid #000;}
.dataTables_wrapper .dataTables_filter input{ width: 380px; border:none; background-color:transparent!important; border-radius: 0;}
.dataTables_wrapper .dataTables_info{ margin-top: 2vh;}
.dataTables_wrapper .dataTables_paginate{margin-top: 2vh;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{ counter-reset: #fff; border: none; border-radius: 0.25rem; background-color:rgba(0,193,207,0.6)}

table, td{padding: 0; margin: 0;} 

/*acordeon*/
.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(--btn-date-filter2-hr);}
.search .f3{ border: none!important; font-size: 16px; background-color: transparent; color: var(--btn-date-filter2); border-radius: 0;}
.btn-search{ padding: 0; margin: 0; border: none;  background-color: rgba(255, 255,255,0);}

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


.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(--btn-date-filter2-hr); border-left: none; border-top: none; border-right: none; font-size: 16px; background-color: transparent; color: var(--btn-date-filter2);}

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


.date-filter2 li{display:inline; margin:0 14px 0 0; background-color:var(--data-filter2); border-radius:0.25rem; }
.date-filter2 li a{color:var(--link-data-filter2);}

.date-filter2 li:hover{background-color:var(--data-filter2-hover); border-radius:0.25rem; color:var(--link-hover-color);}
.date-filter2 li:hover a{ color:var(--link-selected--color);}

.date-filter2 li .dropdownTitle1{  text-decoration:none; font-size:1rem; font-weight: bold; float: left; padding: 6px 5px 6px 20px!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 20px 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{ text-align:center; font-size:18px; padding:8px 0; font-weight: normal; color: rgba(0,0,60,1);}
.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; margin-top: 20vh; }
.functionalitati li{ padding-bottom: 30px;}
.functionalitati a{ font-size: 1.2rem; color: rgb(0,0,0,1); border-radius: 50%; padding: 6px 8px;}
.functionalitati a:hover{ text-decoration: none; color: rgb(0,0,0,1); opacity: 0.7;}



/*butoane detaliu comanda*/
.butoane-status{ border-top:2px solid var(--butoane-status); 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:#000; font-weight:bold; font-size: 14px; opacity: var(--btn-status-opacity);}
.btn-status:hover{ color:#000; text-decoration:none; opacity:1}
.btn-status.active{opacity: 1!important;}

/*status colors*/
.noua{ 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; }
.necesar{ background-color:var(--status-necesar); border-radius: 0.25rem; color: var(--status-necesar-color)} 
.expediat{ background-color:var(--status-expediat); border-radius: 0.25rem; }

.status-bullet{ width: 14px; height: 14px; margin-right: 10px; float: left; border-radius: 50%; }

.anulata{ background-color:var(--status-print); border-radius: 0.25rem; }
.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-size:18px; font-weight:bolder; color: var(--color-modal-text);}
.modal-footer{ border: none;}
.modal-open{ background-color: var(--modal-open);}
.modal-content{background-color: var(--modal-content);}

/*alerte*/
.alert-success{background-color:var(--alert-success); border: none; color: #000; 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);}

/* form
--------------------------------------- */
.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);}
.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;}
.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;}
.f1:focus {box-shadow:none; background-color:transparent!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; background-color:transparent!important; border-bottom:1px solid #000;}


.btn-1{ border: none; background-color:var(--btn-1); color:var(--btn-color); padding:6px 40px; border-radius:8px; font-weight: bold; font-size: 1rem; }
.btn-2{ border: none; background-color:var(--btn-2); color:var(--btn-color); padding:6px 40px; border-radius:8px; font-weight: bold; font-size: 1rem; }
.btn-3{ border: none; background-color:var(--btn-3); color:var(--btn-color); padding:6px 40px; border-radius:8px; font-weight: bold; font-size: 1rem; }
.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; }

.btn-5{ border: none; background-color:var(--btn-5); color:var(--btn-5-color); padding:6px 40px; border-radius:8px; font-weight: bold; font-size: 1rem; }
.btn-5:hover{border: none; background-color:var(--btn-5-hover); color:var(--link-hover-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; }

.btn-6{ border: none; background-color:#000; color:var(--btn-5-color); padding:4px 8px; border-radius:4px}
.btn-6:hover{ text-decoration:none; color:var(--link-hover-color); opacity:0.7}


.btn-info{border:none; color:var( --btn-color); padding:0 1px 2px 4px; border-radius:0.25rem; background-color:var(--btn-info);}
.btn-info:hover{text-decoration:none; color:var(--link-hover-color); background-color:rgba(0,193,207,0.9);}
.btn-info i{ font-size: 12px;}

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

.btn-dark{border: none; color:var(--btn-link-color); padding:0 6px 2px 6px; border-radius:0.25rem; background-color:var(--btn-dark); }
.btn-dark:hover{text-decoration:none; color:var(--link-hover-color); background-color:rgba(0,0,60,0.9);}
.btn-dark 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);}


/* set margin
--------------------------------------- */
.mt-2{ margin-top:2vh!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
--------------------------------------- */
.heading2{ font-size:18px; width:100%; border-bottom:2px solid var(--hr-home); padding-bottom:10px; font-weight: bold; color: var(--heading2-color);}
.p-form{ font-size:16px; width:100%; border-bottom:1px solid var(--f1-border-color); padding:6px 0; color: var(--table-p-color);}
.hr-form{border-bottom:1px solid #000;}
.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}

.table{--bs-table-striped-bg:rgba(0, 0, 0, 0.075);}
.fa-angle-down:before{content:"";}

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

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


/* devices min 640
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1300px) {

}


/* devices min 1400
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1300px) {

}

/* devices min 1400
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1600px) {

}