@import url('styles.css');
:root {
    --field-error: #ff6266;
    --field-mandatory: #ffecc4;
    --primary: #FFFFFF;
    --secondary: #F4F4F4;
    --secondary-hover: #cecece;
    --secondary-active: #d7d6d6;
    --secondary-border: #b5b4b4;
    --primary-color: black;
    --gridview-headfoot: white;
    --gridview-color: black;
    --gridview-primarybg: #c8c8c8;
    --gridview-secondarybg: #eeeded;
    --select-func-bg: #dbdbdb;
    --arrow-background: black;
    --field-okay: #b9fbbb;
    --marquee-background: #7FCCFF;
    --menubarselector-inactive: #fff9da;
    --menubarselector-active: #F4F4F4;
    --storico-elaborated: #b9fbbb;
    --storico-pending: #ffe1b1;
    --discarted: #ff0000;
    --completed: #2aff00;
    --pending: #ffd300;
    --unselected-slidecb: #d1d1d1;
    --selected-slidecb: #adc249;
    --tab-selected: #d1d1d169;
    --tab-selecting: #98989873;
    --df-background: #ffffff;
    --df-border-color: #000000;
    --gw-background: #ffffff;
    --gw-border-color: #000000;
    --gw-row-in-progress: #a7eaff;
    --gw-row-evaded: #ffc467;
    --gw-row-active: #d5f1ff;
    --gw-row-selected: #dedede;
    --gw-row-selected-active: #b7c1ff;
    --allegato-height: 800px;
    --logout-hover: #d1d1d1;
    --error: #CC0000;
    --calendar-cell-active: #ffffff;
    --calendar-cell-active-hov: #ededed;
    --calendar-cell-inactive: #dbdbdb;
    --calendar-event-bg-todo: #d6ffc1;
    --calendar-event-bg-active: #b7c1ff;
    --calendar-event-bg-completed: #ff8c2ba3;
    --paging-previous: #bcfff8a3;
    --paging-current: #97e3ffb3;
    --paging-next: #ededed;
}

th, label, td {
    user-select:none;
}

body {
    height: 100dvh;
    scroll-behavior: smooth;
    margin: 0;
}

form {
    height:100%;
}

h1, h2, h3, h4, h5, h6 {
    margin: inherit;
}


.ContinuaBtn {
    margin-left:20px;
}

.CdAgTb {
}

.CdCliTb {
    margin-left: 20px;
}


.CdIndTb {
}

.notification-small {
    width: 10px;
    height: 15px;
    position: absolute;
    background: red;
    z-index: 9999;
    border-radius: 5px;
    right: -8px;
    top: -11px;
    color: white;
    padding: 1px;
    justify-content: center;
    display: flex;
    align-items: center;
}

.button-wrapper {
    display: flex;
    flex-direction: row;
    grid-gap: 20px;
    flex-wrap:wrap;
    padding: 10px;
    overflow: hidden;
    padding-bottom: 30px;
}

.button-wrapper div {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}

.button-wrapper > div {
    width: calc(50% - 20px);
    grid-gap: 10px;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 1px 1px 8px 0px #777777;
    padding: 5px;
    background:white;
    transition: all 0.3s ease;
}

.button-wrapper > div:hover {
    background: #e1e1e1;
}

.rb-table {
    border-radius: 5px;
    border: 1px solid black;
}

.rb-table td {
    position:relative;
}

.CdAnaTb {
    margin-top: 10px;
    margin-left: 42px;
    width: 60px;
    height: 18px;
}

.RagSocTb {
    margin-top: 10px;
    margin-left: 5px;
    width: 300px;
    height: 18px;
}

div.notify {
    position: absolute;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    right: -5px;
    top: -20px;
    background: red;
    padding: 2px;
    border-radius: 5px;
    color: white;
}

.IndirizzoTb {
    margin-top: 10px;
    margin-left: 58px;
    width: 200px;
    height: 18px;
}

