/*
    dg: jira_4822 colors must be wcag 2.1 compliant (wcag 1.4.3)
    RK: Standard HdL Green accent color = #03807C
*/

.hdlGreen {
    color: #03807C;
}


html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    padding-top: 50px;
    padding-bottom: 20px;
    padding-right: 0px !important; /* vs: bootstrap modal bug keeps adding 17px here */
    position: relative;
    height: 100%;
}

a,
.blue-fg {
    color: #0256d4; /* for #0078d7 */
}

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

.link {
    color: #03807C !important;
}
.link:hover,.link:focus {
    color: #03807C;
}


/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}


.control-label{
    text-align:left !important;
}



.btn-textControl {
    min-width: 0px !important;
    background-color: #fff !important;
    text-align: left;
    cursor: text;
}
.btn-selectListControl {
    min-width: 0px !important;
    background-color: #fff !important;
    text-align: left;
    cursor: pointer;
}

/* vs: HdL teal button */
.btn-teal,
.btn-teal[disabled]:hover {
    background-color: #03807C;
    border-color: #03807C;
    color: #fff;
}

.btn-teal:hover,
.btn-teal:focus,
.btn-teal:active {
    background-color: #026764;
    border-color: #026764;
    color: #fff;
}


.btn-default {
    color: #333333 !important;
    border-color: #e6e6e6;
    background-color: #e6e6e6;
}
.btn-default:hover,
.btn-default:focus {
}

/* vs: override bootstrap style
   dg: jira_4822 add more bootstrap and toastr style overrides for wcag 2.1, the colors they override are commented next to them
   dg: jira_4822 add wcag compliant themed colors like gray-fg, blue-bg, and red-fg
*/
.btn-default[disabled]:hover {
    border-color: #e6e6e6;
    background-color: #e6e6e6;
}

.gray-fg,
.dropdown-header,
.text-muted,
.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small,
.h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small,
h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small,
h6 .small, h6 small,
blockquote .small, blockquote footer, blockquote small, caption,
.btn-link[disabled]:focus, .btn-link[disabled]:hover, fieldset[disabled] .btn-link:focus, fieldset[disabled] .btn-link:hover,
.nav > li.disabled > a, .nav > li.disabled > a:focus, .nav > li.disabled > a:hover, .navbar-default .navbar-brand,
.navbar-default .navbar-text, .navbar-default .navbar-nav > li > a, .navbar-default .navbar-link, .navbar-default .btn-link,
.breadcrumb > .active,
.pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span,
.pagination > .disabled > span:focus, .pagination > .disabled > span:hover, .pager .disabled > a, .pager .disabled > a:focus,
.pager .disabled > a:hover, .pager .disabled > span,
.list-group-item.disabled, .list-group-item.disabled:focus, .list-group-item.disabled:hover, .list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text,
.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
    color: #6e6e6e; /* #777777, #808080 & other light-grey colors */
}

.darkgray-fg {
    color: #333333; /* & other dark-gray colors */
}

.blue-bg {
    background-color: #0256d4; /* #0078d7 */
}

.badge {
    background-color: #6e6e6e;
}

.red-fg {
    color: #d60000; /* for #EE1C25*/
}

.orange-fg {
    color: #C44601; /* for #F26423, #F26422*/
}

.btn-success,
.btn-success.disabled.focus, .btn-success.disabled:focus, .btn-success.disabled:hover,
.btn-success[disabled].focus, .btn-success[disabled]:focus, .btn-success[disabled]:hover,
fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover,
.btn-success .badge,
.label-success,
.progress-bar-success,
.toast-success /* dg: jira_4822 override for toastr.min.css */
{
    background-color: #3A833A; /* for #5cb85c, #0C9444, #8CC63F */
}

.green-fg {
    color: #3A833A;
}

.darkteal-fg {
    color: #037874;
}

.lightYellow-bg {
    background-color: #FBF3CC;
}

.yellow-bg {
    background-color: #FFDC42; 
}

.white-bg {
    background-color: #FFFFFF;
}

.red-bg {
    background-color: #d60000;
}

