/* DEFAULTS
----------------------------------------------------------*/
@media print {
    @page {
        size: landscape
    }
}

html {

}

body {
    background-color: #F2F2F2;
    font-size: .80em;
    font-family: "Calibri";
    margin: 0px;
    padding: 0px;
    background-image: url(../Images/brushed-alum.png);
    background-repeat: repeat;
}
.hyp
{
   /* text-decoration:none;*/
    color: White;
}

a.nav:active 
{
    color: white;
}
a.nav:hover
{
    color: white;
}
a.nav:link, a.nav:visited 
{
    color: white;
}

a:link, a:visited
{
    color: Black;
   
}


a:hover
{
    color: Black;
    
}

a:active
{
    color: #034af3;
   
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}
.highlight
{
	color:red;
	font-weight:bold;
}
.rowStyle
{
    border-bottom:1px solid black;
}
/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}


h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page {
    width: 90%;
    background-color: #F2F2F2;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    font-family: "Calibri";
    font-size: 11pt;
}
.header2 {
    position: fixed;
    margin: 0px;
    padding: 0px;
    width: 1800px;
    height: 75px;
    font-family: "Calibri";
    text-align: center;
    /*background-color: #F2F2F2;*/
    left: 0;
    right: 0;
    text-wrap: none;
    display: inline-block;
    white-space: nowrap;
}
.header {
    position: fixed;
    margin: 0px;
    padding: 0px;
    width: 100%;
    font-family: "Calibri";
    text-align: center;
    left: 0;
    right: 0;
    text-wrap: none;
    display: inline-block;
    white-space: nowrap;
    z-index: 999;
    border-bottom: 4px solid black;
    background-color: #dcdcdc;
}
.splash_header {
    background-image: url(../Images/shattered-dark.png);
    background-repeat: repeat;
    background-color: white;
}

#homePageImg {
    background-image: url(../Images/HomeImg.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    height: 50vh;
    width: 100%;
    background-position-x: center;
    margin: auto;
    margin-top: 3vh;
}

.imageHeader {
    background-image: url(../Images/navy.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 90px;
    background-position-y: 90%;
}

#AdminNavBarParts{
    position:absolute;
    bottom: 0;
}

#HeaderDiv {
    display: flex;
}
#bmsLogoimg{
    height: 40px;
    margin: 10px;
}
#tempInfo {
    text-align: left;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}
#NavMenuDiv {
    font-size: 17px;
}

#ViewPart {
    height: 20px;
    box-shadow: 0 0 19px 7px #0e0e0e;
    -moz-box-shadow: 0 0 19px 7px #0e0e0e;
    -webkit-box-shadow: 0px -9px 19px 7px #0e0e0e;
}

.tableHeader {
     background-color: #00309c;
     color: #FFFFFF;
     font-size: 10pt;
     font-weight: bold;
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     padding: 4px;
}

.title_level_one {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 75px;
    font-family: "Calibri";
    text-align: center;
    /*background-color: #F2F2F2;*/
    left: 0;
    right: 0;
    text-wrap: none;
    display: inline-block;
    white-space: nowrap;
}
.searchbody {
    padding-top: 110px;
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-family: "Calibri";
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
    /*background-color: #F2F2F2;*/
    font-size: 11pt;
}
.body {
    padding-top: 50px;
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-family: "Calibri";
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
    /*background-color: #F2F2F2;*/
    font-size: 11pt;


}
.bodyAction {
    padding-top: 130px;
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-family: "Calibri";
    left: 0;
    right: 0;
    width: 100%;
    background-color: #F2F2F2;
    font-size: 11pt;
}
.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
    font-family: "Calibri";
}

.main
{
    padding: 0px 12px;
    margin: 0px 8px 8px 8px;
    min-height: 420px;
    font-family: "Calibri";
    /*background-color: #F2F2F2;*/
}
.center {
    align-content:center;
}
.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer {
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
    font-family: "Calibri";
    margin-left: -20px !important;
    margin-right: -20px !important;
}