.CAPTb {
    margin-top: 10px;
    margin-left: 16px;
    width: 60px;
    height: 18px;
}

.LuogoTb {
    margin-top: 10px;
    margin-left: 5px;
    width: 250px;
    height: 18px;
}

.NazioneShortTb {
    margin-top: 10px;
    margin-left: 58px;
    width: 50px;
    height: 18px;
}

.NazioneLongTb {
    margin-top: 10px;
    margin-left: 5px;
    width: 250px;
    height: 18px;
}

.gwHeader {
}

.gwHeader > th {
    background: white !important;
    position: sticky;
    top: 0;
    z-index: 9999;
    outline: 1px solid #bbbbbb;
    border-collapse: collapse;
}

.gwBody {
    margin-top:-1px;
}

.LabelAgente {
    margin-left: 20px;
    margin-right: 5px;
    text-align: right;
}

.OmaggioCb {
    margin-left: 25px;
    margin-right: 5px;
    text-align: right;
}

.grid {
    direction: ltr;
    height: 361px;
    overflow: scroll;
}

.ArticoloDiv {    
    position: relative;
    margin-right: 0%;
    margin-left: 0%;
    height: 15px;
    width: 24%;
    height: 270px;
    top: 30px;
    right: 383px;
    width:566px;
    height:218px;
    resize:none;
}
.TabellaArticoloDiv {
    position: relative;
    margin-right: 0%;
    margin-left: 5px;
    height: 15px;
    width: 100%;
    height: 270px;
    top: 5px;
    right: 9px;
    overflow:scroll;
}

.startBtn 
{
    visibility:visible;
    position:relative;
    top: -288px;
    left: 6px;
    width: 455px;
    bottom: 288px;
}

.HeaderGrid1 {
    text-align:right;
    direction:ltr;
}

.RowsGrid1 {
    text-align: right;
    direction: ltr;
}

.flex-columns {
    display: flex;
    flex-direction: column;
}

.flex-btn-wrap {
    display: flex;
    flex-direction: column;
    width:100%;
    max-width:285px;
    grid-gap:10px;
}

.flex-btn-wrap > div {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    border-bottom:1px solid;
}


.tabSelector {
    background: #b9afff66;
    position: absolute;
    height: 0px;
    user-select: none;
    border-radius: 5px;
    z-index: 0;
}

.tabSelOutline {
    background: inherit;
    position: absolute;
    user-select: none;
    border-radius: 5px;
    border: 1px solid var(--gridview-color);
}

.logoutDiv {
    outline: 1px solid var(--primary);
    border-radius: 5px;
    padding: 3px;
    transition: all 0.3s ease-in-out;
}

    .logoutDiv:hover {
        outline: 1px solid var(--primary-color);
    }



.flex-button {
    display: flex;
    flex-direction: column;
    grid-gap: 6px;
    flex-wrap: nowrap;
    align-items:center;
    vertical-align:middle;
    width:100px;
}

.flex-rows {
    display: flex;
    flex-direction: row;
}

.flex-rows-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
}