.orange-bg {
    background-color: #C44601; /* for #F26423, #F26422*/
}

.btn-success.focus,
.btn-success:focus,
.btn-success:hover,
.btn-success.active,
.btn-success:active,
.open > .dropdown-toggle.btn-success,
.label-success[href]:focus,
.label-success[href]:hover
{
    background-color: #2f6f2f; /* for #449d44 */
}

.toast-info {
    background-color: #287f9a; /* for #2f96b4 */
}


.btn-danger {
    background-color: #c5302b; /* for #d9534f */
}

.simpleLabel {
    font-weight: normal;
    margin-bottom: unset;
}

/* blee - FB 124947 */
.btn-info {
    border-color: #E6E6E5;
    background-color: #E6E6E5;
    color: #333333;
}
.btn-info:hover,
.btn-info[disabled]:hover,
.btn-info:focus {
    border-color: #E6E6E5;
    background-color: #E6E6E5;
    color: #333333;
}

.sectionHeaderHR {
    border-top: 1px solid #eeeeee !important;
    margin-bottom: 10px;
    margin-top: 10px;
}

/* vs: orange icon in front of report that requires certain criteria */
.glyphicon-certificate-orange {
    color:darkorange;
}

input[type=number].input-numberNoSpinners,
input[type=date].input-numberNoSpinners {
    -moz-appearance: textfield;
}

.nowhiteborder {
    border: 0px !important;
    background-color: #ddd !important;
}



.input-group-btn.input-space {
    padding-left: 0px;
    margin:0px;
}


/*RK, remove button shadowing, in bootstrap 4.1 there is a class called shadow-none to do this*/
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
    outline: 0 !important;
    outline-offset: 0 !important;
    background-image: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}


input[type=number].input-numberNoSpinners::-webkit-inner-spin-button,
input[type=number].input-numberNoSpinners::-webkit-outer-spin-button,
input[type=date].input-numberNoSpinners::-webkit-inner-spin-button,
input[type=date].input-numberNoSpinners::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.itemEditForm {
    margin-top: 7px !important;
    margin-bottom: 10px !important;
}

.itemEditFormRow {
    margin-right: 15px;
}

.formRowSectionBtn {
    color: #03807C !important;
}
.formRowSectionBtn:hover {
    color: #333333 !important;
}
.itemEditFormRowSection {
    background-color: #eee;
    color: #222;
    padding: 10px;
    user-select: none;
    border-top-right-radius: 8px;
    border-left: 1px solid #03807C;
}

.checkbox label{
   cursor:default;
   user-select:none;
}

.form-check {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #666;
    font-weight: normal;
    vertical-align: middle !important;
    cursor: default;
    user-select: none;
}

.form-check > span {
        margin-top:6px;
        margin-left:4px;
}




/*RK, Start: Field inputs */

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #999;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #999;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #999;
}

/* Actual code example */
.form-field {
    display: block;
    margin-bottom: 5px;
}

.form-field__label {
    display: block;
    font-size: 1.0rem;
    font-weight: normal;
    left: 0;
    margin: 0;
    padding: 6px 6px 0;
    position: absolute;
    top: 0;
    transition: all 0.4s;
    width: 100%;
    font-weight:bold;
}

.form-field__control {
    background: #fff;
    border-radius: 0px 8px 0 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}


.form-field__input,
.form-field__textarea {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   /* 
    cn: jira-3056 commented to highlight input on focus
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;*/
    background: transparent;
    border: 0;
    border-bottom: 1px solid #f3f3f3;
    color: #333;
    display: block;
    font-size: 12px;
    margin-top: 24px;
    outline: 0;
    padding: 0 12px 10px 12px;
    width: 100%;
    resize: none;
}

