@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap');

/* Desktop */
.sidebarMenuToggle {
    display: none;
}

.table-profiles-mobile {
    display: none;
}

.desktop-hide {
    display: none !important;
}

.sidebarMenuContainer {
    display: none;
}

.history-table {
    display: none;
}

.shopping-cart-item-orders[data-target="mobile"] {
    display: none;
}

.shopping-cart-item-list {
    display: none;
}

@media screen and (max-width: 1700px) {
    #divMaterialWrapper select{
        width: 100px;
    }

    #divMaterialWrapper input{
        width: 100px;
    }

    #divMaterialWrapper p{
        width: 100px;
    }

    #pCurrentSelected{
        width: 25px !important;
    }

    #divMaterialLabelWrapper p{
        font-size: 90%;
    }
}

/* Mobile */
@media screen and (max-width: 768px) {
    body {
        font-family: 'Roboto', sans-serif;
    }

    /* Sidebar */
    #divMenu {
        min-width: 0;
        max-width: 100%;
        width: 0;
        z-index: 1;

        border: 0;

        transition: width 0.2s;
    }

    .sidebarMenuContainer {
        display: flex;

        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        background-color: #FE3800;

        z-index: 1;
    }

    .sidebarMenuToggle {
        display: initial;

        color: #fff;
        text-decoration: none;
        cursor: pointer;

        padding: 4px;

        font-size: 2em;
    }

    .sidebarMenuToggleIcon {
        font-size: 0.75em;
        padding: 8px;
    }

    #divMenu > .sidebarMenuToggle {
        color: rgba(0, 0, 0, 0.2);
    }

    #divMenu > .sidebarMenuToggle {
        font-size: 1.5em;
    }

    #divMenu > .sidebarMenuToggle > .sidebarMenuToggleIcon {
        padding: 10px;
        font-size: 1.2em;
    }

    #imgMenuLogo {
        margin: 0 auto 40px auto;
    }

    #divCollapsibleMenu .pLevel1 {
        text-align: center;
        font-size: 26px;
    }

    #divCollapsibleMenu .pLevel2 {
        font-size: 22px;
        padding-left: calc(50% - 20px);
    }

    #divCollapsibleMenu .pLevel3 {
        font-size: 18px;
        padding-left: calc(50% - 10px);
    }

    #divLoginWrapper {
        width: 100%;
    }

    /* Login */
    #imgLoginLogo {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Page wrapper */
    .pageWrapper {
        position: initial;

        margin-top: 40px;
        margin-bottom: -40px;
        padding-left: 20px;
    }

    /* Contact view */
    #divContactWrapper {
        margin-top: 10vh;
    }

    #imgContact {
        max-width: 75%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Profiles */
    .divBasicProfileCategory {
        display: inline-block;
        float: none;
        width: 45%;
        margin: 20px 2%;
    }

    .divBasicProfileCategory > .divBasicProfileCategoryImageHolder {
        width: 100%;
        height: 120px;
    }

    @media screen and (orientation: landscape) {
        .divBasicProfileCategory {
            width: 28%;
            margin: 20px 2.33%;
        }
    }

    /* Drawing/editing */
    .pageWrapper.bottom-toolbar {
        display: flex;
        flex-direction: column;

        padding-bottom: 42px;
    }

    .pageWrapper.bottom-toolbar > .desktop-hide {
        height: 100%;

        order: 1;
        align-self: center;
    }

    .pageWrapper.bottom-toolbar > .bottom-toolbar-container > .mobileMaterialInput > .materialDialogInput {
        align-self: flex-end;
        flex: 1 0;

        margin: 0;
    }

    #divCanvasHolder {
        position: absolute;

        margin-left: -20px;
        margin-right: -20px;
        margin-top: 20px;

        border-left: 0;
        border-right: 0;
    }

    .pageWrapper.bottom-toolbar > #divCanvasHolder {
        border-top: 0;
    }

    .materialDialogInput {
        display: flex;
        align-items: center;

        margin: 16px 0;
    }

    .materialDialogInput > * {
        margin-right: 8px;
        flex-grow: 1;
    }

    .materialDialogInput > *:last-child {
        margin-right: inherit;
    }

    .materialDialogInput > label {
        flex: 1 0;
        padding-left: 10px;
        padding-right: 10px;

        text-align: center;
    }

    .materialDialogInput > label:first-child {
        padding-left: 0;
    }

    #divButtonWrapper, #divButtonWrapper a {
        float: none;
    }

    #divButtonWrapper {
        display: flex;
    }

    #divButtonWrapper a {
        margin-left: 5px;
        margin-right: 5px;
        flex-basis: 0;
        flex-grow: 1;
    }

    /* Profile details */
    #h1DetailsTitle {
        display: none;
    }

    #divDrawingHolder > #divDrawing, .divCartItemImageHolder {
        width: 50vw;
        height: 50vw;
        margin: 0 calc(50% - 25vw) 10px calc(50% - 25vw);
    }

    #divDrawingHolder > #divDrawingInfo {
        float: initial;
        width: 100%;
    }

    .table-profiles {
        flex-direction: row;
    }

    .table-profiles-desktop {
        display: none;
    }

    .table-profiles-mobile {
        display: initial;
    }

    .aTableProfileButton:hover {
        background-color: inherit;
    }

    /* Shopping cart */
    .shopping-cart-item {
        display: flex;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .shopping-cart-item:last-child {
        margin-bottom: -1px;
    }

    .shopping-cart-item-image-holder {
        flex: 0 0 20%;
    }

    .shopping-cart-item-image-holder > .shopping-cart-item-image {
        width: 100%;
        height: 100%;

        border: none;
    }

    .shopping-cart-item-specifications > .shopping-cart-item-image-holder {
        width: 100%;
        margin-bottom: 16px;
        flex: initial;
    }

    .shopping-cart-item-specifications > .shopping-cart-item-image-holder > .shopping-cart-item-image {
        margin: 0 calc(50% - 25vw);
        width: 50vw;
        height: 50vw;

        border: inherit;
    }

    .shopping-cart-item > h1 {
        color: initial;
        font-size: 16px;

        flex: 1 0;
    }

    .shopping-cart-item > .shopping-cart-item-cross {
        font-size: 16px;
        color: #a1a1a1;
        padding: 10px;
        margin-right: 10px;

        cursor: pointer;
    }

    .shopping-cart-item > h1, .shopping-cart-item > .shopping-cart-item-cross {
        align-self: center;
    }

    .shopping-cart > a {
        text-decoration: none;
    }

    .shopping-cart-item-row.shopping-cart-item-vertical:not(.shopping-cart-header) {
        text-align: right;
        flex: 1 0;
    }

    .shopping-cart-item-actions {
        flex-direction: row;
        margin-top: 18px;
        margin-left: 0;
    }

    .shopping-cart-item-actions > * {
        flex: 1 0;
    }

    .shopping-cart-item-orders[data-target="desktop"] {
        display: none;
    }

    .shopping-cart-item-orders[data-target="mobile"] {
        display: flex;
    }

    .shopping-cart-item-orders-title {
        margin-top: 35px;
    }

    .shopping-cart-item-orders > .shopping-cart-item-row {
        margin-top: 15px;
        margin-bottom: 15px;
        flex: 0 1;
    }

    .shopping-cart-item-list {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .shopping-cart-item-list > .shopping-cart {
        flex: 1 0;
        flex-direction: column;
        overflow-y: scroll;
    }

    .shopping-cart-item-list > .shopping-cart > * > .shopping-cart-item, .shopping-cart-item-list > .shopping-cart > .shopping-cart-item {
        border: 1px solid #d1d1d1;
        border-left: none;
        border-right: none;

        margin-bottom: 0;
    }

    .shopping-cart-item-list > .shopping-cart > *:first-child > .shopping-cart-item, .shopping-cart-item-list > .shopping-cart > .shopping-cart-item:first-child {
        border-top: 0;
    }

    .shopping-cart-item-list > .shopping-cart > *:last-child > .shopping-cart-item, .shopping-cart-item-list > .shopping-cart > .shopping-cart-item:last-child {
        border-bottom: 0;
    }

    .shopping-cart-item-list > .aCheckoutShoppingCart {
        margin: 0 20px;
        padding: 7px;

        color: #fff;

        border-radius: 4px;

        text-decoration: none;
        text-align: center;
    }

    .shopping-cart-item-row > div {
        font-size: 12px;
    }

    .shopping-cart-item-row > div > span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .divDeleteCartItemDelete, .divDeleteCartItemEdit {
        margin: 0 30px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .divDeleteCartItemDelete > i.fas, .divDeleteCartItemEdit > i.fas {
        font-size: 12px;
        transform: translate(0, -50%);
    }

    .divTitleHeader {
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
    }

    .divDetailRow {
        padding-left: 0;
        padding-right: 0;
    }

    /* Order details */
    .orderDetailsWrapper {
        display: flex;
        flex-wrap: wrap;
    }

    .orderDetailsWrapper > div {
        flex: 1 0 100%;

        margin-left: 0;
        margin-right: 0;
        float: initial;
    }

    .orderDetailsWrapper > div:not(:first-child) {
        margin-top: 30px;
    }

    .divDetailRow > p:first-child {
        margin-bottom: 4px;
    }

    /* History */
    #txtHistorySearch {
        width: 100%;
    }

    .history-table {
        display: flex;
    }

    .divHistoryTotal, .divHistoryDetailTotal {
        display: flex;
        width: 100%;
        position: initial;

        margin-bottom: 20px;
    }

    .divHistoryDetailTotal {
        flex-wrap: wrap;
    }

    .divHistoryTotal p:first-of-type, .divHistoryTotal p:last-of-type {
        float: initial;
        flex: 1 0 50%;
    }

    .divHistoryTotal p:last-of-type {
        text-align: right;
    }

    .divHistoryDetailTotal > div {
        float: initial;
        flex: 1 0 100%;
    }

    .tdHistoryPrice {
        padding-right: 0;
    }

    .divReOrderItem {
        opacity: 1;
    }

    #divEditMaterial {
        width: auto;
        height: auto;

        left: 2.5%;
        right: 2.5%;
        top: 5%;
        bottom: 5%;
    }

    .shopping-cart-item {
        flex-wrap: wrap;
    }

    .shopping-cart-item > .column {
        flex: 1 0 50%;
    }

    .shopping-cart-item > .column:nth-child(even) {
        text-align: right;
    }

    .shopping-cart-item > .column > p {
        margin: 0;
    }

    .shopping-cart-item > .column > p.lead {
        margin: 5px 0;
    }

    .shopping-cart-item > .column > p.small {
        margin: 2px 0;
    }

    /* Completing order */
    #formOrderDetails {
        display: flex;
        flex-direction: column;
    }

    #formOrderDetails > div {
        width: initial;
        flex: 1 0;
    }

    /* Misc */
    .desktop-hide {
        display: inherit !important;
    }

    .mobile-hide {
        display: none !important;
    }

    #divUserHolder {
        display: none;
    }

    .divAlert {
        width: initial;
        top: calc(50% - 20vh);
        left: 10px;
        right: 10px;
        height: 40vh;
    }

    .divAlert > #pAlertContent {
        height: 80%;
    }

    .no-margin {
        margin: 0 !important;
    }

    .no-margin-x {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .no-margin-y {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .no-padding {
        padding: 0 !important;
    }

    .no-padding-x {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .no-padding-y {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #pWidthIndicatorError{
        width: calc(100% - 40px);
        margin: 0px;
        margin-top: 60px;
        left: 20px;
    }
}