/* 
TM Colors
Blue: 263048
Orange: ff8848
*/
td.remove{
    background-color: #dc1b1b;
    cursor: pointer;
    text-align: center;
}

a.obdNav{
    display: block;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    height: auto;
    width: fit-content;
    font-size: 14px;
    float: left;
    padding: 14px 16px;
}
div.obdNav-Main{
    background-color: #263048;
    max-height: 10vh;
}
@keyframes urgentFlashBlue {
    from {
        background-color: #91f4ff;
        color: #000000;
    }
to {
        background-color: rgb(255, 0, 0);
        color: #ffffff;
    }
}
@keyframes urgentFlashGrey {
    from {
            background-color: #abaaa7;
            color: #000000;
        }
    to {
            background-color: rgb(255, 0, 0);
            color: #ffffff;
        }
}
td.urgent.pending{
    animation-name: urgentFlashBlue;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
td.urgent.off{
    animation-name: urgentFlashGrey;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

nav.obdNav{
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom: 1vh;
    font-size: 18px;
    font-weight: 525;
    padding-bottom: 12px;
    height: 30px;
    background-color: #263048;
    padding-top: 1px;
}

a.obdNav:hover{
    color:#000000;  
}

a.obdNav.selected{
    color:#000000;  
}

div.dropdown{
    overflow: hidden;
    display: inline-block;
    max-width: 10vw;
    margin-top: 0px;

}

div.navDiv{
    display: inline-block;
}
div.dropdown-content{
    display: none;
    z-index: 1;
    position: absolute;
    background-color: #263048;
    min-width: 160px;
    max-width: fit-content;
    padding-bottom: 5px;
}

div.dropdown:hover div.dropdown-content{
    display: block;
}
a.fold-nav{
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    font-weight: 525;
    margin-left: 16px;

}
/*
a.fold-nav-new{
    color: #ffffff;
    text-align: center;
    font-weight: 525;
    padding: 14px 16px;
    height: auto;
    width: fit-content;
    font-size: 14px;

}*/

/*a.drop-item{
    float: none;
    display: block;
    text-align: left;
    color: #ffffff;
    text-decoration: none;    
    font-size: 14px;
    width: fit-content;
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 12px;

}

a.drop-item:hover{
    color: #000000;
}
*/
@keyframes loading {
    from {rotate: 0deg;}
    to {rotate: 360deg;}
}

tbody.doc-manage{
    max-height: 40vh;
    overflow-y: scroll;

}

tbody.doc-manage > tr{
    color: #000000;
    background-color: #ffffff;
    text-align: center;
}

thead > tr{
    color: #ffffff;
    background-color: #263048;
    text-align: center;
}

div.loading{
    display: block;
    overflow: hidden;
}
div.team-edit-div{
    display: none;
}
div.loading-ani{
    display: flex;
    width: 100%;
    overflow: hidden;    
}
div.loading-ani-table{
    display: inline-block;
    width: 500px;
    overflow: hidden;    
    margin-left: auto;
    margin-right: auto;
}
option.home-group{
    font-weight: bold;
}
tr.obdDisplayRow > td.button{
    background-color: #ff8848;
}

tr.obdDisplayRowClient > td.button{
    background-color: #ff8848;
}
tr.obdDisplayRowClient > td.add-req:hover{
    cursor: pointer;
}
tr.obdDisplayRow > td:hover{
    cursor: pointer;
}

tr.obdDisplayRow > td[name=screenTD]{
    border-style: outset;
    border-width: 1px;
    border-color: #000000;
    text-align: center;
    cursor: pointer;
}
tr.obdDisplayRowClient > td[name=screenTD]{
    border-style: outset;
    border-width: 1px;
    border-color: #000000;
    text-align: center;
    cursor: auto;
}
tr.obdDisplayRow > td[name=screenTDSel]{
    border-style: outset;
    border-width: 1px;
    border-color: #ff8848;
    outline: #ff8848;
    outline-style: solid;
    outline-width: 6px;
    text-align: center;
    outline-offset: 0px;

}

td[name=screenTD], td[name=addReqTD]{
    cursor: pointer;
}
tr.obdDisplayRowClient > td[name=screenTDSel], td[name=screenTD]:hover, td[name=addReqTD]:hover{
    border-style: outset;
    border-width: 1px;
    border-color: #ff8848;
    outline: #ff8848;
    outline-style: solid;
    outline-width: 6px;
    text-align: center;
    outline-offset: 0px;

}
table > tbody > tr:nth-child(1).obdDisplayRow{
    color: #ffffff;
    background-color: #263048;
    text-align: center;
    
}

table.ticketTable{
    margin-left: auto;
    margin-right: auto;
}

h3.page-title{
    text-align: center;
}

table{
    margin-top: 1vh;
    margin-bottom: 1vh; 
}

div.my-obd-div > h4{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#pendingTeamOBD > table{
    margin-left: auto;
    margin-right: auto;
}

b.modalCandInfo, p.modalCandInfo{
    display: inline;
}

tr.selected, tr.selected > td.response, tr.selected > td.no-response{
    background-color: #ff8848;
}

div.notifs-table{
    margin-left: 10vw;
    width: fit-content;
    display: inline-block;
}

div.modal-img{
    width: 90%;
    height: 30%;
    overflow-y: scroll;
    overflow-x: scroll;
}

#addReqModalTitle{
    text-align: center;
}

div#choiceSetModal, div#viewChoiceSetModal{
    z-index: 2;
}
td.in-progress{
    background-color: #91f4ff;
}

