/*------------------------------------------- NOTE -----------------------------------------------*/
/*------- Add only those classes which are already exists in bootstrap.css to extend style -------*/
/*----------------------------- Don't add classes other than bootstrap ---------------------------*/

body {
}

.row {
    padding-top: 1.5px;
    padding-bottom: 1.5px;
}

.table {
    align-items: center;
    text-align: center
}

.col-form-label-sm {
    padding-top: calc(0.25rem + 1px);
    padding-bottom: calc(0.25rem + 1px);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Copy all style of (form-control) into (form-control-sm) AND Sofcom-TextBox-Remarks */

@media screen and (prefers-reduced-motion: reduce) {
    .form-control-sm {
        transition: none;
    }
}

.form-control-sm::-ms-expand {
    background-color: transparent;
    border: 0;
}

.form-control-sm:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
}

.form-control-sm::-webkit-input-placeholder {
    color: #6c757d;
    opacity: 1;
}

.form-control-sm::-moz-placeholder {
    color: #6c757d;
    opacity: 1;
}

.form-control-sm:-ms-input-placeholder {
    color: #6c757d;
    opacity: 1;
}

.form-control-sm::-ms-input-placeholder {
    color: #6c757d;
    opacity: 1;
}

.form-control-sm::placeholder {
    color: #6c757d;
    opacity: 1;
}

.form-control-sm:disabled, .form-control-sm[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

select.form-control-sm:focus::-ms-value {
    color: #495057;
    background-color: #fff;
}

/*----------------------------------------------------------*/


@media screen and (prefers-reduced-motion: reduce) {
    .Sofcom-TextBox-Remarks {
        transition: none;
    }
}

.Sofcom-TextBox-Remarks::-ms-expand {
    background-color: transparent;
    border: 0;
}

.Sofcom-TextBox-Remarks:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
}

.Sofcom-TextBox-Remarks::-webkit-input-placeholder {
    color: #6c757d;
    opacity: 1;
}

.Sofcom-TextBox-Remarks::-moz-placeholder {
    color: #6c757d;
    opacity: 1;
}

.Sofcom-TextBox-Remarks:-ms-input-placeholder {
    color: #6c757d;
    opacity: 1;
}

.Sofcom-TextBox-Remarks::-ms-input-placeholder {
    color: #6c757d;
    opacity: 1;
}

.Sofcom-TextBox-Remarks::placeholder {
    color: #6c757d;
    opacity: 1;
}

.Sofcom-TextBox-Remarks:disabled, .Sofcom-TextBox-Remarks[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

select.Sofcom-TextBox-Remarks:focus::-ms-value {
    color: #495057;
    background-color: #fff;
}

/*=================================================================================*/

.form-control-sm {
    height: calc(1.6rem + 2px);
    padding: 0.1rem 0.3rem;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 0.2rem;
    /**/
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.dropdown-menu {
    margin: 0px;
    padding-bottom: 20px;
    /*max-height: 80vh;
    overflow-y: auto;*/
}

/* --------- Media query for Dropdown (start) ---------- */

@media (max-width: 576px) {

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        max-height: 40vh !important;
        overflow-y: auto !important;
    }
}

@media (min-width: 576px) and (max-width: 768px) {

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        max-height: 50vh !important;
        overflow-y: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 992px) {

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        max-height: 60vh !important;
        overflow-y: auto !important;
    }
}

/*@media (min-width: 992px) {

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
}*/

/* --------- Media query for Dropdown (end) ---------- */

.popover {
    max-width: 1000px;
}

.modal-header .close {
    padding: 0px !important;
    width: 20px !important;
    height: 0px !important;
    margin: -4px 0px 0px 0px !important;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button !important;
}