hr.dashed {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
    color: Black;

}

/* TAB MENU   
----------------------------------------------------------*/

.h2Red {
    font-size: 1em;
    font-weight: 600;
    color: Red;
}

.hr {
     background-color: #00309c;
     height: 2px;
     margin: 1px 0;
     width: 100%;
}

.hideSkiplink {
    font-family: Arial;
    font-size: medium;
    text-align: left;
    text-wrap:none;
}

div.menu {
    padding: 0px 0px 0px 0px;
    display: inline-block;
    white-space: nowrap;
    width: 905px;
    bottom: 0;
    right: 0;
    width: auto;
    position: absolute;
    margin-right: 40px;
}

    div.menu .level1.highlighted {
        background-color: rgba(237, 245, 253, 0.80);
        transition: 0.4s;
    }

    div.menu ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
        width: auto;
        display: inline-block;
        white-space: nowrap;
    }
    div.menu ul:not(.level1) {
        background-color: rgba(0, 0, 0, 0.85);
        /*box-shadow: 0 0 19px 7px #0e0e0e;
        -moz-box-shadow: 0 0 19px 7px #0e0e0e;
        -webkit-box-shadow: 0 0 19px 7px #0e0e0e;*/
    }

div.menu a.level1 {
    color: black !important;
}

    div.menu .dynamic .level3 {
        left: -100% !important;
    }
    div.menu ul li a, div.menu ul li a:visited {
        color: white;
        display: block;
        line-height: 2em;
        padding: 0px 30px;
        text-decoration: none;
        white-space: nowrap;
        font-family: "Calibri";
        font-weight: bold;
        font-size: 1em;
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        box-sizing: border-box;
    }


        div.menu ul li a:hover {
            /*background-color: #F2F2F2;*/
            color: #2F75B5;
            border-bottom-color: darkgray;
            border-bottom: solid;
            display: inline-block;
            white-space: nowrap;
            transition: 0.4s;
        }

            div.menu ul li a:active {
                /*background-color: #F2F2F2;*/
                color: #cfdbe6;
                display: inline-block;
                white-space: nowrap;
            }




#getFixed {
  padding: 0px;
  margin: 0px;
  width: 90%;
  align-self:center;

}
/* FORM ELEMENTS   
----------------------------------------------------------*/
/*label
{ 
  color: black; 
  font-family: "Calibri";
}*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

.login label, .register label, .changePassword label
{
    display: block;
}

fieldset .inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

.accountInfo
{
    width: 42%;
}
ctrl.disabled
{
	background-color: White;
}
.subsection_Level_Header_Style {
    Font-Size: 14px !important;
    color: white !important;
    background-color: #4c7fae !important;
    font-variant: unset !important;
    padding: 0 !important;
    border-radius: 0px !important;
    border: none !important;
}
.navigation_Header_Style {
    Font-Size: 16px;
    Color: white;
    border: none;
}
.title_Header_Style {
    Font-Size: 25px;
    font-weight: bold;
    Color: white;
    background-color: #1f3045;
    border: none;
    font-family: "Calibri";
}
.section_Level_Header_Style {
    Font-Size: 20px;
    Color: white;
    background-color: #3d5f8b;
    text-align: center;
    width: 100%;
    font-weight: bold;
}
.standard_label_style 
{ 
  color: black; 
  font-weight: bold;
  font-family: "Calibri";
}
.required_label_style {
    color: #C00000 !important;
    font-weight: bold;
    font-family: "Calibri";
    margin: auto;
}
.sasection_Level_Header_Style
{
	Font-Size: 14px;
	text-decoration:underline;
	color: Red;
	font-weight: bold;
	font-family: "Calibri";
}
.sasubsection_Level_Header_Style
{
	Font-Size: 14px;
	color: Red;
	font-weight: bold;
	font-family: "Calibri";
}
.sasubsectiontext_Level_Header_Style
{
	Font-Size: 12px;
	color: Red;
	font-family: "Calibri";

}
.standard_control_style {
    color: black;
    font-family: "Calibri";
    font-size: 11pt;
    white-space: pre-line;
}

.required_control_style {
    color: #C00000;
    font-family: "Calibri";
    font-size: 11pt;
}

.control_style
{
	color: White;
}
.menu_item_level1
{
	background-color: #72AADC;
	color: White;
}

.menu_item_level2
{
	background-color: #2F75B5;
	color: White;
}
.menu_item_level2
{
	background-color: #2F75B5;
	color: White;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
}

.title
{
    display: block;
    text-align: center;
    width: auto;
  /*  background-color: #1F4E78;*/
	background-color: #101B32;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}