div#addReqHistoryInner > *{
    margin-left: 5%;
}

td.repsonse{
    background-color: #99FF66;
}

td.no-response{
    background-color: #ff919d;
}

div.obdModal-Notes{
    display: none;
    position:fixed;
    top: 0;
    left: 0;
    z-index: 2;
    overflow-y: auto;
    overflow-x: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4); 
    background: rgba(140, 140, 140, .5);
    min-height: 30vh;
    min-width: 50vh;
    width: 100%;
    height: 100%;
}

div.obdModal-Notes-view{
    display: none;
    position:fixed;
    top: 0;
    left: 0;
    z-index: 1;
    overflow-y: auto;
    overflow-x: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4); 
    background: rgba(140, 140, 140, .5);
    min-height: 30vh;
    min-width: 50vh;
    width: 100%;
    height: 100%;    
}

div.notes-inner{
    justify-content: center;
    width:min-content;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3vh;
}

#noteFormTitle{
    text-align: center;
}

table.notes-table.loading{
    opacity: .5;
}

th.obdHeader{
    text-align: center;
    user-select: none;
}

div.modal-content-notes-view{
    width: 40vw;
    margin-top: 15vh;
    border-style: solid;
    border-color: #263048;
    border-width: 5px;
    background-color: #F8F8FF;
    border-radius: 30px;
    margin-left: auto;
    margin-right: auto;
}

table.notes-table{
    border-style: solid;
    border-color: #263048;
    border-width: 3px;
}

table.notes-table > tbody > tr > td{
    border-style: solid;
    border-color: #263048;
    border-width: 2px;
}

div.note-loading{
    opacity: 50%;
}

div.notes-view-inner{
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
}

div.modal-content-notes{
    width: 25vw;
    margin-top: 15vh;
    border-style: solid;
    border-color: #263048;
    border-width: 5px;
    background-color: #F8F8FF;
    border-radius: 30px;
    margin-left: auto;
    margin-right: auto;
}

.loading-title{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

img.loading-img{
    animation-name: loading;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    margin-left: auto;
    margin-right: auto;
}

div.modal-buttons{
    display: none;
}
button.modal-button.export{
    margin-bottom: 20px;
}

div#clientSelDiv, div#recSelDiv{
    max-height: 150px;
    overflow-y: scroll;
    border-style: solid;
    border-radius: 5px;
    border-width: 3px;
    border-color: #dd692b;
    margin-top: 5px;
    margin-bottom: 5px;
}

div.filter-cont{
    margin-right: 15px;
}
div.filter-box{
    display: flex;
}

ul.doc-list{
    list-style-type: none;
}

button.modal-button.disabled{
    opacity: 70%;
    cursor: not-allowed;
}
button.modal-button:disabled{
    opacity: 70%;
    cursor: not-allowed;
}
button.modal-button{
    color: #fff;
    font-size: 16px;
    padding: 3px;
    padding-left: 6px;
    padding-right: 6px;
    margin-right: 6px;
    background-color: #ff8848;
    border-radius: 5px;
    border: 2px solid #dd692b;
    display: inline;
    cursor: pointer;
}

/*button.modal-button.disabled{
    opacity: 70%;
}*/

div.warning{
    background-color: #ff4141;
    border-style: dashed;
    border-color: #000000;
    border-radius: 5px;
    border-width: 2px;
    width: fit-content;
    height: fit-content;
}

button.td-button{
    /*color: #fff;*/
    font-size: 16px;
    /*padding: 3px;
    padding-left: 6px;
    padding-right: 6px;
    margin-right: 6px;
    */
    background-color: #ff8848;
    border: 2px solid #dd692b;
    display: inline;
}

td.button {
    padding: 0;
}

.modal-title-cust{
/*    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-color: #263048;*/
    background-color: #ff8848;
    color: #ffffff;
    border-style: solid;
    border-width: 4px;
    border-radius: 10px;
    border-color: #263048;
    margin-bottom: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
}

.inline-text{
    display: inline;
}

div.info{
    
}

div.info > b{
    display: inline;
}
div.info > p{
    display: inline;
}

button.modal-button.loading{
    opacity: 40%;
}

td.no-docs{
    background-color: #eaff00;
}

td.started{
    background-color: #eaff00;
}

div.filterDiv{
    width: 100%;
    justify-content: center;
}


div#modalDocGroups{
    padding-left: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
}

#modalDocTable > tr > th, #modalDocTable > tr > td{
    border-width: 1px;
    border-color: #000000;
}

#modalDocTable > tr > th{
    background-color: #263048;
    color: #ffffff;
}

div.innerFilterDiv{
    width: fit-content;
    margin-left:auto;
    margin-right:auto;
    border-color: #dd692b;
    border-width: 5px;
    border-radius: 5px;
    border-style: solid;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-top: 5px;
}
div.innerFilterDivClient{
    width: fit-content;
    margin-left:auto;
    margin-right:auto;
    border-color: #dd692b;
    border-width: 5px;
    border-radius: 5px;
    border-style: solid;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-top: 5px;
}