/*cn: jira-3056 highlighted input on focus*/
.form-field__input:focus,
.form-field__edit:focus,
.form-field__textarea:focus,
.form-field__select:focus{
    border-color: #66afe9 !important;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

.form-field__checkbox {
    /*cn: jira-3056 commented to show highlighted check box on focus
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;*/
    background: transparent;
    display: block;
    margin-top: 20px !important;
    margin-bottom: 18px !important;
    margin-left: 2px !important;
    zoom: 1.4 !important;
    padding-bottom: 9px !important;
}

.form-field__select {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #f3f3f3;
    color: #333;
    display: block;
    font-size: 1.4rem;
    margin-top: 24px;
    outline: 0;
    padding: 0 12px 10px 12px;
    width: 100%;
    resize: none;
}

.form-field__selectEdit {
    background: transparent;
    border: 0;
    color: #333;
    font-size: 1.4rem;
    margin-top: 24px;
    outline: 0;
    padding: 0 12px 10px 0px;
    width: 100%;
    resize: none;
}


.form-field__edit {
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
    margin-bottom:10px;    
}


.form-field__textarea {
    height: 150px;
}
/*RK: END Field inputs*/




/*RK: License relatd  */
.LicenseSubTab {
    padding: 0px 5px 5px 5px;
    min-height: 400px;
}

.LicenseSubTabEdit {
    padding: 0px 5px 5px 5px;
    min-height: 400px;
    z-index: 11;
    background-color: #fff;
    border-radius: 8px;
    border: 2px solid #000;
}

.modaloverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0,0,0,0.5); /*dim the background*/
}

/*cn: jira-1274 - add css for Purge Account here so they can be shared across license tabs*/

#LicenseOtherGroup ul.dropdown-menu li  {
    padding:5px 15px;
    cursor:pointer;
}

#LicenseOtherGroup  ul.dropdown-menu > li.disabled {    
    cursor: not-allowed !important;
    opacity: 0.5;
}

#LicenseOtherGroup ul.dropdown-menu li span {
    display:inline-block;
    padding-right:5px;
} 

#LicenseOtherGroup #OtherBtn {margin:0 0 0 7px !important;}

/*RK: END License */









/* RK, NavBar customizations */
.navbar-inverse {
    background-color: #f3f3f3;
    border-color: #f3f3f3;
    border-bottom:0px;
}
.navbar-nav > li > a {
    color: #474747 !important;
    padding: 15px 12px;
}
.navbar-nav > li > a:hover {
    color: #474747 !important;
    background-color:#e6e6e6 !important;
}
.navbar-brand {
    color: #007167 !important;
}

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
    color: #fff;
    background-color: #e6e6e6;
}

.navAgencyName {
    color: #037874; /* darker color than #03807C */
}

/*cn: jira-390 added disabled link style*/
.navbar-nav > li > a.disabled {
    pointer-events: none;
    cursor: not-allowed !important;
    color:#999999 !important;
}

.navbar-nav > li.disabled {    
    cursor: not-allowed !important;
}

/*RK, Footer customizations*/
footer {
    padding-top: 15px !important;
    margin-bottom: 75px !important;
    margin-top: 40px !important;
    font-size: 10.5px !important;
}


/*RK, for home page carousel customizations*/
.carousel {
    margin-bottom: 5px;
}

.validation-summary {
    display: none;
}

.validation-summary.validation-summary-valid, .validation-summary.validation-summary-error {
    display: block;
}



.settingsSectionDiv{
    padding-left:20px;
    padding-right:30px;
}


/*RK,  Google Charts Customizations for Dashboard */
.chartsDiv {
    width: 500px !important;
    min-height: 300px !important;
    cursor: default;
}

/*RK, workaround for google charts piechart tooltip flicker bug (still active bug as of Jul 2019)
      https://stackoverflow.com/questions/37902708/google-charts-tooltip-flickering
*/
svg > g > g.google-visualization-tooltip {
    pointer-events: none
}