.modalBackground
{
    background-color: Gray;
    filter: alpha(opacity=90);
    opacity: 0.8;
}
.modalPopup
{
    background-color: white;
    border-width: 3px;
    border-style: solid;
    border-color: black;
    padding-top: 10px;
    padding-left: 10px;
    width: 300px;
    height: 140px;
    color: Black;
    font-family: "Calibri"; 
}
#menu {
    display: table;
    margin: 0 auto;
    font-size: 14px;
}

.FileListDiv, .RelateBCRDiv {
    /*display: grid;*/
    background: white;
    overflow-y: scroll;
    text-align: left;
    min-height: 20px;
    max-height: 200px;
    border: ridge lightgray;
}

.left_align_label{
    float: left;
}
.classHide {
	display: none
}

/*Report Css*/
.ReportLabel {
    margin-right: 10px;
    text-align: right !important;
    min-width: 100px;
    max-width: 100px;
    font-size: 11pt;
    font-family: "Calibri";
    margin-bottom: 20px;
}

.ReportControl-one-fourth {
    display: flex;
    box-sizing: border-box;
    align-self: flex-start;
    min-width: 150px;
    max-width: calc(25% - 110px);
    width: calc(33% - 100px);
    margin-bottom: 20px;
}


.ReportControl-one-third {
    display: flex;
    box-sizing: border-box;
    align-self: flex-start;
    min-width: 150px;
    max-width: calc(33% - 110px);
    width: calc(33% - 100px);
    margin-bottom: 20px;
}

.ReportControl-two-thirds {
    display: flex;
    box-sizing: border-box;
    align-self: flex-start;
    min-width: 300px;
    max-width: calc(66% - 110px);
    width: calc(66% - 90px);
    margin-bottom: 20px;
}

.ReportControl-one {
    align-self: flex-start;
    flex: 2;
    margin-bottom: 20px;
}

.ReportDiv {
    width: 100%;
    display: inline-flex;
    flex-wrap:wrap;
}

.ReportBody {
    padding-top: 100px;
    font-family: "Calibri";
}

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

.StyledButton {
    background: white;
    margin-left: 5px;
    margin-right: 5px;
    border: none;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 12px !important;
}

.StyledButton:hover {
    background: #9df2fb;
    transition: 0.4s;
}

#SubmitBarTable .StyledButton {
    padding-left: 20px;
    padding-right: 20px;
}

.RelateBCRstbl {
    width: 100%;
    background: white;
}

.RelateBCRstbl tr:nth-child(even) {
    background: #ccc
}

.RelatBCRbtn {
    margin-left: 5px;
}

.ReplicateDiv {
    background: white;
    border-top: 4px solid #336699;
    border-bottom: 4px solid #336699;
    padding: 2px;
}

.ClearLabel {
    float: left;
    font-size: 12pt;
    font-weight: bold;
}

#RoleMatrixTable {
    background: white;
    border-collapse: collapse;
    margin: auto;
}

    #RoleMatrixTable td, #RoleMatrixTable th {
        border-left: 1px solid gray;
        border-right: 1px solid gray;
    }

#RoleMatrixTable tr:nth-child(even) {
    background: #ccc
}

