/*****************
* Region Select2 *
*****************/
.select2-selection.is-valid {
    border-color: #4dbd74 !important;
}

.select2-selection.is-valid:focus {
    border-color: #4dbd74 !important;
    box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.25);
}

.select2-selection.is-valid~.valid-feedback,
.select2-selection.is-valid~.valid-tooltip {
    display: block;
}

.select2-selection.is-invalid {
    border-color: #f86c6b !important;
}

.select2-selection.is-invalid:focus {
    border-color: #f86c6b !important;
    box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.25);
}

.select2-selection.is-invalid~.invalid-feedback,
.select2-selection.is-invalid~.invalid-tooltip {
    display: block;
}

.select2-container {
    width: 100% !important;
}
/********************
* Endregion Select2 *
********************/

/****************
* Region Header *
****************/
header a.nav-link.nav-link {
    display: flex;
    margin: 0 10px;
    align-items: baseline;
}

header a.nav-link.nav-link label.userName {
    cursor: pointer;
}

.app-header.navbar .nav-item .nav-link > #imgAvatar {
    height: 35px;
    width: 35px;
    margin: 0 10px !important;
}

.app-header.navbar .nav-item .nav-link > #imgAvatar > .img-avatar {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
/*******************
* Endregion Header *
*******************/

/*********************
* Region Image ratio *
*********************/
.img-ratio{
	position: relative;
	width: 100%;		/* desired width */
}
.img-ratio:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}
.img-ratio div{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.custom-file-image {
    object-fit:cover;
    border-radius: 50%;
    border: 3px solid #c8ced3;
}
/************************
* Endregion Image ratio *
************************/

/*****************
* Region Loading *
*****************/
#layout-loader{
    display: flex;
    position: fixed;
    z-index: 9999;
    background-color: rgba(255, 255, 255,0.5);
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    align-items: center;
}
/********************
* Endregion Loading *
********************/

/***************
* Region Table *
***************/
.table-ellipsis td{
    max-width: 100px;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.datatable{
    clear: both;
    border-collapse: collapse;
    table-layout: fixed; 
    word-wrap:break-word; 
}

.table th{
	white-space: nowrap; 
}
/******************
* Endregion Table *
******************/

/**************
* Region Logo *
**************/
.app-header.navbar .navbar-brand {
    background-image: url("../img/cms-logo.png");
    background-size: contain;
}

@media (min-width: 992px) {
    .brand-minimized .app-header.navbar .navbar-brand {
        background-image: url("../img/icon-logo.png");
        background-size: contain;
    }
}
/*****************
* Endregion Logo *
*****************/

/*********************
* Region SweetAlert2 *
*********************/
.swal2-overlay {
    z-index: 1100 !important;
}
/************************
* Endregion SweetAlert2 *
************************/

/*********************
* Region Input Color *
*********************/
input[type=color].form-control {
    height: 35px;
}
/************************
* Endregion Input Color *
************************/