/*RK, better looking checkboxes*/
input[type=checkbox] {
    position: relative;
    cursor: pointer;
    margin-right:3px;
}
input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    top: -2px;
    left: 0;
    border: 1px solid #555555;
    border-radius: 3px;
    background-color: white;
}
input[type=checkbox][disabled]:before {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    top: -2px;
    left: 0;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: #f6f6f6;
}
input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    border: solid #03807C;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 0px;
    left: 6px;
}
    input[type=checkbox][disabled]:checked:after {
        content: "";
        display: block;
        width: 5px;
        height: 10px;
        /*border: solid #cccccc;*/
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        top: 0px;
        left: 6px;
    }

    /*cn: jira-2925*/
    input[type="checkbox"]:focus {
          outline:none;
          border-color: #0094ff;
          box-shadow:  0 0.2em 0.2rem .1rem rgba(13, 110, 253, .25);
          -webkit-box-shadow: inset 5px 5px 5px rgba(0,0,0, 0.75), 1px 1px 8px rgba(13, 110, 253, 0.9);
          -moz-box-shadow: inset 5px 5px 5px rgba(0,0,0, 0.75), 1px 1px 8px rgba(13, 110, 253, 0.9);

        }
        










/* RK, TYPEAHEAD autocomplete css */

.result-header {
    margin: 10px 20px 5px 20px;
    padding: 3px 0;
    border-bottom: 1px solid #ccc;
}

.typeahead,
.tt-query,
.tt-hint {
    line-height: normal; /*RK this is just here to pass LINT css compile checks*/
    /*
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    outline: none;*/
}

.typeahead {
    background-color: #fff;
}

    .typeahead:focus {
        border: 1px solid #798f3a;
    }

.tt-query {
    /*
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
*/
}

.tt-hint {
    color: #999
}

.tt-menu {
    width: 378px;
    margin: 2px 0;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    max-height: 700px;
    overflow-y: auto;
}



.tt-suggestion {
    padding: 3px 20px;
    font-size: 14px;
    line-height: 18px;
}

    .tt-suggestion:hover {
        cursor: pointer;
        color: #000;
        background-color: #e6e6e6; /*hdlgreen:#007167, blue: #337ab7;*/
    }

    .tt-suggestion.tt-cursor {
        color: #000;
        background-color: #e6e6e6;
    }

    .tt-suggestion p {
        margin: 0;
    }

.gist {
    font-size: 14px;
}

/* example specific styles */
/* ----------------------- */

#custom-templates .empty-message {
    padding: 5px 10px;
    text-align: center;
}

#multiple-datasets .league-name {
    margin: 0 20px 5px 20px;
    padding: 3px 0;
    border-bottom: 1px solid #ccc;
}

#scrollable-dropdown-menu .tt-menu {
    max-height: 150px;
    overflow-y: auto;
}

#rtl-support .tt-menu {
    text-align: right;
}

.SearchTextBox {
    border-bottom-left-radius: 4px !important;
    border-top-left-radius: 4px !important;
    min-width: 250px !important;
    height: 32px !important;
}
/*RK,  END TYPEAHEAD */




/*[RK] START: JQUERY DATATABLE CUSTOMIZATION */
    th {
    border-bottom: 1px solid #dddddd !important;
    vertical-align: top !important;
}


tr.group,
tr.group:hover {
    background-color: #ddd !important;
    color: #000;
}

.table-bordered a {
    text-decoration: underline;
    color: blue;
}


.dataTables_wrapper .dataTables_length {
    float: left;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0px;
}

.dataTables_wrapper .dataTables_filter {
    float: left;
    text-align: left;
}

.dataTables_filter-right .dataTables_wrapper .dataTables_filter {
    float: right;
}

.dataTables_filter-right .dataTables_wrapper .dt-buttons {
    float: right;
}

.dataTables_filter input {
    padding: 4px;
    border-radius: 4px;
}

.tableNarrow td {
    padding: 0px 0px 0px 0px !important;
    vertical-align: middle !important;
}

.dtbutton{
    height:30px;
}
/*RK - END: JQUERY DATATABLE CUSTOMIZATION */



/*RK, popup modal styling */

.modal {
    padding-right: 0px !important;
}

.modal-header {
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
    background-color: #03807C;  /* blee - FB 124947 */
    color: #ffffff;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.modal-content {
    background-color: #337ab7;
}

.modal-body {
    background-color: #fff;
}