#DataGroupMatrixTable {
    background: white;
    border-collapse: collapse;
    margin: auto;
}
    #DataGroupMatrixTable thead th div {
        writing-mode:vertical-lr;
        transform: rotate(-180deg);
    }

    #DataGroupMatrixTable td, #DataGroupMatrixTable th {
        border-left: 1px solid gray;
        border-right: 1px solid gray;
    }

    #DataGroupMatrixTable tr:nth-child(even) {
        background: #ccc
    }


    .fancySelector {
        min-width: 150px;
    }


.ErrorPageDiv {
    width: 95%;
    max-width: 33em;
    margin: 4em auto 0;
}

    .ErrorPageDiv > div {
        border: 1px solid #CCC;
        border-right-color: #999;
        border-left-color: #999;
        border-bottom-color: #BBB;
        border-top: #B00100 solid 4px;
        border-top-left-radius: 9px;
        border-top-right-radius: 9px;
        background-color: white;
        padding: 7px 12% 0;
        box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
        padding-bottom: 20px;
    }


.ErrorPageDiv > p {
    margin: 0 0 1em;
    padding: 1em;
    background-color: #F7F7F7;
    border: 1px solid #CCC;
    border-right-color: #999;
    border-left-color: #999;
    border-bottom-color: #999;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-color: #DADADA;
    color: #666;
    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
}

.page-break{
    page-break-before:always;
}

.print-only{
    display:none !important;
}

@media print{
    .no-print{
        display: none !important;
    }
    .body{
        padding-top:0px;
    }

    .print-only{
        display:initial !important;
    }

    .baseline-products{
        width:60% !important;
    }
}

.printButton {
    background-image: url(../Images/printer.png);
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 40px !important;
    border: none;
    background-color: inherit;
    text-decoration: underline;
    background-size: contain;
    font-size: 16px;
    cursor: pointer;
}

/*Notification Banner Styles*/
.frost::before {
    background: #2f3f4f;
    filter: blur(5px);
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* the frosty background will be all the way in the back */
    opacity: 0.6;
}

#notifications {
    max-height: 25vh;
    overflow-y: auto;
    padding-right: 10px;
}

@media only screen and (max-height: 800px) {
    #notifications {
        max-height: 20vh;
    }
}


.flash {
    z-index: 10;
    position: absolute; /* absolute elements are removed from the flow and therefore ignored by all other elements */
    width: 100%;
    left: 0;
    padding: 0 10px 0 10px; /*top right bottom left*/
    box-sizing: border-box;
    border-bottom: black 1px solid;
}

.alert {
    padding: 7px;
    margin: 10px 0 10px 0; /*top right bottom left*/
    border: 1px solid transparent;
    display: block;
    overflow-wrap: break-word;
    border-radius: 3px;
}

    .alert:hover, #dismiss_all_alerts:hover {
        filter: brightness(75%);
    }

#dismiss_all_alerts_container {
    margin: auto;
    display: table;
}

#dismiss_all_alerts {
    color: black;
    background-color: lightgray;
    border: 1px solid black;
    text-align: center;
    padding: 0;
    border-radius: 3px;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 10px;
    margin-top: 10px;
    width: 200px;
}

.dismiss_alert {
    float: right;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.3;
}

    .dismiss_alert:hover {
        color: #000;
        text-decoration: none;
        filter: alpha(opacity=50);
        opacity: 0.6;
    }

#alert_handle {
    position: absolute;
    right: 5px;
    border-bottom: 1px black solid;
    border-right: 1px black solid;
    border-left: 1px black solid;
    background: lightgray;
}

    #alert_handle:hover {
        color: #e5e5e5;
        text-decoration: none;
        cursor: pointer;
    }

.alert-success {
    color: #005f00;
    border-color: #005f00;
    background-color: #d8ffd7;
}

.alert-message {
    color: #305a6f;
    border-color: #305a6f;
    background-color: #edf8ff;
}

.alert-warning {
    color: #6f6130;
    border-color: #6f6130;
    background-color: #fff9ca;
}

.alert-error {
    color: #5f0000;
    border-color: #5f0000;
    background-color: #ffdfdf;
}