table.obdDisplayTable{
    margin-top: 20px;
    margin-left:auto;
    margin-right:auto;
    width: 98vw;
    box-shadow: 0 0 40px rgba(0,0,0,0.15);
}

div#tableContainer{
    margin-bottom: 5%;
    display: block;
}

footer.obd-footer{
    text-align: center;
}
div.footer{
    bottom: 0%;
    position: fixed;
    width: 100%;
    height: fit-content;
    background-color: #ffffff;
}
div.pendObdTeamDiv{
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    margin-bottom: 2%;
    border-color: #ff8848;
    border-style: solid;
    border-radius: 5px;
    border-width: 10px;
    height: fit-content;
    width: 50%;
    padding: 2%;
}
div.pend-obd-header > h2{
    text-align: center;
    width: fit-content;
    color: #ffffff;
}

div.pend-obd-header{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    background-color: #263048;
    border-radius: 5px;
    padding: 8px;
}

div.pendObdTeamDiv > h4{
    width:fit-content;
    margin-left: auto;
    margin-right: auto;
}
div.pendObdTeamDiv > table{
    margin-left: auto;
    margin-right: auto;
}

table.teamPend > tbody > tr > th{
    background-color: #263048;
    color: #ffffff;
    text-align: center;
}

table.teamPend > tbody > tr.trSelect{
    background-color: #ff8848;
}

table.teamPend > tbody > tr{
    background-color: #ffffff;
}

table.teamPend > tbody > tr > td{
    border-color: #000000;
    border-style: solid;
    border-width: 2px;
}

div#Unassigned_docs{
    max-height: 25vh;
    overflow-y: scroll;
}

table.obdDisplayTable > tbody{
    border-style: solid;
    border-width: 2px;
    border-radius: 30px;
}

div.obdModal-history{
    display: none;
    position:fixed;
    top: 0;
    left: 0;
    z-index: 2;
    overflow-y: auto;
    overflow-x: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4); 
    background: rgba(140, 140, 140, .5);
    min-height: 30vh;
    min-width: 50vh;
    width: 100%;
    height: 100%;        
}

div#newOBDGroupModal{
    z-index: 2;
}

td.remove-cel{
    background-color: #dc1b1b;
    text-align: center;
    font-weight: 600;
}
tbody#createGroupDocsBody > tr > td:nth-child(3){
    background-color: #dc1b1b;
    text-align: center;
    font-weight: 600;
}

tbody#createGroupDocsBody > tr > td:nth-child(3).selected{
    outline-color: #000000;
    outline-style: solid;
    outline-width: 3px;
}

div#modal-title-div, div#create-modal-title-div{
    background-color: #263048;
    border-radius: 5px;
    color: #ffffff;
    border-color: #ff8848;
    border-style: solid;
    border-width: 5px;
    padding: 5px;
}

div#modal-title-div.error{
    background-color: #ff0000;
    border-color: #000000;

}

div.doc-group-doc-assign > button.modal-button{
    margin-top: 5px;
    margin-bottom: 5px;
}

tbody#createGroupDocsBody > tr:nth-child(1) > th, table#Unassigned_docs_table > tbody > tr > th{
    background-color: #263048;
    color: #ffffff;
    text-align: center;
}

tbody#createGroupDocsBody > tr > td, table#Unassigned_docs_table > tr > td{
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
}

div#create-modal-inner >  table, div#create-modal-inner >  select{
    margin-top: 5px;
    margin-bottom: 5px;
} 
div.doc-group-doc-assign > table > tbody > tr > th{
    background-color: #263048;
    color: #ffffff;
    text-align: center;
}

div.doc-group-doc-assign{
    border-color: #263048;
    border-width: 4px;
    border-radius: 5px;
    border-style: solid;
    padding: 5px;
}

div.doc-group-doc-assign > table > tbody > tr > td{
    border-color: #000000;
    border-width: 2px;
}

div.modal-content-history{
    width: 55vw;
    margin-top: 15vh;
    border-style: solid;
    border-color: #263048;
    border-width: 5px;
    background-color: #F8F8FF;
    border-radius: 30px;
    margin-left: auto;
    margin-right: auto;
}


#modalTitleDiv{
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
}

td.not-started, #modalTitleDiv.not-started, div.not-started{
    background-color: #ff919d;
}

td.invite-sent, #modalTitleDiv.invite-sent, div.invite-sent{
    background-color: #fbff91;
}

td.pending, #modalTitleDiv.pending, div.pending{
    background-color: #91f4ff;
    font-style: bold;
}

td.partial, #modalTitleDiv.partial, div.partial{
    background-color: #91f4ff;
}

td.complete-clear, #modalTitleDiv.complete-clear, div.complete-clear{
    background-color: #99FF66;
}

td.complete-consider, #modalTitleDiv.complete-consider, div.complete-consider{
    background-color: #ff85d4;
}

td.n-a, #modalTitleDiv.n-a, div.n-a{
    background-color: #99FF66;
}

