/* THIS FILE CONTAINS STANDARD STYLES FOR SIMPLESAP */
/* THIS PARTICULAR FILE CONCERNS WITH THE CSS OF THE CLASSES 
    - RWD (FLEX)
    - NORMAL CLASSES (ALPHABETICAL)
    - MEDIA QUERIES (MOBILE FIRST APPROACH)
*/

/* FIRSTLY THE RESPONSIVE WEB DESIGN*/
/* DYNAMIC RWD */
    .flex-container {
        display: flex;
        flex-wrap: nowrap;
    }

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

    .flex-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-centerbase {
        align-items: baseline;
    }

    .flex-space-between {
        justify-content: space-between;
    }

    .flex-grow {
        flex-grow: 1;
    }

    .flex-101 {
        flex: 1 0 auto;
    }

    .flex-50 {
        flex: 100%;
    }

    .flex-33 {
        flex: 100%;
    }

    .flex-child {
        flex: 0 0 auto;
    }

    .flex-centerxy {
        align-items: center;
        justify-content: center;
    }

    .flex-centery {
        align-items: center;
    }

    .flex-centerx {
        justify-content: center;
    }

    .flex-device-toggle {
        flex-direction: column;
    }

    .grid-auto {
        display: grid;
        grid-template-columns: auto;
        grid-auto-rows: auto;
    }

    .grid-column {
        display: grid;
        grid-auto-flow: column;
    }

    .grid-row {
        display: grid;
        grid-auto-flow: row;
    }

    .grid-1-1 {
        display: grid;
        grid-template-columns: auto;
        column-gap: 1rem;
        row-gap: 1rem;
    }

    .grid-2-1 {
        display: grid;
        grid-template-columns: auto;
        column-gap: 1rem;
        row-gap: 1rem;
        overflow: visible;
    }

    .grid-3-3 {/* mobile first */
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 1rem;
        row-gap: 1rem;
    }

/* ELEMENT CLASSES */

    span.frac {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }
    span.frac > sup, span.frac > sub {
        display: block;
        font: inherit;
        padding: 0 0.3em;
    }
    span.frac > sup {border-bottom: 0.08em solid;}
    span.frac > span {display: none;}

/* TABLE CLASSES */
    .row-select:hover {
        background-color: rgb(185, 255, 232);
    }

/* DIAGNOSTICS CLASSES */
    .diagnostic-panel-head {
        display: grid;
        width: 100%;
        grid-auto-flow: column;
    }

    .diagnostic-panel-head div {
        display: grid;
        grid-auto-flow: column;
        align-items: baseline;
        justify-items: center;
    }

    .diagnostic-panel-body {
        margin-top: 2rem;
        display: grid;
        width: 100%;
        grid-template-columns: repeat(4, auto);
    }

/* INPUT MODAL CLASSES */
    .relation-search-suggestion-container {
        overflow: auto;
    }

    .relation-search-suggestion-container table{
        width: 100%;
    }

    .json-assoc {
        display: grid;
        grid-template-columns: max-content 1fr;
    }