.modal-footer {
    border-top: 1px solid #fff;
    background-color: #fff;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-bottomright: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.perCirc {
    position: relative;
    text-align: center;
    width: 91px;
    height: 91px;
    border-radius: 100%;
    background-color: #00cc00;
    background-image: linear-gradient(90deg, transparent 50%, #eee 50%), linear-gradient(90deg, #eee 50%, transparent 50%);
}

.perCirc .perCircInner {
    position: relative;
    top: 4px;
    left: 4px;
    text-align: center;
    width: 83px;
    height: 83px;
    border-radius: 100%;
    background-color: #fff;
}

.perCirc .perCircInner div {
    position: absolute;
    top: 26px;
    left: 11px;
    color: #3a833a;
}

.perCirc .perCircStat {
    font-size: 24px;
    line-height: 1em;
    letter-spacing:-1px;
}


.circle-loader {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-left-color: #3a833a;
    animation: loader-spin 1.2s infinite linear;
    display: inline-block;
    border-radius: 50%;
    width: 91px;
    height: 91px;
    position: absolute;
    top: 0px;
    left: 0px;
}

.load-complete {
    -webkit-animation: none;
    animation: none;
    border-color: #00cc00;
    border: 2px solid rgba(0, 0, 0, 0.1);
    transition: border 500ms ease-out;
}

.checkmark {
    display: none;
    transform: rotate(15deg);
    color: #3a833a;
    font-size: 60px;
    position: absolute;
    top: 0px;
    left: 20px;
}

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

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



/* vs: msg alert in modal header */
.modal-message {
    font-size: 12px;
    border-radius: 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-bottom: 15px;
}



/*RK, end of popup modal styling */



/* vs: add required asterisk after label */
.required-label:after {
    content: " *";
    color: #d60000;
    font-weight: bold;
}


/* vs: bootstrap tooltip */
.tooltip-inner {
    text-align: left;
    background-color: white;
    color: gray;
    border: 1px solid gray;
    box-shadow: 2px 2px 5px gray;
}


/* vs: dropzone styling */
.dz-message {
    height: 180px;
    padding-top: 25px;
}
.dropzone.dz-drag-hover {
    border-style: solid;
    opacity: 0.5;
}
.dropzone {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 2px dashed #03807C;
    border-radius: 5px;
    background-color: whitesmoke;
    height: 180px;
    text-align: center;
}


/* vs: used to disable button that replaces anchor */
.disabledAnchor {
    background-color: transparent;
    padding: 0;
    border: none;
}
.disabledAnchor:hover {
    background-color: transparent !important;
}

/* vs: used to disable anchor that acts as button */
.disabledAnchorBtn {

}
.disabledAnchorBtn:hover {
    border-color: #E6E6E5 !important;
    background-color: #E6E6E5 !important;
    color: #333333;
}



/*
   evol-colorpicker 3.4.1
   (c) 2019 Olivier Giulieri
   http://evoluteur.github.io/colorpicker/
*/
.evo-pop {
    z-index: 10000;
    width: 224px;
    padding: 3px;

    /*RK: Add styling */
    background: #fff !important;
    border: 2px solid #000;
    border-radius:8px;
}

.evo-pop-ie {
    z-index: 10000;
    width: 212px;
    padding: 3px;
}

.evo-palette td {
    font-size: 1px;
    border: solid 1px #c0c0c0;
    padding: 7px;
    cursor: pointer;
}

.evo-palette tr.top > td {
    border-bottom: 0;
}

.evo-palette tr.in > td {
    border-top: 0;
    border-bottom: 0;
}

.evo-palette tr.bottom > td {
    border-top: 0;
}

.evo-palette div.sep {
    height: 3px;
}

.evo-palette,
.evo-palette-ie {
    border-collapse: separate;
    border-spacing: 4px 0px;
    *border-collapse: expression('separate', cellSpacing='2px');

}

    .evo-palette th,
    .evo-palette-ie th {
        border: 0;
        padding: 5px 3px;
        text-align: left;
        font-weight: normal;
        background: transparent !important;
    }

    .evo-palette-ie td {
        font-size: 1px;
        border: solid 1px #c0c0c0;
        padding: 7px;
        cursor: pointer;
    }

.evo-palette2,
.evo-palette2-ie {
    margin: auto;
    border-collapse: collapse;
}

    .evo-palette2 td,
    .evo-palette2-ie td {
        font-size: 1px;
        cursor: pointer;
    }

    .evo-palette2 td {
        padding: 6px 7px;
    }

    .evo-palette2-ie td {
        padding: 5px;
    }

.evo-palcenter {
    padding: 5px;
    text-align: center;
}

.cust-theme {
    border-spacing: 4px 3px;
}

.evo-colorind,
.evo-colorind-ie,
.evo-colorind-ff {
    border: solid 1px #c3c3c3;
    width: 18px;
    height: 18px;
    float: right;

    /*RK: scootch up to textbox level */
    position: relative;
    top: -26px;
    left:15px;
    border-radius:50%;
}

.evo-colorind-ie {
    position: relative;
    top: -23px;
}

.evo-colorbox-ie {
    font-size: 8px;
    padding: 3px 9px !important;
}

.evo-pop:after,
.evo-pop-ie:after,
.evo-colorind:after,
.evo-colorind-ie:after,
.evo-colorind-ff:after,
.evo-color span:after,
.evo-cHist:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    font-size: 0;
}