.HideablePart, .BCRFormPart {
    border: 4px gray;
    border-style: double;
    margin-bottom: 10px;
    margin-top: 10px;
    box-shadow: 0 0 19px 1px #0e0e0e;
    -moz-box-shadow: 0 0 19px 7px #0e0e0e;
    -webkit-box-shadow: -1px 1px 20px 1px #666666;
    background: #F2F2F2;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    min-width: 60%;
}

#SearchResultsTable th {
    background-color: rgba(61, 95, 139, 1);
    color: white;
}

.blueHeader, .dataTables_wrapper th {
    background-color: rgba(61, 95, 139, 1);
    color: white;
}

.dataTables_processing {
    z-index: 1000;
}

.RelatedBCRDiv {
   width: 100%; 
   display: inline-flex;
   margin-bottom:5px;
}

.RelatedLabel {
    margin-right: 10px;
    width: 7.5%;
    text-align: right;
    min-width:100px;
}

.RelatedFill {
    margin-left:25px;
}

.RelatedControl-sm {
    box-sizing:border-box;
    align-self:flex-start;
    min-width:150px;
    max-width:15%;
    width:15%;
}

.RelatedControl-md {
    box-sizing: border-box;
    align-self: flex-start;
    min-width: 450px;
    max-width: 37.5%;
    width: 37.5%;
}

.RelatedControl-lg{
    align-self:flex-start;
    flex:2;
}

.resize-sm {
    display:flex;
    box-sizing: border-box;
    align-self: flex-start;
    min-width: 150px;
    max-width: 15%;
    width: 15%;
}

.resize-md {
    display: flex;
    box-sizing: border-box;
    align-self: flex-start;
    min-width: 450px;
    max-width: 37.5%;
    width: 37.5%;
}

.resize-lg {
    display: flex;
    align-self: flex-start;
    flex: 2;
}

.format-checkbox span {
    display: flex;
    flex-wrap: nowrap;
}

.format-checkbox input[type=checkbox]{
    align-self:flex-start;
}

.format-checkbox td{
    vertical-align:top;
}



.timeline {
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}


.timestamp {
    margin-bottom: 20px;
    padding: 0px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 100;
}


.status {
    padding: 0px 40px;
    display: flex;
    justify-content: center;
    border-top: 2px solid #D6DCE0;
    position: relative;
    transition: all 200ms ease-in;
}
    .status h4 {
        font-weight: 600;       
    }
        .status h4::before {
            content: '';
            width: 25px;
            height: 25px;
            background-color: white;
            border-radius: 25px;
            border: 1px solid #ddd;
            position: absolute;
            top: -15px;
            left: 42%;
            transition: all 200ms ease-in;
        }

.li.complete .status {
    border-top: 2px solid #66DC71;
}
    .li.complete .status h4::before {
        background-color: #66DC71;
        border: none;
        transition: all 200ms ease-in;
    }
    .li.complete .status h4 {
        color: #66DC71;
    }

.ui-dialog {
    z-index: 1000 !important;
}

.definitions, .HelpPopup {
    color: blue;
}
    .definitions:hover, .HelpPopup:hover{
        cursor: pointer;
    }
#SearchResultsTable_wrapper {
    background: rgba(61, 95, 139, 0.48);
    padding: 10px 0px;
    box-shadow: 0 0 19px 1px #0e0e0e;
    -moz-box-shadow: 0 0 19px 7px #0e0e0e;
    -webkit-box-shadow: -1px 1px 20px 1px #666666;
}

.removeLink{
    cursor: pointer;
}

textarea {
    background: floralwhite;
}

.HistoryItem {
    margin-bottom: 10px;
    border: ridge lightgray;
}

.HistoryItemFieldsTable {
    width: 100%;
    border: 1px dotted gray;
}
    .HistoryItemFieldsTable th {
        background-color: #f9cc79;
        color: black;
    }

.ToggleHideChanges{
    text-align:left;
    cursor:pointer
}


