/*COLOR THEME START*/
:root {
    /*Color Variables*/
    --color-background: #fafafa;
    --color-text: #102542;
    --color-text-light: #fefefe; 
    --color-text-dark: #262626;
    --color-icon: #102542;
    --color-company: #000;
    --color-shadow: #9cd1f8;

    --color-primary: #4392F1;
    --color-primary-hover: #8abbf6;
    --color-good: #189b18;
    --color-good-hover: #1bb11b;
    --color-warning: #e69500;
    --color-warning-hover: #ffa500;
    --color-bad: #c71e1e;
    --color-bad-hover: #e13636;

    --color-navbar: #4392F1;
    --color-navbar-text: #fff;
    --color-navbar-button: #4392F1;
    --color-navbar-button-hover: #72aef5;
    --color-navbar-button-text: #fff;
    --color-navbar-button-text-hover: #fff;
    --color-navbar-button-border: #fff;

    --color-sidebar: #fafafa;
    --color-sidebar-border: #4392F1;
    --color-sidebar-header: #4392F1;
    --color-sidebar-button: #fafafa;
    --color-sidebar-button-hover: #8abbf6;
    --color-sidebar-button-text: #000;
    --color-sidebar-footer: #4392F1;

    --color-breadcrumb: #102542;
    --color-breadcrumb-text: #fff;
    --color-breadcrumb-link-hover: #1e84e1;

    --color-card: #E3F2FD;
    --color-card-hover: #8abbf6;
    --color-card-line: #2070b7;

    --color-chart-label: #102542;
    --color-chart-grid: rgba(0,0, 0,0.5);

    --color-input: #E3F2FD;
    --color-input-border: #111;
    --color-input-text: #102542;
    --color-input-placeholder-text: #1f4880;
    --color-input-alt: #fafafa;
    --color-input-border-alt: #333;
    --color-input-alt-text: #102542;
    --color-input-placeholder-alt-text: #1f4880;

    --color-qs-item: #E3F2FD;
    --color-qs-item-hover: #4392F1;
    --color-qs-item-alt: #E3F2FD;

    --color-table-header: #4392F1;
    --color-table-header-text: #fff;
    --color-table-row: #E3F2FD;
    --color-table-row-alt: #fafafa;
    --color-table-row-hover: #8abbf6;
    --color-table-row-text: #102542;
    --color-table-row-empty-text: #aaa;
    --color-table-selection: #403F4C;
    --color-table-selection-text: #fff;
    --color-table-link: #2070b7;

    --color-scrollbar-track: #f1f1f1;
    --color-scrollbar-thumb: #888888;
    --color-scrollbar-thumb-hover: #000000;

    --color-pagination: #E3F2FD;
    --color-pagination-active: #4392F1;
    --color-pagination-text: #102542;
    --color-pagination-text-active: #fff;

    --color-modal-overlay: rgba(0,0,0,.5);
    --color-modal: #111;
    --color-modal-border: #2070b7;
    --color-modal-text: #fff;

    --color-loading-overlay: rgba(0,0,0,0.5);
    --color-loading-text: #fff;

    --color-tab-nav: #000;
    --color-tab-nav-active: #4392F1;
    --color-tab-nav-alt: #222;
    --color-tab-nav-text: #aaa;
    --color-tab-nav-text-active: #fff;
    --color-tab-nav-hover: #18558c;
    --color-tab-page: #E3F2FD;
    --color-tab-page-alt: #222;
    --color-tab-page-border: #4392F1;

    --color-button: #4392F1;
    --color-button-border: #4392F1;
    --color-button-text: #fff;
    --color-button-hover: #9cd1f8;
    --color-button-text-hover: #fff;

    --color-print-background: #fff;
    --color-print-text: #000;

    --color-tooltip: #fff;
    --color-tooltip-text: #000;

    --color-caption-text: #fff;
    --color-caption-border: #2070b7;
    --color-caption: #111;

    /*Size Variables*/
    --size-font: 10px;

    --size-card-padding: 10px;
    --size-card-radius: 4px;

    --size-button-padding: 10px;
    --size-button-radius: 2px;

    --size-line-height: 30px;

    --size-navbar-height: 70px;
    --size-breadcrumb-height: 50px;

    --size-sidebar-width-large: 20%;
    --size-sidebar-width-small: 15%;
    --size-sidebar-width-tablet: 25%;
    --size-sidebar-width-mobile: 80%;
    --size-sidebar-width-minimized: 72px;
    --size-sidebar-footer-height: 50px;

    --size-container-width-large: 80%;
    --size-container-width-small: 85%;
    --size-container-width-tablet: 75%;

    --size-qs-image: 150px;

    --size-modal-width-small: 400px;
    --size-modal-width-medium: 600px;
    --size-modal-width-large: 800px;
    --size-modal-width-full: 1200px;
    --size-modal-min-height: 400px;

    --size-print-width: 21cm;
    --size-print-height: auto;
    --size-print-padding: 20px;
}
/*COLOR THEME END*/

.int-photo-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
}
.int-file-input{
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.int-photo-button-add{
    height: 0;
    padding-bottom: 100%;
    border: solid 1px var(--color-primary);
    font-size: 1.5rem;
    color: white;
    display: block;
    cursor: pointer;
    transition: all .375s ease;
    background-image: url("../../gemstone_core/icon/default/add.png");
    background-size: 30%;
    background-position: center;
    background-repeat: no-repeat;
}
.int-photo-button-add:hover{
    background-color: var(--color-primary);
}
.int-photo-item{
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 0;
    padding-bottom: 100%;
}
.int-photo-item .gs-card-button{
    background-color: rgba(0,0,0,.5);
}