td.complete-fail, #modalTitleDiv.complete-fail, div.td.complete-fail, td.fail{
    background-color: #ff6666;
}

tr.obdDisplayRow > td{
    font-weight: 640;
    text-align: center;
}

tr.obdDisplayRowClient > td{
    font-weight: 640;
    text-align: center;
}

tr.headerRow{
    background-color: #263048;   
}

tr.obdHeaderRow > th:nth-child(2){
    white-space: nowrap;
}


tr.obdDisplayRow > td.dateTD{
    white-space: nowrap;
}


tr.headerRow > th{
    color: #fff;
}

div.addReqScroll{
    
}

div#addReqStatus{
    height: 50vh;
    overflow-y: scroll;
}

div#addReqStatus, div#addReqOBDInfo{
    padding-left: 5%;
    padding-right: 5%;
}


div#addReqStatus > div{
    margin-bottom: 1vh;
    border-style: solid;
    border-color: #000000;
    border-width: 2px;
    border-radius: 7px;
    padding: 5px;
}

tbody#addReqHistTableBody > tr > td{
    padding-left: 3px;
    padding-right: 3px;
}

div#addReqInner > button, div#addReqButtons > button:nth-child(1){
    margin-left: 5%;
    margin-bottom: 3px;
}
div#addReqStatus > div > p{
    display: inline;
}
div#addReqStatus > div > b{
    display: block;
}
div#addReqStatus > div > button{
    display: block;
}

table > tbody > tr.obdDisplayRow{

}

tr.roleRow, tr.roleRow > td{
    cursor: pointer;

}
div.tableCenter{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

tr.tabRow > td{
    font-size: large;
    padding-left: 3px;
    padding-right: 3px;
    font-style: bold;
}
tr.roleRow:hover{
    background-color: #ff8848;    
}
.obdDisplayTable, .obdDisplayRow, .obdDisplayRowClient, .obdDisplayRow th, tr.obdDisplayRow > td[name='regTD']{
    border: 1px solid black;
}
table.obdDisplayTable > tbody > tr.obdDisplayRow > td[name="regTD"], table.obdDisplayTable > tbody > tr.obdDisplayRowClient > td[name="regTD"]{
    border: 1px solid black;
}
tr.obdDisplayRow.trSelect > td[name='regTD'], tr.rowSelect{
    background-color: #ff8848;
}
td.complete{
    background-color: #99FF66;
}
td.incomplete{
    background-color: #ff919d;
}
tr.complete, select#createGroupDocSel > option.complete{
    background-color: #99FF66;
}
tr.incomplete, select#createGroupDocSel > option.incomplete{
    background-color: #ff919d;
}
li.modal-doc-complete{
    background-color: #99FF66;
    border-style: solid;
    border-color: #000000;
    border-width: 2px;
    border-radius: 5px;
    margin-top: 1px;
}
@keyframes rejectFlash {
    from {
        background-color: #ffffff;
        color: #000000;
    }
to {
        background-color: #ff919d;
        color: #000000;
    }
}


tr.modal-doc-rejected{
/*    animation-name: rejectFlash;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
*/    
    background-color: #ffc400;
    border-style: solid;
    border-top-width: 0px;
    border-color: #000000;
    border-width: 2px;
    border-radius: 5px;
    margin-top: 1px;
    cursor: pointer;
}
tr.modal-doc-rejected-text{
    background-color: #ffc400;
    border-style: solid;
    border-color: #000000;
    border-width: 2px;
    border-radius: 5px;
    margin-top: 1px;
    width: 100%;
}
/*tr.modal-doc-rejected-text > td{
    width: 100%;
}*/
table.obdDisplayTable.loading{
    opacity: .5;
}

li.modal-doc-incomplete{
    background-color: #ff919d;
    border-style: solid;
    border-color: #000000;
    border-width: 2px;
    border-radius: 5px;
    margin-top: 1px;

}
li.modal-doc-pending{
    background-color: #91f4ff;
    border-style: solid;
    border-color: #000000;
    border-width: 2px;
    border-radius: 5px;
    margin-top: 1px;

}

li.modal-doc-incomplete, li.modal-doc-complete{
    width: 80%;
}

div.modal{
    display: none;
    z-index: 1;
}

td.no-group{
   background-color: #abaaa7;
}


tr.package-select{
    background-color: #ff8848;
}

#screenModalTitle{
    display: inline-block;
    text-align: left;
    width: 100%;
}
#screenModalLastUpdated{
    display: inline-block;
    text-align: right;
    width: 100%;
}

#modalTitleDiv > div:nth-child(1){
    width: 60%;
    padding-left: 5px;
}
#modalTitleDiv > div:nth-child(2){
    width: 40%;
    padding-right: 5px;
}
div.loadingTable{
    display: flex;
    overflow: hidden;
}
div.loadTableModal{
    display: none;
    position:fixed;
    top: 0;
    left: 0;
    z-index: 1;
    overflow-y: auto;
    overflow-x: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4); 
    background: rgba(140, 140, 140, .5);
    width: 100%;
    height: 100%;
    align-content: center;    
}
#loading_penguin_table{
    margin-left: auto;
    margin-right: auto;
}
div.obdModal {
    display: none;
    position:fixed;
    top: 0;
    left: 0;
    z-index: 1;
    overflow-y: auto;
    overflow-x: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4); 
    background: rgba(140, 140, 140, .5);
    width: 100%;
    height: 100%;
    
    /*    left: 0;
    top: 0;
    width: 65%; 
    height: 100%;*/ 
}