.processing_div {
    cursor: progress;
    pointer-events: none;
    /*opacity: 0.4;*/
}

.opacityDiv {
    position: absolute;
    opacity: 0.6;
    top: 0;
    z-index: 10;
    background-color: white;
    cursor: progress;
    padding: inherit;
}


.preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
}

.loader2 {
    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: #10eadd;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

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

    .loader2: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);
    }
}

.tooltip_cursor {
    cursor: help;
    border-bottom: dotted 1px;
    color: purple;
}

.ui-autocomplete-loading {
    background: white url('../Images/jquery-ui/ui-anim_basic_16x16.gif') right center no-repeat;
}

.user_tooltip_table{
    background-color: rgb(247,248,251);
    border: 1px solid black;
}

    .user_tooltip_table .hStyle {
        font-weight: normal;
        color: rgb(31,78,120);
    }

    .user_tooltip_table td {
        border-bottom: inset;
        font-weight: bold;
    }

.AdminTableButton{
    margin-left:10px;
    cursor:pointer;
    text-decoration:underline;
}
.dragTable tr{
    cursor: move;
}
.MultiselectorControlItem {
    font-weight: bold;
    margin: 3px;
   
}

    .MultiselectorControlItem:not(.NoStyle) {
        background-color: rgb(198, 201, 204);
        color: #151414;
        border-radius: 5px;
        padding: 5px;
        border: 1px solid gray;
    }

.MultiselectorControlItem.NoStyle span{
    border-bottom: inherit;
}

.infoButton {
    background-image: url(../Images/info.png);
    background-repeat: no-repeat;
    background-color: inherit;
    background-size: contain;
    height: 20px !important;
    width: 20px !important;
    cursor: pointer;
    position: absolute;
    background-position-y: center;
    transform: translateX(-20px);
}

.FormPartTable {
    width: 100%;
}

    .FormPartTable tr {
        vertical-align: top;
    }

        .FormPartTable tr:nth-child(even) {
            background-color: rgb(217, 224, 239);
        }

        .FormPartTable tr:nth-child(odd) {
            background-color: rgb(247, 248, 251);
        }

    .FormPartTable th, .standard_label_style {
        font-family: "Calibri";
        color: rgb(31, 78,120);
        font-weight: normal;
        text-align: left;
        margin-right: 10px !important;
    }

    .FormPartTable td {
        font-family: "Calibri";
        font-weight: bold;
        text-align: left;
        min-width: 150px;
        padding-left: 25px;
    }

#classAppDiv tr, #ReqSourcerb tr, #DataGroupscb tr {
    background-color: transparent !important;
}

.bcrAccordionContent {
    padding: 0 !important;
}

#allPartsDiv {
    display: inline-block;
    min-width: 60%;
}
/*There is a bug in chosen where if it is in a default closed accordion the width will be set to zero*/
.accordionClosed .chosen-container {
    width: 250px !important;
}

.wrapText {
    white-space: pre-line;
}

.blueSubsystem .DynamicSubsystemColor {
    background-color: rgb(76,127,174);
    color: white;
}
.yellowSubsystem .DynamicSubsystemColor {
    background-color: rgb(255, 192, 0);
    color: black !important;
}
.redSubsystem .DynamicSubsystemColor {
    background-color: rgb(255, 0, 0);
    color: white;
}

.incomplete-assessment {
    background-color: rgb(255,192,0);
    margin-right: 50px;
    padding: 3px;
    color: black;
    font-size: 10pt;
}

.late-assessment {
    background-color: red;
    padding: 3px;
    color: white;
    font-size: 10pt;
}

.FieldsSortable {
    
}


.portlet {
    margin: 0 1em 1em 0;
    padding: 0.3em;
    border: ridge lightgray 4px !important;
    background-color: #e6e9f3 !important;
    width: 300px;
    display: inline-table;
}

.portlet-header {
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
    cursor: move;
    text-align: center;
    background-color: orange !important;
    font-weight: bold;
}