.evo-color {
    width: 94px;
    padding: 1px 3px 0 4px;
}

    .evo-color div {
        border: solid 1px #808080;
        border-right: solid 1px #c0c0c0;
        border-bottom: solid 1px #c0c0c0;
        padding: 3px;
        margin-bottom: 5px;
        width: 10px;
        height: 10px;
        float: left;
    }

    .evo-color span {
        font-size: 15px;
        margin: 1px 0 4px 3px;
        float: left;
    }

.evo-sep {
    height: 10px;
    font-size: 0;
}

.evo-more {
    padding: 4px 5px 4px;
    font-size: smaller;
}

.evo-cHist {
    padding: 3px;
}

    .evo-cHist div {
        cursor: pointer;
        border: solid 1px #c0c0c0;
        padding: 3px;
        margin: 5px;
        width: 10px;
        height: 10px;
        float: left;
    }

.evo-transparent {
    background-image: repeating-linear-gradient(135deg, black, black 1px, white 1px, white 3px);
}

.evo-tr-box {
    cursor: pointer;
    border: solid 1px #c0c0c0;
    padding: 3px;
    width: 7px;
    height: 7px;
    float: right;
    position: relative;
    right: -3px;
    top: 2px;
}

a.evo-hist {
    margin-left: 6px;
}

.evo-pointer {
    cursor: pointer;
}

.evo-hidden-button {
    display: none;
}



/*RK, Jquey Sortable UI css, this is the functionality for dragging dropping divs
https://johnny.github.io/jquery-sortable/
*/

body.dragging, body.dragging * {
    cursor: pointer !important;
}

.dragged {
    position: absolute;
    top: 0;
    opacity: 0.5;
    z-index: 2000;
}

.jssortablediv ol.vertical {
    margin: 0 0 9px 0;
    min-height: 10px;
}

    .jssortablediv ol.vertical li {
        display: block;
        margin: 5px;
        padding: 5px;
        border: 1px solid #cccccc;
        color: #0088cc;
        background: #eeeeee;
    }

        .jssortablediv ol.vertical li.placeholder {
            position: relative;
            margin: 0;
            padding: 0;
            border: none;
            border-style: dotted !important;
        }

            .jssortablediv ol.vertical li.placeholder:before {
                position: absolute;
                content: "";
                width: 0;
                height: 0;
                margin-top: -5px;
                left: -5px;
                top: -4px;
                border: 5px solid transparent;
                border-left-color: red;
                border-right: none;
            }

