/* SECTION: UT Theme Colors and UI elements */
:root {
    --ut-orange: #ff8200;
    --ut-white: #ffffff;
    --ut-grey-smokey: #58595B;
    --ut-dark-aqua-valley: #00746F;
    --ut-orange-torch: #E65933;
    --ut-dark-blue-globe: #006C93;
    --ut-off-white-limestone: #F0EDE3;
    --ut-light-blue-river: #517C96;
    --ut-fuchsia-leconte: #8D2048;
    --ut-purple-regalia: #754A7E;
    --ut-yellow-sunsphere: #FED535;
    --ut-grey-rock: #A7A9AC;
    --ut-light-aqua-legacy: #579584;
    --ut-sky-blue-summitt: #B9E1E2;
    --ut-brown-buckskin: #705550;
    --ut-hot-pink-energy: #EE3E80;
    --ut-light-green-switchgrass: #ABC178;
    --ut-blue-fountain: #2197A9;
    --ut-light-yellow-eureka: #EBEA64;
}

#orange-bar {
    min-height: 6px;
    background: var(--ut-orange);
}

#grey-bar {
    height: 3px;
    background: linear-gradient(var(--ut-white), var(--ut-grey-smokey));
}





/* SECTION: Bootstrap and HTML Defaults we override */
html body {
    box-sizing: border-box;
    font-weight: 400;
    text-align: left;
    margin: 0;
    background-color: var(--ut-white);
    line-height: 1.8;
    overflow-x: hidden;
    font-family: 'Open Sans', sans-serif;
    color: var(--ut-grey-smokey);
    font-size: 14px;
}

h1, h2, h3 {
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    color: var(--ut-grey-smokey);
    box-sizing: border-box;
    font-weight: 500;
    line-height: 1.2;
}

h1 {
    font-size: 2rem;
    margin: .67em 0;
}

h2 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-size: 1.75rem;
}
    
h3 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-size: 1.5rem;
}


h8 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-size: 1.00rem;
    color: var(--ut-fuchsia-leconte) !important;
}

.bulkError {
    font-weight: bold;
    color: var(--ut-fuchsia-leconte);
}

a, a:hover {
    color: var(--ut-dark-blue-globe);
}

/* SECTION: Themed Buttons */
/* Normal Color Attributes */
.btn {
    color: var(--ut-white);
	background-color: var(--ut-dark-blue-globe);
}

/* Text of Focused Buttons */
.btn:focus {
	color: var(--ut-white);
    background-color: var(--ut-dark-blue-globe);
    box-shadow: 0 0 7px var(--ut-orange);
}

/* Hover Color attributes */
.btn:hover {
	color: var(--ut-brown-buckskin) !important;
	background: var(--ut-yellow-sunsphere) !important;
	box-shadow: 0 0 10px var(--ut-orange);
	outline-color: var(--ut-brown-buckskin);
    outline-style: solid;
    outline-width: 1px;
}

/* Disabled button Styling */
.btn:disabled,
.btn.disabled{
    opacity: 0.4;
}

/* Active Color attributes */
.btn:active {
	color: var(--ut-brown-buckskin);
	outline-color: var(--ut-grey-smokey);
}



.btn-simple {
    color: var(--ut-dark-blue-globe);
    background-color: transparent;
    border-color:transparent;
}

/* grey cancel button */
.btn-cancel, .btn-cancel:active, .btn-cancel:visited {
    background-color: var(--ut-grey-smokey) !important;
}

.btn-cancel:hover {
    background: var(--ut-yellow-sunsphere) !important;
}

/* tall for accessability */
#page .gform_wrapper input[type=button], #page .gform_wrapper input[type=file], #page .gform_wrapper input[type=reset], #page .gform_wrapper input[type=submit], .btn {
    padding: 20px 12px;
}

/* tall for accessability unless they are a part of an input group (attached)*/
#page .gform_wrapper input[type=button], #page .gform_wrapper input[type=file], #page .gform_wrapper input[type=reset], #page .gform_wrapper input[type=submit], .btn.attached-button {
    padding: 6px 12px;
}

/* Remove extra padding from attached button icons  */
.fa.attached-button {
    padding-right: 0px;
}


/* Datatables Button Row */
.dt-button-wrapper>div>button {
        padding: 0.375rem 0.75rem;
        font-size: 14px;
        line-height: 1.8;
        margin: 2px 0;
}

/* give the DataTables pagination buttons the same color scheme */
 ul > li.paginate_button.page-item:not(.disabled) > a {
    background-color: var(--ut-white);
    color: var(--ut-dark-blue-globe); 
}

ul > li.paginate_button.page-item.active > a {
    background-color: var(--ut-dark-blue-globe);
    border-color: var(--ut-dark-blue-globe);
    color: var(--ut-white);
}