.portlet-toggle {
    position: absolute !important;
    top: 50%;
    right: 0;
    margin-top: -8px !important;
}

.portlet-content {
    padding: 0.4em;
}

.portlet-placeholder {
    border: 1px dotted black;
    width: 300px;
    display: inline-block;
    height: 400px;
}

.ui-icon-plusthick, .ui-icon-minusthick {
    cursor: pointer;
}

.field_portlet_ul {
    padding-left: 20px;
}

.field_portlet_ul li {
    margin-bottom: 10px;
}

.ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 35px;
    height: 25px;
    cursor: default;
    touch-action: none;
    top: 0em !important;
    cursor: grab;
}

.slider {
    margin-top: 10px;
}

.AlignmentButton {
    padding: 0 !important;
}

.AlignmentButton, .AlignmentButton img {
    height: 50px;
    width: 50px;
}

.ActiveJustification {
    background-color: #61f1f1 !important;
}

#Boldcb{
    font-weight: bold;
}

fieldset.collapsible.active {
    height: auto;
    overflow:visible;
}

fieldset.collapsible {
    height: 15px;
    overflow: hidden;
}

legend.collapsible-toggle {
    cursor: pointer;
}

.order-div {
    cursor: move;
    border-radius: 5px;
    background-color: orange;
    padding: 3px 5px 3px 5px;
    display:inline;
    margin-right:10px;
}

/*4896 - Chosen has a problem in IE where the scroll bar is still present on the page and if you click where the invisible scrollbar would appear it still opens the dropdown */
.chosen-container-active .chosen-results {
    overflow-y: auto !important;
}

.chosen-results {
    overflow-y: hidden !important;
}
.SearchListDiv {
    background: #007996;
    padding: 15px;
    border-radius: 10px;
}

.SearchListDivSearchBar {
    background-image: url(../Images/Icons/magnifier.png);
    background-position: 10px 6px;
    background-repeat: no-repeat;
    width: 50%;
    font-size: 14px;
    padding: 6px 20px 6px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
}

.myUL {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: scroll;
    border: inset lightgray;
}

    .myUL li a {
        border: 1px solid #ddd;
        margin-top: -1px;
        background-color: #f6f6f6;
        padding: 6px;
        text-decoration: none;
        font-size: 14px;
        color: black;
        display: block;
    }

        .myUL li a:hover:not(.header) {
            background-color: #eee;
        }

.ui-resizable-handle {
    transform: translateY(-100%)
}

#ActionSearchResults td.left-align{
    text-align:left;
}


#infoOnlyFormat .itemDiv {
    justify-content: flex-start;
    margin: auto;
    width: 90%;
}


/* 96x - 18 ; x => number of items to span  */
#infoOnlyFormat .span-1 {
    width: 80px;
}

#infoOnlyFormat .span-2 {
    width: 178px;
}

#infoOnlyFormat .span-3 {
    width: 276px;
}

#infoOnlyFormat .span-4 {
    width: 374px;
}

#infoOnlyFormat .span-5 {
    width: 472px;
}
/* Move down content because we have a fixed navbar that is 50px tall */
body {
     padding-top: 50px;
     padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
     padding-left: 15px;
     padding-right: 15px;
}

.fancySelector {
     min-width: 300px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
     max-width: 500px;
}

.StyledButton {
     background: white;
     margin-left: 5px;
     margin-right: 5px;
     border: none;
     padding-top: 5px;
     padding-bottom: 5px;
     cursor: pointer;
     box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
     margin-top: 5px;
     margin-bottom: 5px;
     font-size: 12px !important;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
     .jumbotron {
          margin-top: 20px;
     }

     .body-content {
          padding: 0;
     }
}

html, body {
     margin-top: 0px;
     margin-left: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     height: 100%;
}

.sitebar {
     background-color: #00309c;
     color: #c0c0c0;
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size: 60%;
     padding: 2px;
}

     .sitebar a {
          color: #ffffff;
          text-decoration: none;
     }

          .sitebar a:hover {
               color: #999999;
          }

