@media(orientation: portrait) {
    .content-function {
        height: 100%;
        width: 100%;
        display: inline-flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
    }
}

@media(orientation: landscape) {
    html {
        overflow: hidden;
    }

    .main-content {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        height: 100vh;
    }

    .principal-container {
        overflow: scroll;
        height: 100%;
    }

    .i-whatsapp-open {
        display: none;
    }

    .content-function {
        height: 100%;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .full-width .content-function {
        width: 100%;
    }

    .partial-width .content-function {
        width: 85%;
    }

    .main-page-content .content-function .content-view-mini .header-section {
        position: inherit;
    }

    .main-page-content .content-function .content-view-mini {
        width: 100%;
        margin-top: 5vh;
    }

    .content-function .content-view-mini {
        width: 100%;
    }

    .main-page-content .content-function .content-view-mini:nth-child(1) {
        width: 100%;
        margin-top: 0vh;
    }

    .content-view-mini {
        height: 60%;
    }
}

/* Generic rules */
html {
    display: inline-block;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    min-height: 100vh;
}

.hidden {
    display: none;
}

.icon {
    font-style: normal;
    cursor: pointer;
}

.button {
    cursor: pointer;
}

.principal-container {
    display: inline-flex;
    flex-direction: row;
    min-width: 70%;
    max-width: 100%;
    flex-grow: 1;
}

.content-page {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    min-height: 91vh;
    max-height: 95vh;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: grey gainsboro;
    scrollbar-width: thin;
}

.content-view-big {
    display: inline-block;
    width: 100%;
}

.content-view {
    display: inline-block;
    width: 100%;
}

a {
    text-decoration: none;
}

/* INPUT TYPE BUTTON - parti comuni */
.input-disabled {
    display: none !important;
}

.tab-disabled {
    display: none !important;
}

.generic-button {
    color: white;
    background-color: darkblue;
    border: solid 3px gainsboro;
    border-radius: 5px;
}

.generic-button:active {
    color: darkblue;
    background-color: gainsboro;
    border: solid 3px gainsboro;
}

.generic-button-active {
    color: darkblue;
    background-color: white !important;
    background: white !important;
    border: solid 3px rgba(100, 149, 237, 1);
}

.field-label, .field-value {
    display: inline-block;
    min-width: 40%;
    min-height: 3vh;
    margin-left: 1vw;
    margin-bottom: 0.5vh;
    margin-top: 0.5vh;
}

.function-icons {
    font-weight: bold;
    float: left;
}

.component-proto {
    display: none;
}

/*INPUT tag */
select {
    -webkit-appearance: none;
    background: gainsboro;
}

input[type=text], input[type=tel], input[type=search], input[type=email], input[type=password], input[type=number], input[type=date],
input[type='datetime-local'], input[type='time'], input[type='url'], select, textarea {
    border: none;
    border-bottom: rgb(68, 114, 196) 2px solid;
    background: none;
    width: 95%;
    box-sizing: border-box;
    font-size: 14px;
}

textarea {
    height: 20px;
    resize: none;
    font-family: Arial;
    font-size: 14px;
    font-weight: 200;
}

input[type=button], input[type=submit], button {
    background: darkblue;
    color: white;
    border: none;
}

input[type=button]:active, input[type=submit]:active, button:active {
    background: white;
    color: darkblue;
    border: darkblue solid 1px;
}

[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

/* FONT - import font family */
@font-face {
    font-family: 'i-document';
    font-style: normal;
    font-weight: 400;
    src: url('/resources/fonts/icons/document/docicon.eot');
    /* For IE6-8 */
    src: url('/resources/fonts/icons/document/docicon.woff') format('woff'),
        url('/resources/fonts/icons/document/docicon.ttf') format('truetype'),
        url('/resources/fonts/icons/document/docicon.svg') format('svg');
}

@font-face {
    font-family: 'i-material';
    font-style: normal;
    font-weight: 400;
    src: url('/resources/fonts/icons/material/MaterialIcons-Regular.eot');
    /* For IE6-8 */
    src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url('/resources/fonts/icons/material/MaterialIcons-Regular.woff2') format('woff2'),
        url('/resources/fonts/icons/material/MaterialIcons-Regular.woff') format('woff'),
        url('/resources/fonts/icons/material/MaterialIcons-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'i-mobirise';
    src: url('/resources/fonts/icons/mobirise/mobirise.eot?5dqoim');
    src: url('/resources/fonts/icons/mobirise/mobirise.eot?5dqoim#iefix') format('embedded-opentype'),
        url('/resources/fonts/icons/mobirise/mobirise.ttf?5dqoim') format('truetype'),
        url('/resources/fonts/icons/mobirise/mobirise.woff?5dqoim') format('woff'),
        url('/resources/fonts/icons/mobirise/mobirise.svg?5dqoim#MobiriseIcons') format('svg');
    font-weight: normal;
    font-style: normal;
    speak: none;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: "i-social";
    src: url("/resources/fonts/icons/social/Social.eot");
    src: url("/resources/fonts/icons/social/Social.eot?#iefix") format("embedded-opentype"),
        url("/resources/fonts/icons/social/Social.woff") format("woff"),
        url("/resources/fonts/icons/social/Social.ttf") format("truetype"),
        url("/resources/fonts/icons/social/Social.svg#Flaticon") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Righteous';
    src: url('/resources/fonts/Righteous/Righteous-Regular.woff') format('woff'),
        url('/resources/fonts/Righteous/Righteous-Regular.ttf') format('truetype');
}

/* Animation */
@keyframes spinner5 {
    from {
        -moz-transform: rotateY(0);
        -ms-transform: rotateY(0);
        transform: rotateY(0);
    }

    to {
        -moz-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
        transform: rotateY(-360deg);
    }
}

@keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}

@keyframes openExpandY {
    0% {
        margin-top: -100%;
        z-index: -1;
    }

    99% {
        z-index: -1;
        margin-top: 10%;
    }

    100% {
        z-index: 0;
        margin-top: 0;
    }
}

/* Animation */
@keyframes closeCollapseY {
    0% {
        margin-top: 0;
    }

    100% {
        margin-top: -100%;
    }
}

@keyframes rotate180Open {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(180deg);
    }
}

@keyframes rotate180Close {
    from {
        transform: rotate(180deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes rightEntrance {
    from {
        margin-right: -32%;
    }

    to {
        margin-right: 0%;
    }
}

@keyframes rightExit {
    from {
        margin-right: 0%;
    }

    to {
        margin-right: -36%;
    }
}

/* ICONS */
.common-icons-manage {
    width: 5vw;
    float: left;
    margin-left: 0.8vw;
}

.image-preview {
    display: inline-block;
    width: 20%;
}

.input-container>.list-widget {
    display: inline-block;
    width: 95%;
    position: relative;
    min-height: 30px;
}

.filter-item>.list-widget {
    display: inline-block;
    width: 50%;
    position: relative;
    min-height: 30px;
}

.list-widget .list-selected {
    display: inline-flex;
    width: 100%;
    position: relative;
    min-height: 30px;
    border-bottom: solid 2px rgb(68, 114, 196);
    padding-top: 2px;
    padding-bottom: 2px;
    align-items: flex-end;
}

.list-widget .list-selected span {
    display: inline-flex;
    border: solid 1px rgb(68, 114, 196);
    border-radius: 5px;
    padding: 2px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
}

.list-widget .list-selected.empty p {
    display: inline-block;
    padding: 2px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
    margin-bottom: 0;
    cursor: pointer;
}

.list-widget .list-selected:not(.empty) p {
    display: none;
}

.list-widget .list-selected span i {
    font-style: normal;
    margin-right: 2px;
    color: red;
    cursor: pointer;
}

.list-widget ul.multi-dropdown li {
    display: none;
}

.list-widget.expanded ul.multi-dropdown li {
    display: inline-block;
    width: 100%;
}

.list-widget ul.multi-dropdown {
    position: absolute;
    list-style: none;
    display: inline-flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    left: 0;
    top: 35px;
    width: 90%;
    z-index: 2;
}

.list-widget ul.multi-dropdown>li {
    padding: 5px 15px;
    font-size: 16px;
    background-color: rgba(68, 114, 196);
    border-bottom: 1px black;
}

.frame-container .header-bar .action-container>a {
    background: none !important;
}

/* Social icons */
.i-whatsapp-open::before {
    content: "\f106";
    font-family: 'i-social';
    color: green;
}

/* Icons mixed for leftbar and function view */
.i-app::before {
    content: "\e92c";
    font-family: 'i-mobirise';
}

.i-favorites::before {
    content: "\e92f";
    font-family: 'i-mobirise';
    color: darkblue;
}

.i-core-users::before {
    content: "\e98e";
    font-family: 'i-mobirise';
    color: darkblue;
}

.i-settings::before {
    content: "\e96d";
    font-family: 'i-mobirise';
}

.i-core-calendar::before {
    content: "\e912";
    font-family: 'i-mobirise';
    color: darkblue;
}

.i-core-meetings::before {
    content: "\e957";
    font-family: 'i-mobirise';
    color: darkblue;
}

.i-core-tickets::before {
    content: "\e90d";
    font-family: 'i-mobirise';
    color: darkblue;
}

.i-core-news::before {
    content: "\e901";
    font-family: 'i-mobirise';
    color: darkblue;
}

.i-core-chat::before {
    content: "\e918";
    font-family: 'i-mobirise';
    color: darkblue;
}

.i-erpdocs-quotes::before {
    content: "\e989";
    font-family: 'i-document';
    color: darkblue;
}

.i-erpdocs-orders-suppliers::before {
    content: "\e9db";
    font-family: 'i-document';
    color: darkblue;
}

.i-erpdocs-orders-customers::before {
    content: "\e9db";
    font-family: 'i-document';
    color: darkblue;
}

.i-erpdocs-shipments-suppliers::before {
    content: "\eb51";
    font-family: 'i-document';
    color: darkblue;
}

.i-erpdocs-shipments-customers::before {
    content: "\eb51";
    font-family: 'i-document';
    color: darkblue;
}

.i-erpdocs-invoices-suppliers::before {
    content: "\eaa2";
    font-family: 'i-document';
    color: darkblue;
}

.i-erpdocs-invoices-customers::before {
    content: "\eaa2";
    font-family: 'i-document';
    color: darkblue;
}

.i-erpdocs-notes-customers::before {
    content: "\eb43";
    font-family: 'i-document';
    color: darkblue;
}

.i-erpdocs-notes-suppliers::before {
    content: "\eb43";
    font-family: 'i-document';
    color: darkblue;
}

.i-erpdocs-rectify-progressives::before {
    content: "\e96e";
    font-family: 'i-mobirise';
    color: darkblue;
}

.i-erp-customers::before {
    content: "\e926";
    font-family: 'i-material';
    color: darkblue;
}

.i-erp-suppliers::before {
    content: "\e8f9";
    font-family: 'i-material';
    color: darkblue;
}

.i-erp-recv-banks::before {
    content: "\e84f";
    font-family: 'i-material';
    color: darkblue;
}

.i-erp-items::before {
    content: "\e971";
    font-family: 'i-mobirise';
    color: darkblue;
}

.i-erp-repositories::before {
    content: "\e938";
    font-family: 'i-mobirise';
    color: darkblue;
}

.i-other-function::before {
    content: "\e93a";
    font-family: 'i-mobirise';
}

.i-newproject::before {
    content: "\e974";
    font-family: 'i-mobirise';
}

.i-modifyprofile::before {
    content: "\e96f";
    font-family: 'i-mobirise';
}

.i-logout::before {
    content: "\e949";
    font-family: 'i-mobirise';
}

.i-undo::before {
    content: "\e985";
    font-family: 'i-mobirise';
}

/*Editor bar icons */
.i-bolder::before {
    content: "\e238";
    font-family: 'i-material';
}

.i-italic::before {
    content: "\e23f";
    font-family: 'i-material';
}

.i-underline::before {
    content: "\e249";
    font-family: 'i-material';
}

.i-highlighted::before {
    content: "\e3ae";
    font-family: 'i-material';
}

.i-align-left::before {
    content: "\e236";
    font-family: 'i-material';
}

.i-align-center::before {
    content: "\e234";
    font-family: 'i-material';
}

.i-align-right::before {
    content: "\e237";
    font-family: 'i-material';
}

.i-align-justify::before {
    content: "\e235";
    font-family: 'i-material';
}

.i-bulleted-list::before {
    content: "\e241";
    font-family: 'i-material';
}

.i-numbered-list::before {
    content: "\e242";
    font-family: 'i-material';
}

.i-attachment::before {
    content: "\e250";
    font-family: 'i-material';
}

/*Slideshow icons */
.i-prev::before {
    content: "\e5cb";
    font-family: 'i-material';
}

.i-after::before {
    content: "\e5cc";
    font-family: 'i-material';
}

.i-play::before {
    content: "\e038";
    font-family: 'i-material';
}

.i-pause::before {
    content: "\e035";
    font-family: 'i-material';
}

.i-mute::before {
    content: "\e04e";
    font-family: 'i-material';
}

.i-sound::before {
    content: "\e050";
    font-family: 'i-material';
}

.i-prev-slideshow::after,
.i-after-slideshow::after {
    display: none;
}

.i-prev-slideshow::before,
.i-after-slideshow::before,
.i-play::before,
.i-pause::before,
.i-mute::before,
.i-sound::before {
    background: rgba(0, 0, 0, 0.1);
    color: white;
    border-radius: 50% 50%;
    border: none;
    cursor: pointer;
    margin: 1vw;
}

.i-prev-slideshow::before {
    float: left;
    margin-left: 5vw;
}

.i-after-slideshow::before {
    float: right;
    margin-right: 5vw;
}

/*No-header icons */
/* Animation icons */
.button-expanded-animation {
    animation: rotate180Open 1s both;
}

.button-collapse-animation {
    animation: rotate180Close 1s both;
}

.i-menu::before {
    content: "\e94c";
    font-family: 'i-mobirise';
}

.i-extra-actions::before {
    content: "\e94c";
    font-family: 'i-mobirise';
}

.i-extras::before {
    content: "\e94c";
    font-family: 'i-mobirise';
}

.i-info::before {
    content: "\e93e";
    font-family: 'i-mobirise';
}

.i-add::before {
    content: "\e95d";
    font-family: 'i-mobirise';
}

.i-close::before {
    content: "\e91a";
    font-family: 'i-mobirise';
}

.i-confirm::before {
    content: "\e970";
    font-family: 'i-mobirise';
}

.i-modify::before {
    content: "\e92a";
    font-family: 'i-mobirise';
}

.i-edit::before {
    content: "\e92a";
    font-family: 'i-mobirise';
}

.i-mod::before {
    content: "\e929";
    font-family: 'i-mobirise';
}

.i-right::before {
    content: "\e909";
    font-family: 'i-mobirise';
}

.i-next::before {
    content: "\e909";
    font-family: 'i-mobirise';
}

.i-back::before {
    content: "\e90a";
    font-family: 'i-mobirise';
}

.i-print::before {
    content: "\e95f";
    font-family: 'i-mobirise';
}

.i-remove::before {
    content: "\e983";
    font-family: 'i-mobirise';
}

.i-delete::before {
    content: "\e983";
    font-family: 'i-mobirise';
}

.i-send_email::before {
    content: "\e944";
    font-family: 'i-mobirise';
}

.i-insert_comment::before {
    content: "\e920";
    font-family: 'i-mobirise';
}

.i-filter::before {
    content: "\e95e";
    font-family: 'i-mobirise';
}

.i-toggle-filters::before {
    content: "\e95e";
    font-family: 'i-mobirise';
}

.i-issue::before {
    content: "\e961";
    font-family: 'i-mobirise';
}

.i-down::before {
    content: "\e908";
    font-family: 'i-mobirise';
}

.i-up::before {
    content: "\e90b";
    font-family: 'i-mobirise';
}

.i-transform::before {
    content: "\e92d";
    font-family: 'i-mobirise';
}

.i-slideshow::before {
    content: "\e93c";
    font-family: 'i-mobirise';
}

.i-selectAll::before {
    content: "\e911";
    font-family: 'i-mobirise';
}

.i-search::before {
    content: "\e96c";
    font-family: 'i-mobirise';
}

.i-report::before {
    content: "\e92e";
    font-family: 'i-mobirise';
}

.i-help-desk::before {
    content: "\e961";
    font-family: 'i-mobirise';
}

.i-sendmessage::before {
    content: "\e937";
    font-family: 'i-mobirise';
}

.i-duplicate::before {
    content: "\e941";
    font-family: 'i-mobirise';
}

.i-expand:before {
    content: "\e037";
    font-family: 'i-material';
}

.i-warning::before {
    content: "\e001";
    font-family: 'i-material';
    color: red;
    background: yellow !important;
}

.i-done::before {
    content: "\e877";
    font-family: 'i-material';
    color: white;
    background: green !important;
}

.i-desk::before {
    content: "\e916";
    font-family: 'i-mobirise';
}

.i-today::before {
    content: "\e97c";
    font-family: 'i-mobirise';
}

.i-download::before {
    content: "\e958";
    font-family: 'i-mobirise';
}

.i-submit::before {
    content: "\e948";
    font-family: "i-mobirise";
}

.i-filconad::before {
    content: "\e921";
    font-family: "i-mobirise";
}

.i-copy::before {
    content: "\e956";
    font-family: "i-mobirise";
}

.i-past::before {
    content: "\e900";
    font-family: "i-mobirise";
}

.i-refresh::before {
    content: "\e98a";
    font-family: "i-mobirise";
}

.i-upload::before {
    content: "\e955";
    font-family: 'i-mobirise';
}

.i-barcode::before {
    content: "\e903";
    font-family: 'i-mobirise';
}

.i-import-all::before {
    content: "\e942";
    font-family: 'i-mobirise';
}

.i-warning-hover {
    display: none;
}

.i-warning:hover .i-warning-hover {
    display: inline;
}

.i-down {
    display: inline-block;
}

.frame-container .i-add,
.frame-container .i-remove,
.frame-container .i-delete,
.frame-container .i-mod {
    color: rgb(68, 114, 196) !important;
    font-weight: bolder !important;
    background: linear-gradient(0deg, rgba(212, 219, 226, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(212, 219, 226, 1) 100%) !important;
    cursor: pointer;
}

.frame-container .i-add:active,
.frame-container .i-remove:active,
.frame-container .i-delete:active,
.frame-container .i-mod:active {
    color: rgb(68, 114, 196) !important;
    border: solid 2px rgb(68, 114, 196) !important;
    font-weight: bolder !important;
    background: white !important;
}

.i-remove {
    border-radius: 50%;
}

/*.i-modify,
.i-next,
.i-back,
.i-print,
.i-send_email,
.i-insert_comment,
.i-filter,
.i-transform,
.i-down,
.i-up,
.i-issue,
.i-slideshow,
.i-selectAll,
.i-search,
.i-report,
.i-help-desk,
.i-sendmessage,
.i-whatsapp-open,
.i-duplicate,
.i-warning,
.i-done{
    color: white;
    border-radius: 2.5em;
    padding: 0.15em;
    border: none;
    cursor:pointer;
}*/