div.modal-doc-div{
    border-style: solid;
    border-color: #263048;
    border-width: 3px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 15px;
}

div.modal-doc-div, div.modal-doc-div > div{
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5%;
    margin-right: auto;
}

#modal-general-data{
    padding-left: 5%;
}

div.modal-doc-div > div{
    border-radius: 5px;
    width: 75%;
    padding-left: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
}

div.modal-doc-div > div > select{
    display:inline;
}

div.modal-content {
    width: 65vw;
    margin-top: 2vh;
    border-style: solid;
    border-color: #263048;
    border-width: 5px;
    background-color: #F8F8FF;
    border-radius: 30px;

    /*    left: 0;
    top: 0;
    width: 65%; 
    height: 100%;*/ 
}

form.support-form > input, textarea{
    display: block;
    margin-top: 2px;
}

table.screen-modal{
    margin-left: 10%;
    margin-right: auto;
    margin-bottom: 5px;
    width: 75%;
    max-height: 75%;
    overflow-y: auto;
    display: block;
}

div.screen-table > b{
    margin-left: 10%;
    margin-right: auto;

}


div.screen-table > table > tbody > tr > th{
    color: #ffffff;
    background-color: #263048;
    text-align: center;

}

div.screen-table > table > tbody > tr > td{
    text-align: center;

}

#screenNotesTable > tr > td:nth-child(2){
    text-align: left;
}


#screenNotesTable > tr > td:nth-child(2), #screenNotesTable > tr > th:nth-child(2){
    width: 40%;
}
#screenNotesTable > tr > td:nth-child(2){
    padding: 3px;
}
#screenNotesTable > tr > td:nth-child(1), #screenNotesTable > tr > th:nth-child(1){
    width: fit-content;
}
div#passwordResetTitle > b{
    display: inline;

}

div#passwordResetTitle{
    padding-left: 5%;
}

div.obdModal-delete{
    display: none;
    position:fixed;
    top: 0;
    left: 0;
    z-index: 2;
    overflow-y: auto;
    overflow-x: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4); 
    background: rgba(140, 140, 140, .5);
    min-height: 30vh;
    min-width: 50vh;
    width: 100%;
    height: 100%;
}
#modal-title-del{
    text-align: center;
}

div.modal-content-delete{
    width: 40vw;
    height: 30vh;
    margin-top: 10vh;
    border-style: solid;
    border-color: #263048;
    border-width: 5px;
    background-color: #F8F8FF;
    border-radius: 30px;
    margin-left: auto;
    margin-right: auto;
}
table{
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    border-collapse: collapse;
}
table > tbody > tr > td{
    padding: 0%;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;

}

li.obdNav{
    list-style-type: none;
    display: inline;    
}

div.obdNav{
    display: block;
    height: fit-content;
    float: left;
    padding-left: 1vw;
    padding-right: 1vw;
    cursor: pointer;
}


body{
    margin: 0%;
    font-family: "Gill Sans", sans-serif;
}

div.obdNav:nth-child(1){
    padding-left: 2vw;

}



div#modal-inner-del > div{
    width: fit-content;
    height: fit-content;
    margin: auto;
}
#screenNotesTable > tr > td, #screenNotesTable > tr > th{
    width: 22%;
}

div.table-div > table{
    margin-left: auto;
    margin-right: auto;
}

div.auth{
    padding-left: 5%;
}

div.faq{
    padding-left: 5%;
    padding-right: 15%;
}

div.table-div > table > tbody > tr:nth-child(1){
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    background-color: #263048;
    color: #FFFFFF;
}
div.table-div > table > tbody > tr > td{
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
}

div.screen-table > button{
    margin-left: 10%;
}
#screenNotesTable > tr:nth-child(1), #screenHistoryTable > tr:nth-child(1){
    position: sticky;
    top: 0px;
}
#screenNotesTable{
    width: 100%;
    display: table;
}

div.screen-table{
    border-style: solid;
    background-color: #ffffff;
    border-color: #000000;
    border-width: 3px;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px; 
    height: 32%;
    max-height: 32%;
    padding-bottom: 5px;
}
div.screen-table.noteTable{
    height: fit-content;
    padding-bottom: 5px;
}
div#supportBody{
    padding-left: 5%;
}

div#supportBody > button.modal-button, div#supportBody > input{
    margin-top: 4px;
}

#modalDocTable > tr.modal-doc-complete{
    background-color: #99FF66;
}

#modalDocTable > tr.modal-doc-incomplete{
    background-color: #ff919d;
}
#modalDocTable > tr.modal-doc-pending{
    background-color: #91f4ff;
}

#screenEditModal{
    display: none;
    position:fixed;
    top: 0;
    left: 0;
    z-index: 2;
    overflow-y: auto;
    overflow-x: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4); 
    background: rgba(140, 140, 140, .5);
    min-height: 30vh;
    min-width: 50vh;
    width: 100%;
    height: 100%;
}