.banner {
     height: 61px;
     /* fsu blue: 3464cc */
     /* other blue: 295ac6 due to photoshop saving the png */
     background-color: #295ac6;
     background-image: url(images/top-bg.png);
     background-repeat: repeat-x;
}

     .banner .logo {
          height: 61px;
          width: 418px;
          background-image: url(images/logo.png);
          background-repeat: no-repeat;
          float: left;
     }

     .banner .jumpContainer {
          float: right;
          padding: 15px;
     }

     .banner .jumpControl {
          font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
          font-size: 70%;
     }

.menu {
     background-image: url(images/menu.png);
     background-repeat: repeat-x;
     background-color: #e1e1e1;
     color: #808080;
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size: 79%;
     text-align: center;
     padding: 4px;
}

     .menu a {
          color: #666666;
          text-decoration: none;
     }

          .menu a:hover {
               color: #003399;
          }

.content {
     padding-left: 25px;
     padding-right: 25px;
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size: 75%;
}

.content1 {
     padding-left: 25px;
     padding-right: 25px;
     text-align: left;
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size: 12px;
}

.content2 {
     text-align: left;
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size: 10pt;
     font-weight: bold;
}

.content3 {
     text-align: left;
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size: 10pt;
}

.content4 {
     text-align: center;
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size: 10pt;
}

.footer {
     width: 100%;
     border-top-width: 1px;
     border-top-style: solid;
     border-top-color: #cecece;
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size: 70%;
     padding-top: 8px;
     clear: both;
}

     .footer a {
          color: #00309c;
     }

          .footer a:hover {
               color: #0000ff;
          }

     .footer .footer-fsu {
          float: left;
          width: 70%;
          padding-left: 5px;
     }

     .footer #footer-contact {
          text-align: right;
          padding-right: 5px;
     }


.subTitle {
     color: #000099;
     font-size: 16px;
     font-weight: bold;
}


.maroon {
     color: #990000;
     font-weight: bold;
}

.name {
     float: left;
     text-align: left;
     background-color: #295AC6;
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size: 12px;
     color: #ffffff;
     font-weight: bold;
     padding: 4px 4px 4px 4px;
}

.tools {
     text-align: right;
     background-color: #295AC6;
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size: 12px;
     color: #ffffff;
     font-weight: bold;
     padding: 4px 4px 4px 4px;
}

.info {
     float: left;
     text-align: left;
     width: 90px;
     font-weight: bold;
     margin-left: 25px;
}

.left {
     text-align: left;
}

.tools a, .tools a:link, .tools a:visited {
     color: #ffffff;
     text-decoration: none;
}

     .tools a:hover {
          color: #00ffff;
          text-decoration: none;
     }



.randomPic {
     background-image: url(images/taylor.jpg);
     background-repeat: no-repeat;
     width: 160px;
     height: 268px;
     padding-left: 15px;
}

.randomPic2 {
     background-image: url(images/name.jpg);
     background-repeat: no-repeat;
     width: 160px;
     height: 268px;
     padding-left: 15px;
}


.gray {
     color: gray;
     font-style: italic;
}


.red {
     color: #FF0000;
}

.note {
     font-size: 9px;
     font-weight: bold;
}

.bold {
     font-weight: bold;
}

.tableHeader {
     background-color: #3366CC;
     color: #FFFFFF;
     font-size: 10pt;
     font-weight: bold;
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     padding: 4px;
}



.tabActive {
     border-top: 4px #4F85F0 solid;
     border-right: 1px white solid;
     padding-left: 10px;
     padding-right: 10px;
     background-color: #4F85F0;
     color: white;
     font-weight: bold;
}

.tabInactive {
     border-top: 4px white solid;
     border-right: 1px white solid;
     padding-left: 10px;
     padding-right: 10px;
     background-color: #C8C8C8;
     color: #848484;
}


.tabActive a {
     color: white;
     font-weight: bold;
     text-decoration: none;
}

.tabInactive a {
     color: #848484;
     text-decoration: none;
}