.menubar {
    width: 100%;
    max-width: 285px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flex-columns-cnt {
    display: flex;
    flex-direction: column;
    grid-gap:15px;
}

    .flex-columns-cnt > div {
        display: flex;
        flex-direction: row;
        grid-gap: 10px;
        flex-wrap: nowrap;
    }

        .flex-columns-cnt > div > div > label {
            font-weight: bold;
        }

        .flex-columns-cnt > div > div > div > label {
            font-weight: bold;
        }


.flex-rows-fd {
    display: flex;
    flex-direction: row;
    grid-gap:10px;
    flex-wrap:nowrap;
}


.ms_circle {
    width: 13px;
    height: 1px;
    border-radius: 7px;
    background: black;
}

.headerLb {
    font-weight:bold;
    font-size:22px;
    text-decoration:underline;
}


table div.pending-ball {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: var(--pending);
}

table div.approved-ball {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: var(--completed);
}

table div.discarted-ball {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: var(--discarted);
}


.menubarSelector_active {
    transform:translateX(21px);
    width: 20px;
    height: 30px;
    border-left: 0px !important;
    border: 1px solid black;
    border-radius: 0px 10px 10px 0px;
    background: #F4F4F4;
}

.menubarSelector_inactive {
    transform: translateX(21px);
    width: 20px;
    height: 30px;
    border-left: 0px !important;
    border: 1px solid black;
    border-radius: 0px 10px 10px 0px;
    background: #fff9da;
}

.reload {
    transition: transform ease-in-out 0.7s;
}

.reload:hover {
    transform: rotate(-360deg);
}

tr.row {
    transition: all 0.3s ease-in-out;
}

    tr.row:hover {
        background: rgb(144 144 144 / 0.40) !important;
    }


table {
    background: white;
}

table {
    background: var(--gw-background);
}

table * {
    background: var(--gw-background);
}


td input[type="button"].select-button, input[type="submit"].select-button, button.select-button {
    display: none;
}

    td input[type="button"].select-button:hover, input[type="submit"].select-button:hover, button.select-button:hover {
        opacity: 0.5;
    }

.calendario td[data-status="current"] div[data-role="cell-day"] {
    background: blue;
    color: white;
    border-radius: 10px;
    height: fit-content;
}

.calendario {
    border-collapse: collapse;
}

    .calendario th, td {
        border: 1px solid black;
        position: relative;
        z-index: 1;
    }


    .calendario td.inactive {
        background: var(--calendar-cell-inactive);
    }

    .calendario td.active {
        background: var(--calendar-cell-active);
    }

        .calendario td.active:hover {
            background: var(--calendar-cell-active-hov);
        }

    .calendario td div[data-role="cell-wrap"] {
        padding: 3px;
        padding-bottom: 0px;
        height: 5dvh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        position: relative;
        z-index: 0;
    }

    .calendario td div[data-role="cell-wrap"]:has(div[data-role="cell-events"] > div) {
        background: color(srgb 1 0.29 0.15 / 0.64) !important;
    }

    .calendario td div[data-role="cell-events"] {
        border-radius: 5px;
        overflow: hidden;
        flex: 1;
        color: red !important;
    }

.calendario td div[data-role="cell-day"] {
    padding: 1px;
    padding-right: 2px;
    padding-left: 2px;
}

.calendario td.active div[data-role="cell-day"][data-festive="yes"] {
    color: red;
}

.calendario td div[data-role="cell-events"] > div:nth-child {
    display: none;
}

@media only screen and (min-width: 800px) {
    .calendario td div[data-role="cell-wrap"] {
        padding: 5px;
        padding-bottom: 0px;
        height: calc(5dvh + 10px);
        grid-gap: 15px;
    }


    .calendario td[data-status="current"] div[data-role="cell-day"] {
        background: blue;
        color: white;
        border-radius: 10px;
        height: fit-content;
    }


    .calendario td div[data-role="cell-day"] {
        padding: 5px;
    }

    .calendario td div[data-role="cell-events"] {
        display: flex;
        height: calc(100% - 5px);
        overflow: initial;
        flex: 1;
    }
}

@keyframes marginLeft0to-100 {
    0% { 
        margin-left: 0%; 
    } 100% { 
        margin-left: -100%; 
    }
}

@keyframes marginLeft-100to0 {
    0% {
        margin-left: -100%;
    }

    100% {
        margin-left: 0%;
    }
}

@keyframes intermittentRed {
    0% {
        background: white;
        color:black;
        border-color:red;
    }

    49.999% {
        background: white;
        color: black;
        border-color: red;
    }

    50% {
        background: red;
        color: white;
        border-color: black;
    }


    100% {
        background: red;
        color: white;
        border-color: black;
    }
}