/* your styles go here */

/* alert msg */
div.alert-messages {
    position: fixed;
    top: 50px;
    left: 25%;
    right: 25%;
    z-index: 7000;
}

.flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

/*modal begin*/
.modal-dialog {
    overflow-y: initial !important;
}

.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.modal-header {
    background-color: var(--bs-secondary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}
/*modal end*/

/* variable hide */
.value-hidden {
    display: none;
}

/* colors begin */
.color-regular {
    color: peru;
}

.color-red {
    color: red;
}

.color-blue {
    color: blue;
}

.color-green {
    color: green;
}

.color-orange {
    color: orange;
}

.color-icon-menu {
    color: highlight;
}

.color-icon-context {
    color: darkolivegreen;
}

.color-icon-context-update {
    color: lightsalmon;
}

.color-icon-edit {
    color: teal;
}

.color-icon-delete {
    color: firebrick;
}

/* colors end */

/* edit, delete, select bootstrap-icons*/
.icon-tbl {
    background-color: var(--bs-light);
    border-radius: .25rem;
}

.bi-size-smaller {
    font-size: 1.2rem;
}

.bi-size-regular {
    font-size: 1.5rem;
}

.bi-size-medium {
    font-size: 2rem;
}

.bi-color-regular {
    color: gray;
}

.bi-color-regular-alt {
    color: lightgray;
}

/* icons */
.icon-context {
    color: orange;
    font-size: 3rem;
}

/*loading*/
.overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.8) url("../img/loader.gif") center no-repeat;
}

/* Turn off scrollbar when body element has the loading class */
body.loading {
    overflow: hidden;
}

/* Make spinner image visible when body element has the loading class */
body.loading .overlay {
    display: block;
}
/* loading-end */

.crop-text-1 {
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.crop-text-2 {
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.crop-text-3 {
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/* image list display */
.icon-div {
    height: 70px;
    background-position: center;
    background-size: contain;
    /* fill,contain,cover,none,scale-down */
    background-repeat: no-repeat;
}

.image-div {
    height: 120px;
    background-position: center;
    background-size: contain;
    /* fill,contain,cover,none,scale-down */
    background-repeat: no-repeat;
}

.image-div-small {
    height: 80px;
    background-position: center;
    background-size: contain;
    /* fill,contain,cover,none,scale-down */
    background-repeat: no-repeat;
}

.image-div-large {
    height: 250px;
    background-position: center;
    background-size: contain;
    /* fill,contain,cover,none,scale-down */
    background-repeat: no-repeat;
}

.img-row {
    display: flex;
}

.img-column {
    flex: 25%;
    padding: 5px;
}

/* end image list display */

.table-img {
    max-height: calc(100vh / 7);
    max-width: calc(100vh / 7);
}

/* input width */
.custom-input {
    width: 128px;
}

.custom-input-wide {
    width: 256px;
}
/* input width */

/*intl-tel*/
.intl-tel-input {
    width: 100%;
    display: block;
}

.iti {
    width: 100%;
    display: block;
}