.jssortablediv ol {
    list-style-type: none;
    cursor: pointer !important;
}

    .jssortablediv ol li {
        color: #333333 !important;
        padding: 20px !important;
        border-radius: 5px !important;
        background-color: #FFFF00 !important;
        border: 2px dotted #cccccc !important;
    }

    .jssortablediv ol i.icon-move {
        cursor: pointer;
    }

    .jssortablediv ol li.highlight {
        background: #333333;
        color: #999999;
    }

        .jssortablediv ol li.highlight i.icon-move {
            background-image: url("../img/glyphicons-halflings-white.png");
        }

    .jssortablediv ol.nested_with_switch, ol.nested_with_switch ol {
        border: 1px solid #eeeeee;
    }

        .jssortablediv ol.nested_with_switch.active, ol.nested_with_switch ol.active {
            border: 1px solid #333333;
        }

        .jssortablediv ol.nested_with_switch li, ol.simple_with_animation li, ol.serialization li, ol.default li {
            cursor: pointer;
        }

    .jssortablediv ol.simple_with_animation {
        border: 1px solid #999999;
    }

.switch-container {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80px;
}

.navbar-sort-container {
    height: 200px;
}

.jssortablediv ol.nav li, .jssortablediv ol.nav li a {
    cursor: pointer;
}

.jssortablediv ol.nav .divider-vertical {
    cursor: default;
}

.jssortablediv ol.nav li.dragged {
    background-color: #2c2c2c;
}

.jssortablediv ol.nav li.placeholder {
    position: relative;
}

    .jssortablediv ol.nav li.placeholder:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-top-color: red;
        top: -6px;
        margin-left: -5px;
        border-bottom: none;
    }

.jssortablediv ol.nav ol.dropdown-menu li.placeholder:before {
    border: 5px solid transparent;
    border-left-color: red;
    margin-top: -5px;
    margin-left: none;
    top: 0;
    left: 10px;
    border-right: none;
}

.sorted_table tr {
    cursor: pointer;
}

    .sorted_table tr.placeholder {
        display: block;
        background: red;
        position: relative;
        margin: 0;
        padding: 0;
        border: none;
    }

        .sorted_table tr.placeholder:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-left-color: red;
            margin-top: -5px;
            left: -5px;
            border-right: none;
        }

.sorted_head th {
    cursor: pointer;
}

    .sorted_head th.placeholder {
        display: block;
        background: red;
        position: relative;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
    }

        .sorted_head th.placeholder:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-top-color: red;
            top: -6px;
            margin-left: -5px;
            border-bottom: none;
        }








/* vs: LICENSE FEE STYLINGS ------------------------------------------------- */

/* vs: period dropdown buttons */
.btn-info-inverse {
    color: #333333;
    background-color: #ffffff;
    border-color: #ffffff;
}
.btn.btn-info-inverse:active {
    color: #ffffff;
    background-color: #31b0d5;
    border-color: #269abc;
}

/* vs: navigation bar under Fees */
#FeeSubtabs a {
    color: #333333;
    padding: 7px 12px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    margin-right: 0px;
}
#FeeSubtabs .active a {
    font-weight: bold;
    color: #03807C;
}

/* vs: display basic renewal info */
#LeftPanelUL {
    list-style-type: none;
    padding: 10px;
    padding-bottom: 0px;
    margin: 0;
}
#LeftPanelUL li {
    margin-bottom: 10px;
}
#LeftPanelUL span,
#LeftPanelUL div {
    margin-left: 10px;
}

#LeftPanelDiv {
    float: left;
    width: 25%;
    min-height:370px;
    padding: 0;
    border-radius: 4px;
    background-image: linear-gradient(to right, #e6e6e6, #f3f3f3, #ffffff);
    transition: width 0.5s;
}
#RightPanelDiv {
    float: right;
    width: 75%;
    padding: 0;
    transition: width 0.5s;
}

/* vs: chevron icon to expand or collapse left panel */
.leftpanel-toggle {
    color: lightgray;
}
.leftpanel-toggle:hover {
    color: gray;
}

/* vs: table inside Rates cell */
.overview-fee-breakdowns {
    font-size: 12px;
}
.overview-fee-breakdowns td {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 2px;
    border: none !important;
}

/* vs: detail view pop up */
.detailViewLineItemDetailsTable thead {
    background-color: #f5f5f5;
}