#screenNotesInner > b, #screenNotesInner > textarea, #screenNotesInner > button{
    margin-left: 5%;
    margin-bottom: 5px;
} 

#screenEditModalInner > button, #screenEditModalInner > select{
    margin-left: 10%;
    margin-bottom: 5px;
}
#screenModalContentEdit{
    width: 20vw;
    height: 25vh;
    margin-top: 10vh;
    border-style: solid;
    border-color: #263048;
    border-width: 5px;
    background-color: #F8F8FF;
    border-radius: 30px;
    margin-left: auto;
    margin-right: auto;
}

div.modal-content-screen {
    width: 60vw;
    height: fit-content;
    margin-top: 10vh;
    border-style: solid;
    border-color: #263048;
    border-width: 5px;
    background-color: #F8F8FF;
    border-radius: 30px;
    margin-left: auto;
    margin-right: auto;
    /*    left: 0;
    top: 0;
    width: 65%; 
    height: 100%;*/ 
}


table.screen-modal > tbody > tr > td, table.screen-modal > tbody > tr > th{
    border-style: solid;
    border-color: #000000;
    border-width: 1px;
} 

.page-btn, .response_button {
    color: #fff;
    font-size: 16px;
    padding: 3px;
    padding-left: 6px;
    padding-right: 6px;
    margin-right: 6px;
    background-color: #ff8848;
    border-radius: 5px;
    border: 2px solid #dd692b;  
}

.page-btn-inline{
    color: #fff;
    font-size: 16px;
    padding: 3px;
    padding-left: 6px;
    padding-right: 6px;
    margin-right: 6px;
    background-color: #ff8848;
    border-radius: 5px;
    border: 2px solid #dd692b;
    display: inline;
}

div.close-container{
  /*  border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: gray;*/
    overflow: auto;
}

span.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: relative;
    cursor: pointer;
    margin-top: 4px;
    margin-right: 4px;
}

button.del-but-disabled{
    background-color: #ff6b6b;
    border: 3px solid #636363;
    color: #636363;
    width: 33%;
}

button.motal-button.disabled{

}

button.cert-but-disabled{
    background-color: #00ff408d;
    border: 3px solid #636363;
    border-radius: 5px;
    border-style:  solid;
    color: #636363;
    width: 33%;

}
div.page-header-div{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    background-color: #263048;
    border-radius: 5px;
    padding: 8px;
}

h4.table-header{
    text-align: center;
}
h2.page-header, h4.page-header{
    text-align: center;
    width: fit-content;
    color: #ffffff;
}
button.cert-but-enabled{
    border-radius: 5px;
    border-style:  solid;
    background-color: #00ff40;
    border: 3px solid #636363;
    color: #636363;
    width: 33%;
}

button.del-but-enabled{
    background-color: #ff0000;
    border: 3px solid #000000;
    color: #000000;
    width: 33%;
}

div.my-obd-div > h4{
    display: block;
}



.modal-content{
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.navbar.navbar-expand-lg.navbar-light.bg-light{
    background-color: #263048;
    color: #F8F8FF;
}

.collapse.navbar-collapse{
    background-color: #263048;
    color: #F8F8FF;    
}

a.nav-link{
    color: #F8F8FF;
}

div.right-div{
    margin-top: 1vh;
    margin-right: 0;
    margin-left: auto;
    padding-right: 20px;
}

h1.page-title{
    display: inline;   
    color: #ffffff; 
}

div.page-title-div{
    display: inline;
    padding-bottom: 0px;
    height: 10vh;
    width: 100vw;
}

div.peng-img-div{
    width: fit-content;
    height: fit-content;
}
div.page-title-header-div{
    border-color: #ff8848;
    background-color: #263048;
    border-width: 4px;
    border-style: solid;
    display: inline;
    padding-bottom:3px;
    padding-left:3px;
    padding-right:3px;
    margin: 0%;
    border-radius: 10px;
    margin-top: 1vh;
    margin-bottom: 2px;
    margin-right: 3px;
    cursor: default;
}

div.client-obd-title{
    width: fit-content;
    height: fit-content;
    background: #263048;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 3px;
    padding-left: 3px;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.client-obd-title{
    color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

div.filterDiv-clients > div{
    border-style: solid;
    border-width: 3px;
    border-radius: 3px;
    border-color: #ff8848;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

div.notifOptions > p{
    display: inline;
}

@keyframes follow-load {
    0% {border-width: 4px;}
    20% {border-width: 7px;}
    40% {border-width: 12px;}
    60% {border-width: 10px;}
    80% {border-width: 7px;}
    100%{border-width: 4px;}
}


div.notifOptions{
    border-style: double;
    border-radius: 5px;
    border-color: #ff8848;
    border-width: 4px;
    margin-top: 2px;
    padding-left: 1px;
}

div.notifOptions.filt-loading{
    opacity: 40%;
}

input.followCheck{
    display: inline;
    margin-left: 3%;

}

input[type="checkbox"]:checked {
    background: blue;
    color: white;
}

div.page-title-div-inner{
    display: flex;
    padding-left: 3px;
    padding-right: 3vw;
}

img.header-peng{
    margin-bottom: 0%;
    margin-top: auto;
} 

#history-title{
    text-align: center;
}

#historyTable{
    margin: 5vh;
}

#histTableBody > tr{
    border: #000000;
    border-style: solid;
    border-width: 2px;
}

#histTableBody > tr > td{
    border: #000000;
    border-style: solid;
    border-width: 1px;
}