/* PURCHASE ORDER CLASSES */
    .purchase-order-purchase-price-display {
        border: 1px solid #c6c6c6;
        padding: 0.2rem;
        border-radius: 0.3rem;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .purchase-order-purchase-margin-display {
        border: 1px solid #c6c6c6;
        padding: 0.2rem;
        border-radius: 0.3rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 0;
    }

/* PLANNER CLASSES */
    .planning-time-marker {
        position: relative;
        text-align: center;
        grid-column: span 2;
    }

    .planning-time-marker::after{
        content: '|';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .planning-timeline-top {
        display: grid;
        grid-template-columns: repeat(48,1fr);
        grid-auto-flow: column;
        height: 2rem;
    }

    .planning-time-marker:first-child {
        grid-column: span 1;
        text-align: left;
    }

    .planning-time-marker:first-child::after {
        left: 0;
    }

    .planning-time-marker:last-child {
        grid-column: span 1;
        text-align: right;
    }

    .planning-time-marker:last-child::after {
        right: 0;
        transform: translateX(0);
    }

    .planning-unavailable {
        background : grey;
        position : absolute;
        left : 0;
        top: 0;
        height : 100%;
    }

    .planning-float-zone-header {
        display: grid;
        grid-template-columns: max-content 1fr;
        align-items: baseline;
    }

    .planning-card {
        background-color: white;
        position: absolute;
        padding: 3px;
        border-radius: 5px;
        display: grid;
    }

    .planning-card-id {
        width: max-content;
        justify-self: end;
        background: #333333;
        color: white;
        border-radius: 8px;
        padding: 2px 5px !important;
    }

    .planning-card-icon {
        height: 1.2rem;
    }

    .planning-card-name {
        font-weight: bold;
    }

    .planning-card span {
        height: initial !important;
        padding: 2px;
    }

    .planning-card-header {
        display: grid;
        grid-template-columns: max-content 1fr;
        height: initial !important;
    }

    .planning-header {
        height: 4.5rem;
        padding: 0.5rem;
    }

    .planning-header button {
        padding: 0.4rem;
        color: black;
        font-weight: bold;
        background: rgba(0, 0, 0, 0);
    }

    .planning-area-body span, .planning-area-body div {
        height: 4.5rem;
    }

/* BANK STATEMENT INPUT CLASSES */
    .bank-statement-add {
        grid-auto-flow: column;
        display: grid;
        justify-content: center;
    }

    .bank-statement-table img {
        width: 3rem;
    }

    
/* NORMAL CLASSES */
    .programme {
        display: none;
        grid-template-rows: max-content 1fr;
    }

    .buttoned_slider {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(100px,auto));
    }

    .buttoned_slider button {
        width: 100%;
        aspect-ratio: 1;
        color: black;
        background: white;
        border: 3px solid black;
    }

    .crossed {
        text-decoration: line-through;
        color: gray;
    }

    .comment-section {
        display: grid;
        grid-template-columns: 10% 1fr 10% 10%;
    }

    .comment-section-area {
        padding: 0 0 1rem 1rem;
        display: grid;
        grid-template-rows: max-content 1fr;
    }

    .comment-section textarea {
        padding: 0.3rem;
        font-size: 1rem;
    }

    .datalist_suggestions {
        position: absolute;
        top: 100%;
        padding: 0 1rem;
        background: white;
        border: 1.5px solid #c6c6c6;
        border-radius: .3rem;
        width: 100%;
        z-index: 1;
    }

    .datalist_suggestions button {
        background: initial;
        color: black;
        padding: 0;
        width: 100%;
        text-align: left;
    }

    .datalist_suggestions button:hover {
        background-color: #87e3ff;
    }

    .datalist_suggestions_not_positioned {
        top: 100%;
        padding: 0 1rem;
        background: white;
        border: 1.5px solid #c6c6c6;
        border-radius: .3rem;
        width: 100%;
        z-index: 1;
    }

    .datalist_suggestions_not_positioned button {
        background: initial;
        color: black;
        padding: 0;
        width: 100%;
        text-align: left;
    }

    .datalist_suggestions_not_positioned button:hover {
        background-color: #87e3ff;
    }

    .dashboard-buttons-container {
        overflow-y: scroll;
        display: grid;
        grid-template-columns: auto;
        gap: 1rem;
    }

    .disabled-button {
        background-color: gray;
    }

    .input-displayer {
        padding: .5rem 1rem;
        display: grid;
        row-gap: .5rem;
        overflow: visible;
    }

    .input-displayer span {
        color: rgb(255, 68, 68)
    }

    .input_modal_container {
        background-color: rgba(0, 0, 0, 0.1);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 2;
    }

    .input_modal_field {
        display: grid;
        background-color: white;
        padding: 1rem;
        width: calc(100% - 2rem);
        border-radius: 15px;
        flex-direction: column;
        height: calc(100vh - 2rem);
    }

    .input-modal-input {
        width: 5rem;
        text-align: right;
    }

    .login_modal {
        background-color: white;
        border-radius: 20px;
        max-width: 800px;
        margin: 0 auto;
    }

    .login_modal input {
        width: 100%;
        max-width: 100%;
    }

    .modal {
        padding: 1rem;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        z-index: 20;
        justify-content: center;
        align-content: center;
        background: rgba(0,0,0,0.3);
    }

    .modal-menu {
        display: grid;
        overflow: visible;
        grid-template-columns: max-content 1fr max-content;
        align-items: center;
    }

    .modal-menu .modal-menu-spacer {
        flex: 1;
        display: none;
    }

    .modal-menu button {
        width: 4rem;
        padding: .5rem 0.7rem;
        height: 4.5rem;
    }

    .modal-menu-plan-area {
        display: inline-grid;
        grid-auto-flow: column;
        width: unset !important;
        grid-column: span 4;
    }

    .modal-menu-relation-resource-area {
        overflow: visible;
        width: 100% !important;
        display: grid;
        grid-auto-flow: column;
    }

    .modal-menu-relation-resource-area input {
        width: 100%;
        max-width: 100%;
        z-index: 2;
    }

    .modal-menu-relation-resource-area div {
        width: 100%;
        position: absolute;
        top: calc(100% - 3px);
        padding-top: 3px;
        border: 1px solid #c6c6c6;
        border-top: none;
        z-index: 1;
        background: white;
        border-bottom-left-radius: 0.3rem;
        border-bottom-right-radius: 0.3rem;
    }

    .modal-menu-relation-resource-area button {
        background: initial;
        z-index: 2;
        position: absolute;
        right: 0;
        top: 50%;
        height: 50%;
        width: fit-content;
        padding: 0.2rem 0.3rem;
    }

    .modal-menu-relation-resource-area div button{
        width: 100%;
        padding: 0.5rem;
        color: initial;
        position: relative;
    }

    .modal-menu-relation-resource-area div button:hover{
        background-color: #b9ffe8;
    }

    .modal-menu .close-button {
        grid-row: 1;
        grid-column: -2;
    }

    .modal_message_box {
        padding: 1rem 0.5rem;
        border-radius: 10px;
        background: white;
        display: grid;
        grid-template-columns: auto auto;
    }

    .modal_input_box{
        padding: 1rem 0.5rem;
        border-radius: 10px;
        background: white;
        display: grid;
        grid-template-columns: auto;
        max-width: 80%;
    }

    .modal-input-hover-border {
        border-color: rgba(0, 0, 0, 0);
    }

    .modal-input-hover-border:focus {
        border-color: rgba(0, 0, 0, 1);
    }

    .modal-input-hover-border:hover {
        border-color: rgba(0, 0, 0, 1);
    }


    .modal-file-input {
        border : 1.5px solid #c6c6c6;
        padding : 0.3rem;
        border-radius : 0.3rem;
        display : flex;
        align-items : center;
    }

    .modal-file-input input {
        display: none;
    }

    .negative-button {
        border: 2px solid black;
        background-color: white;
        color: black;
    }

    .negative-button:hover {
        border: 3px solid black;
        transform: scale(1.05);
    }

    .payment-body {
        display: grid;
        grid-auto-flow: column;
        align-content: center;
        grid-auto-rows: max-content;
    }

    .payment-body div {
        margin: 0.5rem;
        padding: 0.5rem;
        border-radius: 15px;
        justify-items: center;
        align-content: center;
        display: grid;
    }

    .payment-body-2 {
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        grid-auto-rows: max-content;
    }

    .payment-body-2 div{
        padding: 0.5rem;
        border-radius: 15px;
        justify-items: center;
        display: grid;
    }

    .payment-body .available-payment-method {
        background: linear-gradient(0deg, #6cd427 10%, transparent);
    }

    .payment-body .available-payment-method:hover {
        background: linear-gradient(0deg, #6cd427 40%, transparent);
    }

    .payment-body .unavailable-payment-method {
        background: linear-gradient(0deg, #a7a7a7 10%, transparent);
    }

    .payment-body .unavailable-payment-method:hover {
        background: linear-gradient(0deg, #a7a7a7 40%, transparent);
    }

    .cash-options-container {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        aspect-ratio: initial !important;
    }

    .row-suggestion:nth-child(even) {
        background-color: rgb(185, 255, 232);
    }

    .row-suggestion:hover {
        background-color: rgb(119, 255, 210);
    }

    .tab-button {
        border-radius: 0;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        padding: 0.8rem;
        font-size: 1.2rem;
        font-weight: bold;
    }

    .tab-button:active {
        color: white;
    }

    .sales-order-option-list {
        overflow-y: auto;
    }

    .sales-order-option-container {
        padding: 0px 1rem;
        display: grid;
        grid-template-rows: max-content max-content 1fr;
    }

    .sales-order-add-button-container {
        display: flex;
        flex-direction: column;
    }

    .sales-header-name-container {
        align-items: end;
    }

    .sales-header-name-container img {
        height: 2rem;
        opacity: 0;
        transform: translateX(-5px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .sales-header-name-container:hover img {
        opacity: 1;
        transform: translateX(0);
    }

    .sales-header-name-container img:hover {
        cursor: pointer;
    }

    .sales-order-table td:nth-child(1) {
        display: none;
    }

    .mobile-sales-order-body-area {
        display: grid;
    }

    .mobile-sales-order-body-area button {    
        width: 3rem;
        aspect-ratio: 1;
        padding: 0.4rem !important;
    }

    .mobile-sales-order-table td {
        padding: 0.2rem;
    }

    .mobile-sales-order-options-table {
        display: grid;
        grid-auto-flow: row;
        gap: 1rem;
    }

    .mobile-sales-order-products {
        display: none;
        grid-auto-rows: 1fr max-content;
    }    

    .mobile-sales-order-options-table .mobile-service-row {
        display: grid;
        grid-template-columns: max-content 1fr max-content;
        gap: 0.3rem;
    }

    .mobile-sales-order-options-table .mobile-product-row {
        display: grid;
        grid-template-columns: max-content 1fr max-content;
        gap: 0.3rem;
    }

    .mobile-sales-order-options-table .mobile-add-button-container {
        grid-column: 1 / span 3;
        display: grid;
        grid-auto-flow: column;
        justify-content: end;
    }

    .mobile-sales-order-services {
        display: none;
        grid-auto-rows: 1fr max-content;
    }

    .mobile-sales-order-menu-button-container {
        display: grid;
        grid-row: 1;
        justify-items: center;
    }

    .mobile-sales-order-menu-button-container span {
        font-weight: bold;
        font-size: .9rem;
    }

    .side-menu {
        background-color: white;
        position: absolute;
        top: 0;
        display: grid;
        height: 100%;
        z-index: 1;
        grid-template-rows: repeat(auto-fill, 3rem);
        overflow: visible;
        transform: translateX(-100%);
        transition: transform 0.5s ease-in-out;
    }

    .move-right {
        transform: translateX(0);
    }

    .side-menu a {
        color: black;
    }

    .side-menu a:hover {
        text-decoration: underline;
    }

    .hamburger-toggle {
        padding: .7rem;
        position: absolute;
        height: 3rem;
        aspect-ratio: 1;
        left: 100%;
        background: white;
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

    .small-hr {
        width: 30px;
        margin: 0.5rem 0;
    }

    .table-scroll-container {
        overflow-y: auto;
        overflow-x: auto;
    }

    .text {
        padding: 1rem 1rem;
    }

    .texty {
        padding: 1rem 0;
    }

    .textx {
        padding: 0 1rem;
    }

    .tooltip_account_menu {
        position: absolute;
        background-color: white;
        right: 10px;
        top: 65px;
        padding: 0.3rem;
        border-radius: 0.5rem;
        box-shadow: 2px 2px 5px 0px #d9d9d9;
    }

    .tooltip_account_menu p {
        padding: .2rem;
        cursor: pointer;
    }

    .tooltip {
        overflow: visible;
    }

    .tooltiptext {
        display: none;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 70%;
        left: 50%;
        margin-left: -15px;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .red-text {
        color: rgb(255, 0, 0);
    }

    .work-order-body {
        display: grid;
        height: -webkit-fill-available;
        grid-auto-rows: 1fr max-content;
    }

    .work-order-header {
        display: grid;
        grid-template-columns: max-content 1fr max-content;
    }

    .work-order-body-area {
        overflow-y: scroll;
    }

    .work-order-comments {
        display: none;
    }
    
    .work-order-images {
        display: none;
    }

    .work-order-relation-display {
        grid-row: 2;
        grid-column: span 3;
    }

    .work-order-menu {
        display: none !important;
    }

    .work-order-mobile-menu {
        display: grid;
        grid-template-columns: repeat(auto-fill, 25%);
        height: 4rem;
        width: 100%;
        justify-items: center;
        background: white;
    }

    .work-order-mobile-menu img{
        max-height: -webkit-fill-available;
    }

    .order-mobile-info-container {
        display: none;
        grid-template-rows: max-content;
        gap: 1rem;
    }

    .order-mobile-info-container button {    
        width: 3rem;
        aspect-ratio: 1;
        padding: 0.4rem;
    }

    .work-order-number {
        width: max-content;
        background: #333333;
        color: white;
        border-radius: 8px;
        padding: 5px;
        z-index: 1;
    }

    .work-order-stage {
        border-bottom-right-radius: 8px;
        border-top-right-radius: 8px;
        border-left: none;
        padding: 4px 15px;
        margin-left: -12px;
        width: fit-content;
    }

    .work-order-info-container {
        display: none;
    }

    .work-order-relation-resource {
        display: grid;
        width: initial;
        gap: 10px;
        padding: 0.5rem;
        align-content: center;
        grid-template-columns: 1fr;
        background: rgb(135, 227, 255);
        border-radius: 8px;
        height: max-content;
    }

    .work-order-sales-comment {
        display: grid;
        padding: 0.5rem;
    }

    .work-order-relation-resource::before {
        position: absolute;
        width: 20px;
        height: 20px;
        background: black;
        align-items: center;
    }

    .work-order-relation-resource div {
        display: grid;
        grid-template-columns: max-content 1fr;
        justify-items: end;
    }

    .work-order-relation-name {
        padding: 5px 8px;
    }

    .work-order-sales-panel {
        padding: 0.5rem;
        display: grid;
        grid-template-rows: max-content;
        gap: 1rem;
    }

    .work-order-panel-row {
        display: grid;
        grid-template-columns: max-content max-content 1fr;
        gap: .3rem;
        align-items: center;
    }

    .work-order-panel-row button {
        width: 3rem;
        padding: 0.5rem;
    }

    .work-order-panel-row input {
        width: 3rem;
        text-align: right;
    }

    .picking-order-signature {
        gap: 1rem;
    }

    .picking-order-signature input {
        width: 100%;
        max-width: 100%;
    }

    .picking-order-signature canvas {
        border: 2px solid black;
        border-radius: .3rem;
        width: 100%;
    }

    .stock-analysis-table {
        display: grid;
        grid-template-columns: max-content 1fr 1fr 1fr;
        gap: .5rem;
    }

/* INPUT MODAL CLASSES */
    .input-modal-panel-container {
        display: grid;
        grid-template-columns: 1fr max-content;
    }

    .input-modal-right-panel {
        display: grid;
    }

    .input-modal-left-panel {
        display: grid;
        background-color: rgb(148, 228, 255);
        grid-template-rows: max-content 1fr max-content;
    }

    .input-modal-left-panel-body {
        display: grid;
        grid-template-rows: max-content;
        overflow-y: scroll;
    }

    .input-modal-left-panel-footer {
        align-items: baseline;
        padding: 1rem 1.5rem;
        display: grid;
        grid-template-columns: max-content 1fr;
    }

/* PROGRAMME CLASSES */
    .programme-side {
        flex-grow: 1;
    }

    .programme-container {
        width: 100%;
        border-radius: 0.8rem;
    }

/* SLIDER CLASSES */
/* The switch - the box around the slider */
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }
  
    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    /* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }
    
    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }
    
    input:checked + .slider {
        background-color: #87e3ff;
    }
    
    input:focus + .slider {
        box-shadow: 0 0 1px #87e3ff;
    }
    
    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }
    
    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }
    
    .slider.round:before {
        border-radius: 50%;
    }

/* DASHBOARD CLASSES */
    .dashboard-button-small {
        color: white;
        border-radius: 15px;
        display: grid;
        grid-auto-flow: row;
        color: black;
        box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 8px 1px;
        transition: background 500ms;
        padding: 1rem;
        height: 9rem;
    }

    .dashboard-button-small button{
        box-shadow: rgb(0 0 0 / 20%) 0 7px 10px 0;
    }

    .dashboard-button-small button:hover{
        box-shadow: rgb(0 0 0 / 20%) 0 6px 30px 0;
    }

    .dashboard-button-small:hover {
        background: rgba(255, 255, 255, 1);
    }

    .dashboard-button-large:hover  .dashboard-button-icon-div {
        top: -2.5rem;
        background: rgba(255, 255, 255, 1);
    }

    .dashboard-button-large {
        height: 15rem;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 8px 1px;
        color: white;
        border-radius: 15px;
    }

    .dashboard-button-icon-div {
        width: 4rem;
        height: 4rem;
        border-radius: 1rem;
        padding: 0.4rem;
        position: absolute;
        top: -2rem;
        left: 0.5rem;
        background: rgba(255, 255, 255, 0.950);
        box-shadow: #000000a3 0 0 20px 0px;
        transition: top 500ms;
    }

    .dashboard-button-icon-div-small {
        width: 3rem;
        height: 3rem;
        border-radius: .8rem;
        padding: 0.4rem;
        background: rgba(255, 255, 255, 0.950);
        box-shadow: #000000a3 0 0 10px 0px;
        transition: top 500ms;
    }

    .dashboard-button-top-div {
        overflow: initial;
        position: absolute;
        top: 0;
        left: 0;
        height: 10rem;
        width: 100%;
        z-index: 0;
        content: "";
    }

    .dashboard-button-top-div span {
        font-family: serif;
        font-size: 4rem;
        padding: 0 1rem;
    }

    .dashboard-button-bottom-div {
        overflow: initial;
        position: absolute;
        bottom: 0;
        left: 0;
        background: white;
        height: 5rem;
        width: 100%;
        z-index: 0;
        content: "";
        color:black;
    }

    .dashboard-button-large h3 {
        padding: 0 1rem;
    }

/* THE LANDING PAGE */

    .landing-department {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: white;
        border-radius: 1rem;
        padding: 2rem;
    }

/* GENERAL ORDER CLASSES */

    .order-items-container {
        display: grid;
        grid-template-columns: auto;
    }

/* RWD CLASSES */

    .mobile {
        display: revert;
    }

    .desktop {
        display: none;
    }

    .tablet {
        display: none;
    }

/* MEDIA QUERIES */
@media only screen and (min-width: 423px) {
    .tablet {
        display: block;
    }

    .mobile {
        display: none !important;
    }

    .side-menu {
        height: initial;
        position: relative;
        transform: translateX(0px);
        z-index: 0;
    }

    .hamburger-toggle {
        display: none;
    }

    .dashboard-buttons-container {
        grid-template-columns: auto auto;
        grid-template-rows: max-content max-content;
    }

    .modal-menu {
        grid-auto-flow: column;
        grid-template-columns: revert;
    }

    .modal-menu .close-button {
        justify-self: end;
        grid-column: initial;
    }

    .sales-order-add-button-container {
        flex-direction: row;
    }

    .sales-order-table td:nth-child(1) {
        display: table-cell;
    }

    .modal-menu-relation-resource-area {
        width: 10rem !important;
        grid-auto-flow: row;
    }

    .modal-menu-relation-resource-area div {
        top: calc(100% - 3px);
        padding-top: 3px;

    }

    /* GRID CLASSES */
    
    .grid-2-1 {
        grid-template-columns: auto auto;
    }

    /* GENERAL ORDER CLASSES */

    .order-items-container {
        display: grid;
        grid-template-columns: auto auto;
    }
}

@media only screen and (min-width: 800px) {
    .flex-50 {
        flex: 50%;
    }

    .flex-33 {
        flex: 33.33%;
    }

    .flex-device-toggle {
        flex-direction: row;
    }

    .grid-3-3 {
        grid-template-columns: auto auto auto;
        column-gap: 3rem;
        row-gap: 3rem;
    }

    .tablet {
        display: none;
    }

    .desktop {
        display: revert;
    }

    .text {
        padding: 1rem 1.5rem;
    }

    .textx {
        padding: 0 1.5rem;
    }

    .input_modal_field {
        width: 80%;        
        height: 80vh;
    }

    .work-order-body-area {
        display: grid;
        grid-template-columns : 50px 1fr;
    }

    .work-order-comments {
        display: block !important;
    }

    .work-order-mobile-menu {
        display: none;
    }

    .work-order-relation-display {
        grid-row: initial;
    }

    .work-order-info-container {
        display: grid;
    }

    .work-order-relation-resource {
        grid-template-columns: 1fr 1fr;
        display: grid !important;
    }

    .work-order-sales-panel {
        display: grid !important;
    }

    .work-order-menu {
        display: initial !important;
    }

    .work-order-panel-row {
        grid-template-columns: 1fr 1fr;
    }

    .modal-menu .modal-menu-spacer {
        display: block;
    }
}