html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.change-header {
    background: #2e61ff;
    border-radius:10px 10px 0px 0px;
    text-align: center;
    color: white;
    font-weight: bold;
    height: 39px;
    padding-top: 6px
}
input, select {
    border-radius: 8px !important;
}
/*[for="DetailTheProposedChange"], [for="RequiredPersonnelResources"], [for="RequiredBudgetResources"] {
    width: 134px;
    overflow-wrap: break-word;
}*/
/*[for="RequiredBudgetResources"] {
    width:122px
}*/
/*.col-md-10{
    width:88%
}*/
.form-control {
    border: 1px solid #646262 !important
}
/*.w-12{
    width:12%
}*/
    .form-control:focus {
       /*box-shadow: 0px 2px 5px #838383 !important*/
       box-shadow: 0px 3px 0px gray !important
    }
.d-flex:not(.PlannedStartDate, .TypeOfChangeId) {
    align-items: center
}
.submit-btn, .submit-form-btn, .submit-btn-edit {
    background: #0b5ed7;
    color: white;
    width: 100px;
    padding-bottom: 9px;
    cursor: pointer
}
    .submit-form-btn:focus {
       border: 1px solid #5768ce
    }
[type="radio"] {
    transform: scale(1.5)translateY(1px)
}
.p-l-r-20{
    padding:0px 20px
}
label {
    font-weight: bold;
    text-wrap: nowrap;
}
textarea {
    resize: none;
    border-radius:8px !important
}
.empty {
    color: #999;
}
.back-btn {
    margin-left: 15px;
    background: white;
    padding: 8px;
    color: #2e61ff;
    border: 1px solid #2e61ff;
    border-radius: 8px;
    text-decoration-line: none;
}
    .back-btn:hover {
        background: #2e61ff;
        color:white
    }
.w-35-percent{
    width:35%
}
.ml-auto{
    margin-left:auto
}
m-t-30{
    margin-top:30px
}
.action-btn{
    border-radius:8px !important;
    padding-bottom:7px;
    min-width:100px
}
.dropdown-toggle::after{
    position:relative;
    top:2px
}
/*:is(.dropdown-item,.btn):hover {*/
.btn:not(.dropdown-toggle):hover {
    color: white !important;
    background: #0b5ed7;
}
/*.btn:hover{
    color:white
}*/
.btn:not(.submit-form-btn):focus {
    border: none
}
.w-34-percent{
    width:34%
}
.upload-file-span {
    top: -3px;
    background: #2e61ff;
    padding: 7px;
    border-radius: 8px;
    color: white;
    text-wrap: nowrap;
    left:0px
}
/*@media screen and (width: 1863px) {
    .upload-file-span {
        position:relative
    }
}*/
.details-fields-div [readonly], .details-fields-div [disabled] {
    border: none !important;
    /*background-color: #f6f6f6 !important;*/
    background-color: #e9ecef !important;
    user-select: none
}
:is([readonly],[disabled]):focus {
   box-shadow:none !important
}
/*Multiple Checkbox Css Start*/
.SumoSelect {
    width: 100% !important
}
.SumoSelect > .CaptionCont > span.placeholder {
   background-color:white
}
.SumoSelect > .CaptionCont {
    border-radius:8px
}
    .SumoSelect > .optWrapper.multiple > .options li.opt.selected span i, .SumoSelect .select-all.selected > span i, .SumoSelect .select-all.partial > span i {
        background-color: #2e61ff
    }
    .SumoSelect > .optWrapper.multiple > .options li.opt span i, .SumoSelect .select-all > span i{
        width:18px;
        height:18px
        
    }
    .SumoSelect > .CaptionCont > span.placeholder{
        color:black;
        font-style:normal
    }
/*Multiple Checkbox Css End*/
[type="radio"][disabled] {
    background-color: green;
}
.readonly input{
    user-select:none
}
.table-header{
    background:#0b5ed7
}
.table-header th{
    color:white
}
.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: white
}
.table-striped > tbody > tr:nth-of-type(even) {
    --bs-table-accent-bg: #1469e43d
}
.btn-inside-table {
    color: white;
    width: 69px;
    /* width: 40px; */
    padding: 4px
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus{
    box-shadow:none
}
.dataTables_wrapper .dataTables_filter{
    margin-bottom:10px
}
.logout-btn {
    background: white;
    color: blue !important;
    border-radius: 8px
}
.modal-header {
    padding: 7px;
    background: #0b5ed7
}
.modal-header h5{
    color:white
}
.modal-close-btn {
    background: #0b5ed7;
    color: white;
    border: none;
    font-weight: bold;
}
.cancel-modal-btn, .ok-modal-btn {
    background: white;
    color: blue !important;
    border-radius: 8px;
    width:85px
}
    .ok-modal-btn:active, .ok-modal-btn:focus {
        color: white !important
    }
.edit-section-status h3 {
    float: right;
    /* font-size: 11px; */
    color: #0b2ccd;
    font-weight: bold;
}
.Initiated{
    color:blue
}
.Approved, .ApprovedByManager, .ApprovedByCab {
    color: green !important
}
.Pending {
    color: #b3780d;
}
.Defered, .DeferedByManager, .DeferedByCab{
    color: orange !important
}
.Rejected, .RejectedByCab, .RejectedByManager {
    color: red !important
}
.Closed {
    color: purple !important
}
/*.Initiated , .Approved,.Defered,.Rejected{
    font-weight:500
}*/

.request-for-change, .detail-heading-label {
    color: white;
    background: #0b5ed7;
    /* text-indent: 10px; */
    height: 40px;
    border-radius: 8px;
    text-align: center;
    transform: translate(4px, 10px) skewX(-10deg);
}
.accordion-button:not(.collapsed) {
    background: #0b5ed7;
    color: white
}
    .accordion-button:not(.collapsed)::after {
        border-left: 10px solid transparent;
        border-right: 9px solid transparent;
        border-top: 12px solid white;
        transform: rotate(-180deg) translateY(6px);
    }
.accordion-button:focus{
    border:none;
    box-shadow:none  
}
.Closed{
    font-weight:500;
    color:purple
}
.submit-failed-ok-modal:hover {
    background: #dc3545 !important;
    color: white
}
#required-fields .submit-failed-ok-modal {
    background: white;
    border-radius: 8px;
    width: 85px;
    color: #dc3545;
    border: 1px solid #dc3545
}

.modal-close-btn:hover {
    cursor: pointer
}
.edit-log-status button, .accordion-button {
    box-shadow: 1px 1px 5px gray, -1px -1px 5px gray;
}
#single-close, #single-close2 {
    border-radius: 8px
}
:is(.ClosedStatusActive) :is(input,select,textarea,p) {
    pointer-events: none;
    background: #e9ecef !important
}
.disable-radio input {
    pointer-events: none
}
@media screen and (max-width: 1400px) {
    .CounterMeasures {
        text-wrap:wrap
    }
}
.select-file{
    width:100px
}

.logout-div > h2, .logout-div > p {
    text-align: center
}

.lockwrapper {
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.delete-file {
    color: red;
    transform: scale(2);
    margin-left:20px
}
.fa-download {
    color: steelblue;
    transform: scale(2) translateY(1px);
    margin-left: 20px;
    
}
.ClosedStatusActive .delete-file{
    display:none
}

/*// Loader CSS */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    / border: 3px solid transparent;
    / border-top-color: #9370DB;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #BA55D3;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #FF00FF;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}