#historyTable{
    margin-left: auto;
    margin-right: auto;
}

div.manage-tab{
    margin-left: 18vw;
    margin-right: auto;
    width: fit-content;
}

div#rolesMainDiv{
    margin-left: 18vw;
    margin-right: auto;
    width: fit-content;
}

table#obdTable > tbody > tr.headerRow{
    position: sticky;
    top: 0;
    z-index: 0;
}

div.teams-main-con{
    margin-left: 10vw;
    width: fit-content;
}
div.roleFilters{
    width: fit-content;
    height: fit-content;
    margin-top: 3px;
    border-style: solid;
    border-color: #dd692b;
    border-width: 5px;
    border-radius: 5px;
    padding: 3px;
}
div#teamsTableCon{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

div#manageButtons{
    margin-left: 18vw;
    margin-right: auto;
    width: fit-content;
    
}


/*
    Below are the colors representing the 6 types of categories a add req choice may fall into
*/

td.initial, option.initial, div.initial{
    background-color: #ff919d;
}

td.progress, option.progress, div.progress{
    background-color: #91f4ff;   
}

td.wait, option.wait, div.wait{
    background-color: #eaff00;    
}

td.fail, option.fail, div.fail{
    background-color: #ffb302;   
}

td.off, option.off, div.off{
    background-color: #A4ABB6;
}

td.done, option.done, div.done{
    background-color: #99FF66;
}

div.allChoiceSets{
    height: 75vh;
    overflow-y: scroll;
}

div.allChoiceSets > div{
    width:fit-content;
    margin-left: 50px;
    padding: 5px;
    
}

div#all-choice-modal-content{
    width: 30vw;
}

h2.allChoiceTitle{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

div.archiveFilter{
    margin-left: 5vw;
    width: fit-content;
    border-color: #dd692b;
    border-radius: 5px;
    border-width: 5px;
    height: fit-content;
    border-style: solid;
    padding-left: 5px;
    padding-right: 5px;
}

div.filterOuter{
    border-color: #dd692b;
    border-radius: 5px;
    border-width: 5px;
    height: fit-content;
    width: 50vw;
    border-style: solid;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;   
}
div.filterInner{
    border-color: #263048;
    border-radius: 5px;
    border-width: 5px;
    height: fit-content;
    width: fit-content;
    min-width: 30vw;
    border-style: solid;
    padding-left: 5px;
    padding-right: 5px;
    margin: 5px;
    
}

div.archiveFilter > input{
    margin-top: 3px;
    margin-bottom: 5px;
}

@keyframes trafficFlashRed-old {
    from {
        background-color: #ffffff;
        color: #000000;
    }
to {
        background-color: rgb(255, 0, 0);
        color: #ffffff;
    }
}
@keyframes trafficFlashRed {
    from {
        background-color: #ffffff;
        color: #000000;
    }
to {
        background-color: #cc3232;
        color: #ffffff;
    }
}
@keyframes trafficFlashYellow {
    from {
        background-color: #ffffff;
        color: #000000;
    }
to {
        background-color: #e7b416;
        color: #ffffff;
    }
}

@keyframes trafficFlashGreen {
    from {
        background-color: #ffffff;
        color: #000000;
    }
to {
        background-color: #549C30;
        color: #ffffff;
    }
}
td.traffic-RED{
    animation-name: trafficFlashRed;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
td.traffic-YELLOW{
    animation-name: trafficFlashYellow;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
td.traffic-GREEN{
    animation-name: trafficFlashGreen;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

div.flipFlop{
    border-radius: 5px;
    width: fit-content;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}
div.flipFlop > div{
    display : inline-block;
    color: #dd692b;
    background-color: #ffffff;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-width: 2px;
    border-style: solid;
    border-color: #000000;
    width: 120px;
    text-align: center;
    cursor: pointer;
}
div.flipFlop > div:first-child{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

div.flipFlop > div.ffSelected{
    background-color: #dd692b;
    color: #ffffff;
    cursor: default;
}
tbody#mainTableBody.traffic > tr[data-traffic="None"], tbody#mainTableBody.traffic > tr[data-traffic="OFF"]{
    display: none;
}

tbody#mainTableBody > tr{
    display: table-row;
}
tbody#mainTableBody > tr > td, tbody#mainTableBody > th > td{
    font-family: "Gill Sans", sans-serif;
}

tbody#mainTableBody.traffic > tr[data-traffic="GREEN"] > td[data-trafficGroup='true']{
    background-color: #549C30;
    color: #ffffff;
} 
tbody#mainTableBody.traffic > tr[data-traffic="YELLOW"] > td[data-trafficGroup='true']{
    background-color: #e7b416;
    color: #ffffff;
} 
tbody#mainTableBody.traffic > tr[data-traffic="RED"] > td[data-trafficGroup='true']{
    background-color: #cc3232;
    color: #ffffff;
} 
tbody#mainTableBody.traffic > tr[data-traffic="GREEN"].trSelect > td[data-trafficGroup='true']{
    background-color: #ff8848;
    color: #000000;
} 
tbody#mainTableBody.traffic > tr[data-traffic="YELLOW"].trSelect > td[data-trafficGroup='true']{
    background-color: #ff8848;
    color: #000000;
} 
tbody#mainTableBody.traffic > tr[data-traffic="RED"].trSelect > td[data-trafficGroup='true']{
    background-color: #ff8848;
    color: #000000;
} 
div#traffic-modal-content{
    width: fit-content;
    height: fit-content;
}
div#modal-inner-traffic{
    align-content: center;
}
div#titleDivTraffic[data-traffic="GREEN"]{
    background-color: #549C30;
}
div#titleDivTraffic{
    padding: 5px;
    border-radius: 3px;
}