/* DataTables Highlighting of Rows */


td.UserLinkCell {
    background-color: rgb(255, 246, 237);
}

tbody tr:hover, td.UserLinkCell:hover {
    background-color: rgb(255, 246, 237);
}

thead {
    background-color: #f4f4f4;
    border-color: var(--ut-orange);
}



/* SECTION: Control focus and outline highlights */
.form-control:focus {
	box-shadow: 0 0 7px var(--ut-orange);
    border: 2px solid var(--ut-orange);
}





/* SECTION: Navigation Toolbar Elements */
/* Bottom edge gradient of admin Bar */
body > div.container-flex > nav {
    background: linear-gradient(var(--ut-off-white-limestone) 96%, var(--ut-grey-smokey));
    width: 100%;
}

/* Making the tab text bigger */
.nav-tab-text {
    font-size: 18px;
}

/* Remove bottom border of tab */
#toggleMobileMenu > ul {
    border-bottom: none;
}

/* Set Tab hover/selection Appearance*/
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-top-color: var(--ut-orange);
    border-left-width: 0px;
    border-right-width: 0px;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link {
    border-left-width: 0px;
    border-right-width: 0px;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    border-top-color: var(--ut-orange);
    background-color: #f4f4f4;
    border-bottom-color: #f4f4f4;
    border-right-color: #c2c2c2;
    border-right-style: solid;
    border-right-width: 1px;
}





/* SECTION: Page Header Styles */
/* Page Title with light grey background (simulates H1 tag) */
.simplePageHeader {
    background-color: #f4f4f4;
    padding-top: .5em;
    padding-bottom: .5em;
    padding-left: 12px;
    border-bottom: #eaeaea;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    margin: 0px;
}

/* Subtitles of Page Title */
.subtitle {
    margin-top: 3px;
    margin-bottom: 0px;
    font-size: medium;
}





/* SECTION: Multi-Page Form Styling Elements */
/* Make all form labels bold */
.form-label {
    font-weight: bold;
    margin-bottom: 0;
}


/* read-only input boxes 
    darker grey:  var(--ut-grey-rock)
*/
input[readonly] {
    background-color: var(--ut-off-white-limestone);
    ;
}

    input[readonly]:focus {
        background-color: var(--ut-off-white-limestone);
    }


/* cli help text formatting */
.form-text {
    font-weight: normal;
}

/* the box around groups of controls */
.netreg-control-group {
    background-color: var(--ut-off-white-limestone);
    border: 3px solid var(--ut-grey-smokey);
    padding: 10px 20px 20px 20px;
    margin-top: 10px;
    border-radius: 5px;
}

/* the box around debug section */
.debug-panel-section {
    background-color: #e8ffff;
    border: 3px solid var(--ut-hot-pink-energy);
    padding: 10px 20px 20px 20px;
    margin-top: 10px;
    border-radius: 5px;
}

/* header box */
.netreg-control-header {
    background-image: linear-gradient(var(--ut-white) 5%, var(--ut-sky-blue-summitt) );
    border-width: 1px 1px 2px 1px;
    border-style:  solid;
    border-color:  var(--ut-grey-smokey);
    padding: 10px 20px 10px 20px;
    margin-top: 30px;
    border-radius: 2px;
}

.netreg-control-header-first {
    margin-top: 10px !important;
}

.netreg-control-header-text {
    margin-top: 0;
    margin-bottom: .5rem;
    font-size: 2rem;
}

.expandable-section {
    background-color: #eaeaea;
}

/* the only way to tooltip disabled controls (wrapper div with this class)*/
.tooltip-wrapper {
    display:inline-block;
}

.not-bold{
    font-weight:normal;
}



.wide_Column{
    min-width: 200px !important;
}

.medium_Column {
    min-width: 50px !important;
}

.bottomButtonBar {
    background-color: #A7A9AC;
    padding-top: .5em;
    padding-bottom: .5em;
    padding-left: 12px;
    border-bottom: #eaeaea;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    margin: 40px 0px 0px 0px;
    border-top: #eaeaea;
    border-top-width: 2px;
    border-top-style: solid;
}


/* monospace all MAC addresses */
.macAddress {
    font-family: monospace;
}



/* Override bootstrap's practice of making error font size smaller */
.invalid-feedback {
    font-size: 1em;
}


/* for issue in display of modal errors containing verbose html pages*/
body > div.modal.fade.DTED.show > div > div > div.DTE_Footer.modal-footer > div.DTE_Form_Error {
    width: 100% !important;
}

#clitext {
    min-width: 150px;
}

#cli-prompt-link {
    text-decoration: none;
}