@media (max-width: 1400px) {
    .form-adauga-proiect .form-left .grid-col3 {grid-template-columns: repeat(2, 1fr);}
}


@media (max-width: 1200px) {
    .grid-col4 {grid-template-columns: repeat(3, 1fr);}
    .form-adauga-proiect .grid-col2 {grid-template-columns: repeat(1, 1fr);}
    .modal-dialog {width: calc(100% - 100px);}
    .popover {top: 114px; right: 41px;}
} /* end 1200px */


@media (max-width: 992px) {
    .grid-col4 {grid-template-columns: repeat(2, 1fr);}
    .grid-col3 {grid-template-columns: repeat(2, 1fr);}
    .modal-800 .modal-dialog {width: calc(100% - 40px); margin: 20px auto;}
   
} /* end 992px */


@media (max-width: 768px) {
    .modal-dialog {width: calc(100% - 30px);}
    .app-header-fixed .app-header {background: var(--menu);}
    .navbar-header {width: 100%;}

    .collapse.pos-rlt.navbar-collapse.box-shadow.bg-white-only {
        margin-top: 0; padding: 15px 15px 0px 15px !important;
    }
    .navbar-brand.text-lt {
        height: 42px !important;
    }
    .navbar-header > button > i {
        font-size: 26px;
        color: var(--mov);
        margin: 5px 0 0 0;
    }
    .app-aside.hidden-xs.bg-dark.collapse.show {
		position: fixed;
		top: 30px;
		bottom: 0;
		z-index: 1010;
		display: block !important;
		width: 75%;
		overflow-x: hidden;
		overflow-y: auto;
		visibility: visible;
	}

    .header-h1 {
        height: initial;
        padding: 80px 0 25px 0;
    }

    .tabul {margin: 0 0 20px 0;}
    .tabel-flex {border: 0; border-radius: 0px;}
    .tfl-header {display: none !important;}
    .tabel-flex-linie {
        position: relative;
        flex-wrap: wrap;
        border: 1px solid #d0d4e4;
        border-radius: 10px;
        padding: 10px;
        margin: 0 0 15px 0;
        overflow: hidden;
    }
    .tabel-flex-linie > span {
        flex: initial !important;
        flex-direction: column;
        align-items: start;
        width: 100% !important;
        border: 0;
        padding: 0;
        margin: 0 0 15px 0;
        order: 30;
        overflow: visible;
        white-space: normal;
    }
    .titlu-mob {
        display: block; width: 100%;
        font: 500 11px / 1 encode;
        text-transform: uppercase;
        margin: 0 0 4px 0;
        color: #89a0b4;
    }
    .tabel-flex-linie > span.span-nr {
        position: absolute; top: 0; right: 0;
        width: initial !important; min-width: 25px;
        justify-content: center; align-items: center;
        text-align: center;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-radius: 0 0 0 5px;
        padding: 5px;
        background: antiquewhite;
    }
    .tabel-flex-linie > span.gol {display: none;}
    .gol {display: none !important;}

    .but-icon-fara-text {height: 28px;}
    .but-icon-fara-text span {display: none;}

    .filtru-produse {flex-direction: column;}
    .filtru-produse .form-grup {margin: 0 0 15px 0;}

    
    .grid-col4 {grid-template-columns: repeat(1, 1fr);}
    .grid-col3 {grid-template-columns: repeat(1, 1fr);}
    .grid-col2 {grid-template-columns: repeat(1, 1fr);}

    .dashboard-cards {gap: 20px;}

    .status-culoare {width: 100%; margin: 0 0 5px 0;}
    .mesaj-predefinit , .mesaj-mare {
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
    }
    .span2, .span3 {grid-column: initial;}

    .tabel-flex-linie > span.span-task {position: static; grid-column: 1/-1;}

    .tabel-flex-linie > span.span-client {grid-column: 1/-1;}
    .tabel-flex-linie > span.span-tasknr .titlu-mob {
        display: inline-flex; width: initial;
        margin: 0 5px 0 0;
    }
    .tabel-flex .tabel-flex-linie > span:last-of-type {margin: 0;}

    .tabel-balanta .tabel-flex-linie, 
    .grid-col2-mob {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 20px;
    }
    .paginatie li a {
        height: 28px;
        font: 500 14px/1 encode;
        padding: 0px 7px; margin: 0;
    }
    .paginatie li a .mso {font-size: 20px;}
    .tabel-flex .tabel-flex-linie > span.span-edit-delete {flex-direction: row;}
    .form-grup:first-of-type {margin: 0 0 15px 0;}

    .but-icon-adauga {margin: 15px 0;}
    .but-icon-adauga + .but-icon-adauga {margin: 0 0 15px 0;}

    .but-adauga-absolute {
        position: static;
        border-radius: 10px;
        margin: 0 0 15px 0;
    }
    .reset-export {position: static; margin: 15px 0 0 0;}
    .flex-direction-row {flex-direction: row !important;}
    .flex-direction-row .titlu-mob {width: initial; margin: 0 7px 0 0;}
    .form-adauga-proiect .form-left .grid-col3 {grid-template-columns: repeat(1, 1fr);}
    .form-cu-data {padding: 0;}

    .termen-depasit {left: initial; right: -24px; z-index: 1;}
    .termen-depasit:before {
        font: 600 80px/1 var(--mso);
        margin: 0;
        opacity: 0.2;
    }

    .total-partial {
        border-radius: 5px; border: 0;
        margin: 0 0 15px 0; padding: 10px 15px;
    }

    .tema-dark .tabel-flex .tabel-flex-linie {border-color: var(--tabel-border-dark);}

    .form-adauga h3 .but-icon-adauga {
        position: static;
        margin: 10px 0 !important;
        width: 100%;
    }
    .culoare .material-symbols-outlined {top: -5px; left: 200px; font-size: 26px;}

    .tabel-totaluri {background: none;}
    .tabel-totaluri .tabel-flex-linie {background: #ccfbdd;}

    .buzunar-tabel {margin-top: -30px; padding-top: 30px;}
    .tabel-flex-linie:hover {background: #fff;}
    .tabel-flex-linie:last-child {border-bottom: 1px solid #ccc;}
    .modal-report-user h3 {font-size: 26px;}
    .mob {display: block;}
    .tabel-flex h4 {
        font: 700 14px/1.2 encode;
        padding: 0; margin: 0;
        border: 0;
    }

    .tabel-flex-linie .span-price-ron {flex-direction: row;}

    .dash-costuri {
        display: block;
        padding: 0; border: 0; border-radius: 0;
    }
    .dash-costuri .but {width: 100%; margin: 0 0 10px 0;}
    .dash-costuri h4 {width: 100%;}
    .dash-costuri label {width: 100%;}
    #preferencesform, #preferencesformcosts {display: block;}
    .bootstrap-switch {margin: 10px 0;}
    .interceptor-news .but-icon-adauga {top: -15px;}
    .input-okay {width: 100px;}

    .ips-grid2 .text-right {text-align: left !important; margin: 0 0 10px 0;}
    .ips-grid2 .text-right a {margin: 5px 0;}

    .span-ok .titlu-mob br {display: none;}
    .token p {padding: 0 0 10px 0;}
    .token strong {display: block; padding: 0 0 0 30px;}
    .tok-linie span {width: calc(100% - 30px);}

    .nav-pills {display: block;  border-bottom:0;}
    .nav-pills .nav-item {display: inline-block;}
    .nav-pills .nav-link {
        border-radius: 5px;
        border-bottom-color: #ccc;
        margin: 0 3px 5px 0;
    }

    .butoane-sus > div {display: inline-flex; flex-wrap: wrap; align-items: center;}
    .butoane-sus .text-right {text-align: left !important;}

    .header-print span {
        margin: 0;
        font-family: ubuntu700;
        font-size: 40px;
        line-height: 1;
        text-align: left;
        float: none;
    }
    #myElementId {margin: 0px;}
    .title-oferta {
        font-size: 30px;
        margin: 80px 0 0 0;
        text-align: left !important;
    }

    .legenda-sus-dr {position: static; margin: 0 0 20px 0;}
    .legenda-sus-dr em {margin: 0 10px 0 0;}
    .cu-sageata {padding: 0;}

    .div-reset {padding: 0 0 15px 0;}
    .mesajul {
        margin: -20px 0 20px 0;
        border-radius: 0px 0px 10px 10px;
    }
    .form-grup.text-right {text-align: left !important;}

    .caseta-login {width: 100%; border-radius: 0;}
    .pagina-login .sigla-ccf {display: block;}

    .modal-full {margin: 20px auto; max-width: calc(100% - 30px);}

    .modal-mesaj-interceptor .modal-header {padding: 10px 20px;}
    .modal-mesaj-interceptor .modal-body {padding: 20px;}
    .modal-mesaj-interceptor .modal-footer {padding: 10px 20px;}
    h4.modal-title {font-size: 18px;}
    textarea { min-height: 100px;}
    .total-fara-tva {margin: 0 0 10px 0;}
    .buttons-three {text-align: left !important;}

    .tabel-flex .listing-messages {padding: 0px !important;}
    .text-cu-scroll {max-height: 300px;}

    .tabel-structura-meniu {margin: 0;}
    .categorychoose {margin-right: 0;}
    .nivel-0 {padding: 17px 0;}
    .nivel-1 {margin-left: 20px;}
    .nivel-2 {margin-left: 40px;}
    .nivel-3 {margin-left: 60px;}

    .meniu-alege > div {padding: 7px;}
    .ma-buton .but {width: 100%;}
    .contactperson-information {margin: 0 0 20px 0 !important;}
    .modal-dialog[style="width: 800px;"] {width: calc(100% - 15px) !important;}
 

} /* end 768px */

@media (max-width: 576px) {
    .app-content-body {padding: 0 0px 50px 0px;}
    .tabul {border-radius: 0;}
}