div#titleDivTraffic[data-traffic="YELLOW"]{
    background-color: #e7b416;
}
div#titleDivTraffic[data-traffic="RED"]{
    background-color: #cc3232;
}

tr.notesRow{
    max-height: 50px;
    height: 50px;
    overflow-y: hidden;
}
tr.notesRow.collapsed > td.img-TD, tr.notesRow.expanded > td.img-TD{
    cursor:pointer;
}
tr.notesRow > td > div{
    text-align: left;
    overflow-y: hidden;
    max-height: 50px;
}
div.benjie-notes{

}
div.benjie-notes > div{
    margin-left: 5%;
    display:block;
    margin-right: auto;
    border-color:#263048;
    border-radius: 15px;
    border-width: 3px;
    border-style: solid;
    padding-left: 5%;    
}
div.benjie-notes > div > textarea{
    max-width: 80%;
    max-height: 40%;
    overflow-y: scroll;
    width: 50%;
    height: 15%; 
}
tr.notesRow.collapsed > td > div{
    transition: max-height .5s ease-in 0s;
    max-height: 50px;
}



tr.notesRow.expanded > td > div{
    transition: max-height .5s ease-in 0s;
    max-height: 600px;
    height: fit-content;
}
tr.notesRow.expanded > td > div.mega-row{
    overflow-y: scroll;
}
@keyframes expandRowImg {
    from {rotate: 180deg;}
    to {rotate: 0deg;}
}
@keyframes collapseRowImg {
    from {rotate: 180deg;}
    to {rotate: 0deg;}
}
img.row-drop-down.collapsed{
    animation-name: collapseRowImg;
    animation-duration: .5s;
}
img.row-drop-down.expanded{
    animation-name: expandRowImg;
    animation-duration: .5s;
    transform: rotate(180deg);
}

td.imgTD{
    justify-content: center;
    vertical-align: top;
}
tr.obdDisplayRow > td{
    display: table-cell;
    vertical-align: inherit;
}

tbody#histTableBody > tr > td{
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 2px;
    padding-bottom: 2px;;
}


@keyframes tdChangeFlash {
    from {
        background-color: #ffffff;
        color: #000000;
    }
to {
        background-color: #ff8848;
        color: #ffffff;
    }
}
tr[data-changed='true'] > td.changed > select{
/*    animation-name: tdChangeFlash;
    animation-duration: 2s;
    animation-iteration-count: infinite;*/
    background-color: #ff8848;
    color: #ffffff;
}
/*
tbody#verTable > tr{
    cursor: pointer;
}
tbody#verTable > tr:hover{
    background-color: #ff8848;
    color: #ffffff;
}*/
div.screen-table.ver > table > tbody > tr > td{
    margin: 3px;
}

div.screen-table.ver > table{
    width: 75%;
}
div.screen-table.ver > table{
    width: 75%;
    table-layout: fixed;
}
tbody#verTable > tr > td.note-but{
    background-color: #ff8848;
    color: #ffffff;
    cursor: pointer;
}

div.titleWrap{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}


b.oversized{
    color: #ff0000;
}
tr.headerRow.verHeader{

}
tbody.verBody > tr{
    
}
div.ver > table.screen-modal{
    width: 85%;
}
div#verModalContent{
    width: 75vw;
}


td.ver-name{
    cursor: pointer;
}
td.ver-name:hover{
    background-color: #ff8848;
    color: #ffffff;
}

div.edit-ver-inner{
    margin-left: 15%;
    margin-right: auto;
}
div.modal-content-edit-ver{
    margin-top: 10vh;
    border-style: solid;
    border-color: #263048;
    border-width: 5px;
    background-color: #F8F8FF;
    border-radius: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 35vw;
    height: 20vh;
    padding-bottom: 5px;
}

td.rej-note{
    display: none;

}
tr.modal-doc-rejected.expanded{
    height: fit-content;
    font-weight: bold;
}
td.rej-note.open{
    display: block;
    float: left;
    width: 100%;
}

div.client-list>a{
    margin-left: auto;
    margin-right: auto;
    align-self: center;
}

div.rc-title{
    border-color: #ff8848;
    background-color: #263048;
    border-width: 4px;
    border-style: solid;
    display: inline;
    padding-left:3px;
    padding-right:3px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    cursor: default;

}
div.rc-title>h1{
    color: white;
    margin-bottom: 1px;
}
div.repTable{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}