/* vs: fee fees subtab */
.fee-fees-table {
    margin-bottom: 0;
}
.fee-fees-table tbody td {
    vertical-align: middle !important;
}
#RenewalTotalLineItem td {
    padding-top: 20px;
    border: none;
    font-size: medium;
    font-weight: bold;
}
.yellow-highlight {
    background: rgba(244,251,17,0.45);
}
.link-vehicles {
    color: #03807C;
}
.link-vehicles:hover {
     color: #03807C;
}
.fee-vehicle-edit input,
.fee-vehicle-edit select {
    height: auto;
    font-size: small;
    padding: 3px 6px;
}
.fee-vehicle-edit-short {
    max-width: 100px;
    min-width: 60px;
}

/* vs: all charges */
.row-hover-pointer:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

/* vs: custom table bordered */
.table-cells-bordered th {
    border: 1px solid #ddd !important;
}
.table-cells-bordered td {
    border: 1px solid #ddd;
}

/* vs: use these classes in <tr> */
.border-top-only td {
    border-right: none;
    border-left: none;
    border-bottom: none;
}
.border-bottom-only td {
    border-right: none;
    border-left: none;
    border-top: none !important;
}
.border-sides-only td {
    border-top: none !important;
    border-bottom: none;
    padding-bottom: 0 !important;
}
.border-less-bottom td {
    border-bottom: none;
    padding-bottom: 0 !important;
}
.border-less-top td {
    border-top: none !important;
}

/* vs: END OF LICENSE FEE STYLINGS ------------------------------------------------- */



/* //RK Styling for Tags */

.tooltip.in {
    opacity: 1 !important; /*RK, remove bootstrap default opacity*/
    letter-spacing:-.7px !important;
}



/* vs: too many versions of btn-white; this is the most basic/common one */
.btn-white-basic {
    background-color: #fff;
    border: 1px solid #d5d5d5;
}

.btn-white-basic[disabled] {
    background-color: #fff;
    border: 1px solid #d5d5d5;
    color: #999;
}

/*vs: #BulkActionsModal */
.note-btn {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.note-btn:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.note-status-output {
    padding-top: 0
}

.note-editor {
    margin-bottom: 0;
}


/* blee - For bulk email template - Start */

#BulkActionsModal .btn-default-alt {
    color: #333333 !important;
    border-color: #e6e6e6;
    background-color: #e6e6e6;
    margin-right: 15px;
    margin-top: 10px;
}

#BulkActionsModal [data-id="EmailTemplateAttachmentSelectBulk"] {
    background-color: #e6e6e6;
}

/* blee - For bulk email template - End */

/* blee - For email template - Start */

#EmailTemplateModal .btn-default-alt {
    color: #333333 !important;
    border-color: #e6e6e6;
    background-color: #e6e6e6;
    margin-right: 15px;
}

#SelectedToEmailsDiv .bootstrap-select {
    margin-right: 15px;
}

#SelectedToEmailsDiv .dropdown-menu {
    min-width: 200px;
}

#EmailTemplateModal .btn-white-inline {
    float: left;
    background-color: #fff;
    border: 1px solid #d5d5d5;
    padding: 3px;
}

#EmailTemplateModal .modal-dialog {
    overflow-y: initial !important
}

/* blee - For email template - End */










/* vs: report selected styles ------------------------------------------------------------------------------------------- */


/* vs: same width with file output button drop down */
#ReportParamsDiv select,
#ReportParamsDiv input {
    max-width: unset;
    width: 360px;
}

#ReportParamsDiv input[type=checkbox] {
    width: auto;
}

#ReportParamsDiv .range-input {
    width: 162px !important;
    display: inline;
}

#ReportParamsDiv .range-input-to {
    width: 162px !important;
    display: inline;
}
#ReportParamsDiv .panel-default {
    width: 360px;
}

#ReportParamsDiv .panel-body {
    max-height: 300px;
    overflow: auto;
}

/* vs: make editable select look like a select dropdown */
#ReportParamsDiv .es-list li.selected {
    background: rgb(77, 144, 254) !important;
    color: white !important;
}


/* vs: (end) report selected styles ------------------------------------------------------------------------------------------- */