/*
 Notes about the precedence of css class application:
    - CSS rules are applied in the order they are encountered and if there is a conflict between two rules,
    then CSS specificity determines which rule takes precedence. If the CSS specificity is the same for two rules,
    then the later one (the one defined later in the page) takes precedence.
    Actually, the class that defined last in the css file is applied.
    However, you must also take into account CSS specificity, if you have a more specific selector,
    this one will be used (this one is easy to make mistake, if a class defined at the end of the css file is still not
    applied, check the specificity of the class.
    Example: Two classes are defined as follows:
        .classB .classC {
        }
        .classA {
        }
        <div class='classC classA'>
    Although the '.classA' is defined later in the css, it is likely that the 'classC' is applied because it is more specific.


*/

body, html {
    height: 100%;
    font-family: "Meiryo", "Lucida Grande", "Hiragino Kaku Gothic ProN", "MS PGothic";
}

div {
    font-family: "Meiryo", "Lucida Grande", "Hiragino Kaku Gothic ProN", "MS PGothic";
    position: relative;
}

input {
    font-family: "Meiryo", "Lucida Grande", "Hiragino Kaku Gothic ProN", "MS PGothic";
}

.table > tbody > tr > td {
    font-family: "Meiryo", "Lucida Grande", "Hiragino Kaku Gothic ProN", "MS PGothic";
    position: relative;
}

.table > thead > tr > th {
    position: relative;
    vertical-align: top;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding: 0px;
    margin: 0px;
}

/*  Checkbox and Radio buttons styles */
/*  Sample page is here: http://awesome-bootstrap-checkbox.okendoken.com/demo/index.html
    ***  Checkboxes without label text   .checkbox-single
    ***  .checkbox-circle for roundness (round checkbox, not radio)

<div class="checkbox">
        <input id="checkbox1" type="checkbox">
        <label for="checkbox1">日本語テスト　Default </label>
</div>
<div class="checkbox checkbox-success">
        <input id="checkbox3" type="checkbox">
        <label for="checkbox3"> Success </label>
</div>

Inline checkbox sample:
<div class="checkbox checkbox-success checkbox-inline">
        <input id="inlineCheckbox2" type="checkbox" checked="" value="option1">
        <label for="inlineCheckbox2"> Inline Two </label>
</div>


Radio without label sample:
<div class="radio radio-success radio-single">
        <input id="singleRadio2" type="radio" aria-label="Single radio Two" checked="" name="radioSingle1" value="option2">
        <label></label>
</div>
*/

/*  checkbox styles*/
/*  checkbox styles*/
/*  checkbox styles*/
/*  checkbox styles*/
/*  checkbox styles*/

.btn {
    padding: 1px;
    padding-left: 10px;
    padding-right: 10px;
}

.tf-checkbox-simple {
    height: 100%;
    padding-right: 3px;
    line-height: 24px;
    vertical-align: middle;
}

.tf-checkbox {
    padding-left: 10px;
}

.tf-checkbox label {
    display: inline-block;
    position: relative;
    height: 18px;
    vertical-align: middle;
    line-height: 18px;
}

.tf-checkbox label::before {
    background-color: #fff;
    border: 1px solid #aaaaaa;
    border-radius: 3px;
    content: "";
    display: inline-block;
    height: 16px;
    left: 0;
    top: 0px;
    margin-left: -22px;
    position: absolute;
    transition: border 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
    width: 16px;
}

.tf-checkbox label::after {
    color: #555555;
    display: inline-block;
    font-size: 9px;
    height: 16px;
    left: 0;
    margin-left: -22px;
    padding-left: 3px;
    position: absolute;
    top: -1px;
    width: 16px;
}

.row-selector .tf-checkbox label::before {
    margin-left: -19px;
}

.row-selector .tf-checkbox label::after {
    margin-left: -19px;
}

.tf-checkbox input[type="checkbox"] {
    /*z-index: 1;*/
    visibility: hidden;
    vertical-align: middle;
}

.tf-checkbox input[type="checkbox"]:focus + label::before {
    outline: thin dotted;
    outline-offset: -2px;
}

.tf-checkbox input[type="checkbox"]:checked + label::after {
    content: "\e013";
    font-family: 'Glyphicons Halflings';
}

.tf-checkbox input[type="checkbox"]:disabled + label {
    opacity: 0.5;
}

.tf-checkbox input[type="checkbox"]:disabled + label::before {
    background-color: #eeeeee;
    border: 1px solid #999999;
    cursor: not-allowed;
}

.tf-checkbox input[type="checkbox"]:disabled + label::after {
    cursor: not-allowed;
}

.tf-checkbox.tf-checkbox-circle label::before {
    border-radius: 50%;
}

.tf-checkbox.tf-checkbox-inline {
    margin-top: 0;
}

.tf-checkbox-primary input[type="checkbox"]:checked + label::before {
    background-color: #428bca;
    border-color: #428bca;
}

.tf-checkbox-primary input[type="checkbox"]:checked + label::after {
    color: #fff;
}

.tf-checkbox-danger input[type="checkbox"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

.tf-checkbox-danger input[type="checkbox"]:checked + label::after {
    color: #fff;
}

.tf-checkbox-info input[type="checkbox"]:checked + label::before {
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.tf-checkbox-info input[type="checkbox"]:checked + label::after {
    color: #fff;
}

.tf-checkbox-warning input[type="checkbox"]:checked + label::before {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.tf-checkbox-warning input[type="checkbox"]:checked + label::after {
    color: #fff;
}

.tf-checkbox-success input[type="checkbox"]:checked + label::before {
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.tf-checkbox-success input[type="checkbox"]:checked + label::after {
    color: #fff;
}

/*  Radio Buttons  */
/*  Radio Buttons  */
/*  Radio Buttons  */
/*  Radio Buttons  */

.tf-radio-simple {
    height: 100%;
    padding-right: 3px;
    line-height: 24px;
    vertical-align: middle;
}

.tf-radio {
    padding-left: 3px;
}

.tf-radio label {
    display: inline-block;
    position: relative;
    height: 17px;
    vertical-align: middle;
    padding-left: 5px;
    line-height: 10px;
    z-index: 2;
}

.tf-radio label::before {
    background-color: #fff;
    border: 1px solid #aaaaaa;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 16px;
    width: 16px;
    margin-left: -15px;
    position: absolute;
    left: 0;
    top: 0;
    transition: border 0.15s ease-in-out 0s;

}

.tf-radio label::after {
    background-color: #555555;
    border-radius: 50%;
    content: " ";
    display: inline-block;
    height: 12px;
    width: 12px;
    margin-left: -15px;
    position: absolute;
    left: 2px;
    top: 2px;
    transform: scale(0, 0);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33) 0s;

}

.row-selector .tf-radio label::before {
    margin-left: -12px;
}

.row-selector .tf-radio label::after {
    margin-left: -12px;
}

.tf-radio input[type="radio"] {
    visibility: hidden;
    vertical-align: middle;
    z-index: 1;
}

.tf-radio input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline-offset: -2px;
}

.tf-radio input[type="radio"]:checked + label::after {
    transform: scale(1, 1);
}

.tf-radio input[type="radio"]:disabled + label {
    opacity: 0.65;
}

.tf-radio input[type="radio"]:disabled + label::before {
    background-color: #eeeeee;
    border: 1px solid #999999;
    cursor: not-allowed;
}

.tf-radio input[type="radio"]:disabled + label::after {
    cursor: not-allowed;
}

.tf-radio.tf-radio-inline {
    margin-top: 0;
}

.tf-radio-primary input[type="radio"] + label::after {
    background-color: #428bca;
}

.tf-radio-primary input[type="radio"]:checked + label::before {
    border-color: #428bca;
}

.tf-radio-primary input[type="radio"]:checked + label::after {
    background-color: #428bca;
}

.tf-radio-danger input[type="radio"] + label::after {
    background-color: #d9534f;
}

.tf-radio-danger input[type="radio"]:checked + label::before {
    border-color: #d9534f;
}

.tf-radio-danger input[type="radio"]:checked + label::after {
    background-color: #d9534f;
}

.tf-radio-info input[type="radio"] + label::after {
    background-color: #5bc0de;
}

.tf-radio-info input[type="radio"]:checked + label::before {
    border-color: #5bc0de;
}

.tf-radio-info input[type="radio"]:checked + label::after {
    background-color: #5bc0de;
}

.tf-radio-warning input[type="radio"] + label::after {
    background-color: darkorange;
}

.tf-radio-warning input[type="radio"]:checked + label::before {
    border-color: darkorange;
}

.tf-radio-warning input[type="radio"]:checked + label::after {
    /*background-color: #f0ad4e;*/
    background-color: darkorange;
}

.tf-radio-success input[type="radio"] + label::after {
    background-color: #5cb85c;
}

.tf-radio-success input[type="radio"]:checked + label::before {
    border-color: #5cb85c;
}

.tf-radio-success input[type="radio"]:checked + label::after {
    background-color: #5cb85c;
}

/* the class for the wrapper div of everything on the screen */
.tf-wrapper {
    background: #FFF;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}


/* the wrapper div of the sidebar and content together */
.tf-sidebar-and-content-wrapper {
    display: flex;
    flex: 1;
    margin-right: 5px;
}

.container-fluid {
    padding: 0px;
    margin: 0px;
}

.tf-sidebar-and-content-wrapper .row {
    padding: 0px;
    margin: 0px;
}

/* the main content div inside the tf-content-wrapper div and just below the tf-message div */
.tf-content {
    border-width: 0px;
    width: 100%;
}

@media (min-width: 1400px) {
    .tf-content {
        max-width: 1338px;
    }
}

/* the sidebar containing the left menu */
.tf-sidebar {
    border-width: 0px;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    min-width: 200px;
    max-width: 300px;
    border-radius: 0px;
    border-right: solid 1px #eee;
}

/*.tf-sidebar > ul.nav.navbar-nav {*/
/*    display:none;*/
/*}*/

.tf-sidebar-open-close-div {
    height: 30px;
    width: 100%;
    float: left;
    cursor: pointer;
    border-bottom: solid 1px #eee;
}

.tf-sidebar-open-close-div:hover > span {
    color: #eea236;
}

@media (max-width: 768px) {
    .tf-sidebar-and-content-wrapper {
        flex-direction: column;
    }

    .tf-sidebar {
        max-width: 100% !important;
        min-width: 100% !important;
        display: block;
    }

    .tf-sidebar > ul.nav.navbar-nav {
        display: block;
    }

    .tf-sidebar-open-close-div {
        display: none;
    }
}

/* the menu div inside the tf-sidebar div (which may contain html other than the menu ) */
.tf-sidebar-menu {
}

.tf-sidebar-menu .navbar-nav {
    margin: 0px;
}

/*
    tf-sidebar-toggle-span
*/

span.tf-sidebar-toggle-span {
    color: #999;
    position: absolute;
    top: 7px;
    left: 0px;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 15px;
}

/* use this class to clear floating divs */
.clear-both {
    clear: both;
}

/* twitter blue for borders */
.border-color-tf-blue {
    border-color: #55acee;
}

/* gray for the borders */
.border-color-tf-gray {
    border-color: #bbb;
}

/* the color of the top gray strip just below the top header */
.background-color-tf-gray {
    background-color: #ccd6dd;
}

.border-not-rounded {
    border-radius: 0 !important;
}

/* caret sign pointing to the right (default is pointing down) */
.caret.right.white {
    border-left: 4px solid #fff;
    border-right: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}


/*********************************************************************/
/*  Left menu classes
/*********************************************************************/

/* padding around the main menu bars (not the ones in the expanded sub menu) */
.tf-sidebar .navbar-nav > li > a {
    padding: 5px;
}


/*Center Icons*/
.tf-sidebar a {
    padding-right: 13px;
}

/*adds border to bottom nav boxes*/
.tf-sidebar .navbar-nav > li {
    border-bottom: 1px #eeeeee solid;
}

/*give sidebar 100% width;*/
.tf-sidebar li {
    width: 100%;
}

/*  with should be 100% to fit into the sidebar */
.tf-sidebar ul {
    width: 100%;
}

/* Colors/style dropdown box*/
.tf-sidebar .navbar-nav .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-top: solid 1px #ddd;
    background-color: #fcffff;
    border-left: solid 10px orange;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0px;
}

/*colors dropdown box text */
.tf-sidebar .navbar-nav .dropdown-menu > li > a {
    color: #777;
}

/* inner menu items */
.tf-sidebar .navbar-nav .dropdown-menu > li > a:hover, .tf-sidebar .navbar-nav .dropdown-menu > li > a:focus {
    color: darkorange;
}

/*  The label <a>  in the inner menu items */
.tf-sidebar .navbar-nav .dropdown-menu > li > a {
    font-size: 14px;
}

/*  The icon span in the inner menu items (on the left side) */
.tf-sidebar .navbar-nav .dropdown-menu > li > a > span {
    line-height: 16px;
    padding-right: 5px;
}

/*  The icon span in the menu blocks */
.tf-sidebar .navbar-nav > li > a > span.pull-left {
    padding-right: 10px;
}

.tf-sidebar .navbar-nav {
    margin: 0;
}

/* The big icon on the right side of each menu block label */
.menu-block-icon {
    font-size: 9px;
    line-height: 16px;
}

/*  The caret icon in each menu block label*/
.dropdown .caret {
    margin-left: 7px;;
}

/* left menu transition during collapse/expand*/
.tf-menu-transition {
    -webkit-transition: margin 400ms;
    -moz-transition: margin 400ms;
    -o-transition: margin 400ms;
    transition: margin 400ms;
}

/*********************************************************************************/

.tf-label-div {
    padding: 0px;
    margin: 0px;
    text-align: right;
    background-color: #eeeeee;
    /*background-color: #eeeeee;*/
    padding-right: 2px;
    padding-bottom: 1px;
    padding-top: 1px;
    min-height: 25px;
}

label {
    margin: 0px;
    font-weight: normal;
    line-height: 24px;
}

.tf-label {
    font-size: 13px;
}

.tf-data-div {
    padding: 0px;
    margin: 0px;
    padding-left: 1px;
    margin-bottom: 1px;
    /*padding-bottom: 1px;*/
    /*padding-top: 1px;*/
    line-height: 24px;
    min-height: 25px;
}

.tf-dw-page .tf-data-div,
.tf-dw-page .tf-label-div {
    padding-left: 5px;
    padding-right: 5px;
    /*border-bottom: solid 1px #efefef;*/
}

.tf-dw-page .tf-data-div {
    background-color: #fff;
    word-break: break-all;
}


.tf-element-wrapper-div {
    padding: 0px;
    margin: 0px;
    padding-bottom: 1px;
}

@media (max-width: 767px) {
    .tf-label-div {
        text-align: left;
    }
}

.input-control {
    padding: 0px;
    padding-left: 3px;
    padding-right: 3px;
    margin: 0px;
    height: 22px;
}

.input-group-addon > span {
    width: 15px;
}


.tf-page-title {
    font-size: 18px;
    font-weight: bold;
    color: #116997;
    float: left;
}

.tf-page-title span {
    line-height: 38px;
}

.tf-help-icon {
    float: right;
    padding-right: 40px;
    line-height: 32px;
    font-size: 20px;
    color: #428bca;
}

.tf-title-wrapper, .tf-title-wrapper-no-title {
    padding: 0px;
    padding-left: 10px;
    border-bottom: solid 2px orange;
    border-left: solid 5px orange;
    margin-bottom: 10px;
    margin-top: 0px;
    margin-left: 6px;
    line-height: 32px;
}

.tf-title-wrapper-no-title {
    border-width: 0px;
    margin: 0px;
}

.tf-required-label {
    float: right;
    line-height: 32px;
    padding-right: 100px;
    color: #116997;
}

.tf-required-label > span {
    color: red;
    padding-right: 5px;
    padding-left: 10px;
}

.tf-group-body {
    padding: 0px;
}

.tf-group-body > div {
    padding: 0px;
}

.tf-page-body {
    float: left;
    width: 100%;
    padding-left: 6px;
}

.tf-group-title {
    font-size: 14px;
    color: #116997;
    font-weight: bold;
    /*font-family: "MS PGothic";*/
    padding: 0px;
    padding-left: 5px;
    margin: 0px;

    background-color: transparent;
    border: 0px;
    height: 30px;
    line-height: 30px;

}

.tf-group-title-icon {
    line-height: 30px;
    padding-right: 6px;
    font-size: 10px;
    color: darkorange;
}

.tf-group-body-search-result {
    padding: 0px;
    margin: 0px;
    border: 0px;
    background-color: #f6f6f6;
}

.tf-data-table-wrapper-search-result {
    padding: 0px;
    margin: 0px;
    white-space: nowrap;
}

.tf-data-table-table {
    width: 100%;
    border-collapse: collapse;
    border-width: 0px;
    table-layout: auto;
}

table.tf-data-table-table > thead > tr {
    background-color: #dedede;
}

table.tf-data-table-table > thead > tr > th {
    padding: 0px;
    background-image: none !important; /* Remove the DataTables bootstrap integration styling */
    border-left: solid 1px #aabbcc;
    border-right: solid 1px #aabbcc;
    border-bottom: solid 1px #dddddd;
    padding-top: 3px;
    padding-bottom: 3px;
}

table.tf-data-table-table > thead > tr > th:first-child {
    border-left: solid 1px #dddddd;
}

table.tf-data-table-table > thead > tr > th:last-child {
    border-right: solid 1px #dddddd;
}

table.tf-data-table-table > tbody > tr > td {
    padding: 1px;
    padding-left: 2px;
    vertical-align: middle;
    height: 20px;
    line-height: 20px;
    /*overflow: hidden;*/
    word-break: break-all;
    white-space: normal;
}

table.tf-data-table-table > tbody > tr > td label {
    line-height: 17px;
    height: 17px;
}

table.tf-data-table-table > tbody > tr > td input {
}


.tf-data-table-each-widget-wrapper-div {
    padding-right: 10px;
}

.table {
    margin: 0px;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f3f2f1;
}

.table-hover > tbody > tr:hover {
    background-color: #eeeeee;
}

.tr-odd {
    background-color: #f3f2f1;
}

.tr-even {
    background-color: #ffffff;
}

/*
 * Sort styling
 */
table.tf-data-table-table > thead > tr > th a.sorting_a:after,
table.tf-data-table-table > thead > tr > th a.sorting_asc_a:after,
table.tf-data-table-table > thead > tr > th a.sorting_desc_a:after {
    position: absolute;
    top: 0px;
    right: 4px;
    display: block;
    font-family: 'Font Awesome 5 Free';

}

table.tf-data-table-table > thead > tr > th a.sorting_a:after {
    content: "\f0dc";
    color: #ccc;
}

table.tf-data-table-table > thead > tr > th a.sorting_asc_a:after {
    content: "\f0de";
    color: darkorange;
}

table.tf-data-table-table > thead > tr > th a.sorting_desc_a:after {
    content: "\f0dd";
    color: darkorange;
}


a.sorting_a,
a.sorting_asc_a,
a.sorting_desc_a {
    display: block;
    padding-right: 18px;
    line-height: 20px;
}

/*********************************************************/

.tf-data-table-title-div {
    color: #336699;
    padding: 0px;
    padding-left: 2px;
}


/***************************************/
/**************************************************
    TAB styles (some tab style are defined above together with group styles)
**************************************************/

/* Tab Navigation */
.tf-tab-wrapper .nav-tabs {
}

.tf-tab-body {
    background-color: #fefefe;
    border-radius: 4px;
    /*padding: 6px;*/
    border: solid 1px #d3d3d3;
    border-top-width: 0;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    min-height: 150px;
    padding-top: 1px;
}

.tf-tab-body > .tf-group-wrapper {
    padding-left: 0px;
    padding-right: 0px;
    /*border:solid 1px #efefef;*/
}

.tf-tab-title-icon {
    line-height: 26px;
    padding-right: 7px;
    color: rgba(237, 123, 0, 0.80);
}

.tf-tab-wrapper .nav-tabs > li > a {
    padding: 0px;
    margin: 0px;
    padding-left: 6px;
    padding-right: 8px;
    margin-right: 5px;
    height: 35px;
    background: #ddd;
    line-height: 28px;
    font-size: 14px;
    color: #116997;
    font-weight: bold;
    /*font-family: "MS PGothic";*/
    /*border-radius: 0;*/
    box-shadow: inset 0 -7px 7px -10px rgba(0, 0, 0, .4);
    outline: 0;
}

.tf-tab-wrapper .nav-tabs > li.active > a {
    background: #fff;
    box-shadow: none;
}

/*.tf-tab-wrapper .nav-tabs > li  span {*/
/*color:#428bca;*/
/*}*/
/*.tf-tab-wrapper .nav-tabs > li.active  span {*/
/*color:#EEA031;*/
/*}*/

.tf-tab-wrapper .nav-tabs > li.active > a:hover {
    background: #F1F1F1;
}

.upper-corners-flat {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.tf-message {
    font-size: 15px;
    font-weight: bold;
    list-style: none;
}

.tf-message-error {
    color: red;
}

.tf-message-warning {
    color: darkorange;
}

.tf-message-info {
    color: green;
}

.tf-pagination-wrapper {
    padding: 0px;
    margin: 0px;
    float: left;
}

.pagination {
    padding: 0px;
    margin: 0px;
    font-size: 12px;
    width: 100%;
}

.pagination > li > a, .pagination > li > span {
    padding: 3px 10px;
}

.pagination .currentRows span,
.pagination > .currentRows > span:hover,
.pagination > .currentRows > span:focus {
    color: darkorange;
    cursor: default;
    background-color: #fff;
}

.pagination > li > span .page-count {
    color: darkorange;
    padding-left: 15px;
    padding-right: 15px;
}

.dataListTopRightButtons {
}

.tf-data-table-table .inline-place-holder-td {
    border-width: 0px;
    padding: 0px;
    margin: 0px;
    box-shadow: inset 20px 0px 0px 0px #fff;
    padding-left: 21px;
}

.inline-place-holder-td .tf-group-wrapper {
    padding: 0px;
}

.tf-data-table-table .inline-place-holder-td:empty {
    display: none;
}

.inline-place-holder-td > div {
    background-color: #eeeeee;
}

.inline-place-holder-td > div {
    padding: 0px;
    border-width: 0px;
}

.inline-place-holder-td .searchBlock > .tf-group-body {
    border-width: 0px;
    padding: 0px;
}

.inline-button {
    border-width: 1px;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
    color: #337ab7;
}

.tf-picker-group-wrapper .tf-group-body {
    padding: 0px;
}

.popup-picker-button {
    padding: 2px;
    vertical-align: top;
    color: #337ab7;
    font-size: 13px;
}

.popup-picker-button:focus {
    outline: 0 !important;
}

.popup-picker-start {
    opacity: 0.7;
    padding-left: 4px;
    padding-right: 4px;
    width: 22px;
}

.popup-picker-clear {
    border-width: 0px;
    padding-left: 0px;
    vertical-align: middle;
    color: #999;
    opacity: 0.6;
    font-size: 10px;
}

.popup-picker-clear:hover {
    color: #333;
}

.popup-picker-display {
    background-color: #f6f6f6 !important;
}

.tf-data-table-table .inline-button-td {
    text-align: center;
    width: 25px;
    vertical-align: center;
    line-height: 14px;
}

.subpanel .btn {
    padding: 1px;
    padding-left: 3px;
    padding-right: 3px;
}

.drill-down-button {
    color: #999;
    padding: 1px;

}

.drill-down-button:focus {
    outline: none;
    color: #337ab7;
}

.tf-data-table-table .row-selector {
    margin: 0px;
    padding: 0px;
    height: 20px;
    width: 26px;
}

.tf-data-table-table .row-selector .tf-data-table-title-div {
    padding-left: 0px;
    padding-right: 0px;
    vertical-align: top;
}

.tf-data-table-table .row-selector input {
}

.tf-data-table-table .drill-down {
    background-color: #e9e9e9;
}

.tf-data-table-top-div {
    padding: 0px;
    margin: 0px;
    line-height: 0px;
}

.tf-data-table-top-div .tf-data-table-each-widget-wrapper-div {
    float: right;
}

.tf-data-table-top-div .tf-element-wrapper-div .inline-button {
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
}


.tf-data-table-bottom-div {
    padding: 0px;
    margin: 0px;
    line-height: 10px;
    padding-bottom: 5px;
}

.tf-data-table-bottom-div:empty {
    display: none;
}

.tf-data-table-top-div:empty {
    display: none;
}

.modal-body {
    padding: 0px;
    margin: 0px;
    padding: 6px;
}

.modal-header {
    padding: 5px;
}

.modal-body .tf-content {
    width: 100%;
}

.tf-modal {
}

div.tf-tooltip {
    padding-right: 16px !important;
}

th.tf-tooltip {
    padding-right: 18px !important;
}

table.tf-data-table-table > tbody > tr > td.tf-tooltip {
    padding-right: 18px;
}

.tf-tooltip-span {
    font-size: 14px;
    line-height: 18px;
    padding: 2px;
    color: #428bca;
    cursor: default;
    float: right;
}

.tf-tooltip-span-absolute {
    position: absolute;
    right: 0px;
    top: 0px;
}

div.tf-info-popup {
    padding-left: 19px !important;
}

table.tf-data-table-table > tbody > tr > td.tf-info-popup {
    padding-left: 23px;
}

div.tf-info-popup-right {
    padding-right: 23px !important;
}

#guiOptions div.tf-info-popup-right {
    padding-right: 35px !important;
}

table.tf-data-table-table > tbody > tr > td.tf-info-popup-right {
    padding-right: 28px;
}

.tf-info-popup-span {
    font-size: 12px;
    line-height: 20px;
    padding: 0px;
    padding-left: 2px;
    padding-right: 2px;
    color: #428bca;
    vertical-align: middle;
    cursor: default;
}

.tf-info-popup-span-absolute {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 20px;
}

.tf-info-popup-right > span.tf-info-popup-span-absolute {
    position: absolute;
    left: unset;
    right: 0px;
    top: 0px;
}

table.tf-data-table-table > tbody > tr > td.tf-info-popup-only {
    padding-left: 18px;
    width: 26px;
}

table.tf-data-table-table > tbody > tr > td.tf-info-popup-only > .tf-info-popup-span-absolute {
    left: 2px;
}

.tf-info-popup-span-absolute-display {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px;
}

.tf-info-popup-span-no-absolute {
    margin-right: 5px;
}

.multi-checkbox-div {
    background-color: #fff;
    height: auto;
    /*max-height: 50px;*/
    padding: 0px;
    margin: 0px;
}

.multi-checkbox-div ul {
    margin: 0;
    list-style: none;
    float: left;
    padding: 0px;
    width: 100%;
}

.multi-checkbox-div ul > li {
    padding-left: 5px;
    padding-right: 5px;
    line-height: 20px;
}

.multi-checkbox-div ul > li:hover {
    background-color: #eeeeee;
}

.multi-checkbox-div .multi-checkbox-inner-label {
    display: inline-block;
    width: calc(100% - 27px);
}

.multi-checkbox-div-display {
    border-width: 0px;
}

.multi-checkbox-div-display ul > li:hover {
    background-color: transparent;
}


.tf-dropdown-panel {
    position: absolute;
    z-index: 5000;
    display: none;
    float: left;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: visible;
    padding: 0px;
    margin: 0px;
    font-size: 14px;
    text-align: left;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.tf-dropdown-panel.combo {
    z-index: 6000;
}

.tf-dropdown-header {
    height: 25px;
    text-align: center;
    font-size: 15px;
    background-color: #428bca;
    border-color: #428bca;
    color: #fff;
    line-height: 24px;
}

.tf-dropdown-panel.xsmall {
    min-width: 150px;
}

.tf-dropdown-panel.small {
    min-width: 250px;
}

.tf-dropdown-panel.normal {
    min-width: 400px;
}

.tf-dropdown-panel.large {
    min-width: 600px;
}

.tf-dropdown-backdrop {
    opacity: 0.1;
    background-color: #eee;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 4900;
    display: none;
}

.tf-dropdown-backdrop.combo {
    z-index: 5900;
}

.tf-dropdown-panel .multi-checkbox-div {
    border-width: 0px;
}

.tf-dropdown-body > .tf-group-wrapper {
    padding: 0px;
}


.tf-dropdown-body > .tf-group-wrapper > .tf-group-body {
    padding: 0px;
}

.tf-combo-items {
    padding: 0px;
    cursor: default;
}

.tf-combo-item {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 5px;
    padding-right: 3px;
    border-bottom: solid 1px #f2f2f2;
}

.tf-combo-item:not(.tf-separator):hover {
    background-color: #eee;
}

.dd-form .tf-combo-item:hover {
    background-color: transparent;
}

.dd-form .tf-combo-items {
    background-color: #eee;
}

.dd-form .tf-label-div {
    height: 25px;
    line-height: 25px;
}

.dd-form input {
    height: 25px;
    line-height: 25px;
}

.dd-form-div {
    display: flex;
    width: 400px;
    line-height: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.dd-form-div .gui-edit-option-div {
    width: 100%;
}

.tf-dd-search-div {
    margin-bottom: 3px;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.tf-gui-popup-search-div {
    margin-bottom: 5px;
    margin-top: 5px;
    /*-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .3);*/
    /*box-shadow: 0 2px 6px rgba(0, 0, 0, .3);*/
}


.tf-separator {
    background-color: #4380c0;
    color: #fff;
    min-height: 10px;
}


.no-header-div div {
    display: none;
}

.bootstrap-datetimepicker-widget {
    z-index: 11000;
}

.bootstrap-dialog-close-button button.close {
    color: #fff;
    filter: alpha(opacity=50);
    opacity: .5;
    padding-right: 10px;
    padding-left: 50px;
}

.btn-message-close span {
    padding-right: 30px;
    padding-left: 30px;
    font-size: 14px;
    color: #428bca;
}

.modal-backdrop.in {
    opacity: 0.2;
    filter: alpha(opacity=20);
}

.modal-dialog {
    margin-top: 80px;
}

.modal-footer {
    padding: 8px;
}

@media (min-width: 992px) {
    .modal-lg {
        width: 1160px;
    }
}

.tf-message-summary {
    /*display: none;*/
    background-color: #fff;
}

.tf-message-slide {
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    background-color: #ffd;
    padding: 10px;
    z-index: 12000;
    display: none;
    border-bottom-color: #aaaaaa;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .5);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .5);
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.button-icon {
    color: #428bca;
    opacity: 0.8;
}

.button-icon-with-label {
    color: #428bca;
    opacity: 0.9;
}

.file-input {
    margin-left: 2px;
}

.file-input .input-group-addon {
    padding: 0px;
}

.file-input input {
    padding: 0px;
}

.file-input .input-group-addon {
    line-height: 20px;
}

.file-input label {
    line-height: 18px;
}

.input-group-img img {
    height: 23px;
}

.popover {
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
    background: #ffffea;
}

.tf-group-wrapper {
    margin: 0px;
    padding-top: 0px;
}

.tf-tab-wrapper {
    padding: 0px;
    margin: 0px;
    /*padding-top: 0px;*/
    /*padding-bottom: 0px;*/
}

.top-buttons-group-body-div {
    border-width: 0px;
    background-color: transparent;
    padding: 5px;
}

.top-buttons-group-wrapper-div {
    padding-bottom: 0px;
    /*padding-top: 0px !important;*/
    /*padding-bottom: 0px !important;*/
}

.tf-tab-body .top-buttons-group-wrapper-div {
    padding-top: 5px;
}

.top-buttons-group-body-div .btn {
    min-width: 90px;
}

.top-buttons-group-body-div .tf-data-div {
    border-width: 0px;
    padding: 0px;
    margin: 0px;
}

.tf-single-tab .nav-tabs {
    display: none;
}

.tf-single-tab .tf-tab-body {
    border-width: 0px;
}

.tf-single-tab {
    padding-top: 0px;
}

.tf-single-tab .top-buttons-group-wrapper-div {
    padding-top: 0px;
}

/*.subpanel .tf-page-title {*/
/*    display: none;*/
/*}*/

.subpanel .tf-page-body {
    padding: 0px;
}

.subpanel .tf-group-wrapper {
    padding-left: 0px;
    padding-right: 0px;
}

.subpanel .tf-group-wrapper:first-child {
    margin-top: 2px;
}

.carteSubpanel {
    padding-top: 10px;
}

.carteSubpanel .tf-group-body {
    background-color: #eeeeee;
}

.carteSubpanel .tf-group-title {
    background-color: transparent;
    border: 0px;
    border-bottom: solid 1px #aaaaaa;
    height: 25px;
    line-height: 25px;
}

.group-bordered {
    border: solid 2px #eeeeee;
}

.ew-data-group {
    border: solid 2px #eee;
    background-color: #eee;
}

.dw-data-group {
    border: solid 2px #eee;
    background-color: #eee;
}

.page-title-prefix {
    color: #ee7b00;
}

.required-mark:after {
    content: '*';
    font-size: smaller;
    color: red;
    padding-left: 3px;
    padding-right: 1px;
}

.searchFields {
    background-color: #eeeeee;
    margin-top: 3px;
    border: solid 1px #ddd;
    margin-bottom: 3px;
}

.subpanel .searchFields {
    margin-bottom: 0px;
    border-width: 0px;
}

.advanced-search-btn-div {
    padding-bottom: 3px;
    text-align: right;
}

.advanced-search-placeholder-div {
}

.advanced-search-toggle-btn,
.advanced-search-toggle-btn:hover,
.advanced-search-toggle-btn:focus {
    color: #FE6800;
}

.advanced-search-toggle-btn:before {
    padding-right: 3px;
}

.advanced-search-fields {
    border-top: solid 1px #dddddd;
}

.orange-text {
    color: #FE6800;
}

.blue-text {
    color: #337ab7;
}

.closed-placeholder {
    display: none;
}

.open-placeholder {
    display: block;
}

.tf-group-wrapper:empty {
    display: none;
}

.tf-element-wrapper-div:empty {
    display: none;
}

.empty-display-block:empty {
    display: block;
}

.sqlNameSelector {
    padding-left: 10px;
}

.dt-row-edited {
    background-color: orange;
}

.inline-error-placeholder-div {
    background-color: transparent;
    color: red;
    padding: 0px;
    padding-left: 2px;
    padding-bottom: 3px;
    margin: 0px;
    min-height: 1px;
    line-height: 16px;
    font-size: 90%;
    /*display:none;*/
}

.inline-error-placeholder-div:empty {
    display: none;
}


.error-field {
    border: solid 1px red;
}


.float-right {
    float: right;
}

.float-left {
    float: left;
}


/* defined in Yii css */
.footer {
    margin-top: 50px;
}

.tf-hide {
    /* overwrite display: flex by !important */
    display: none !important;
}

.tf-show {
    /* overwrite display: flex by !important */
    display: block !important;
}

.tf-visibility-hidden {
    visibility: hidden;
}

.tf-visibility-visible {
    visibility: visible;
}

/* class for the top header part (excluding the strip just below the header module icons) */
.tf-header {
    border-bottom: solid 1px #dfdfdf;
    background-color: #f8f8f8;
    height: 80px;
    display: flex;
    flex-direction: column;
}


.tf-logo-div {
    float: right;
    margin-right: 60px;
    width: 130px;
    height: 100%;
    background-image: url("../image/logo.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 130px;
}


.icons-and-logo-div {
    width: 100%;
    height: 55px;
}

.header-strip {
    flex: 1;
    width: 100%;
    background-color: #eee;
}

.top-menu-wrapper-div {
    display: flex;
    float: left;
    height: 100%;
}

.top-menu-item-div {
    padding-left: 70px;
    text-align: center;

}


.top-menu-item-div span {
    font-size: 22px;
    line-height: 34px;
}

@media (max-width: 768px) {
    .tf-header {
        height: 65px;
    }

    .top-menu-item-div {
        padding-left: 10px;

    }

    .top-menu-item-div span {
        font-size: 14px;
        line-height: 20px;
    }

    .tf-logo-div {
        margin-right: 10px;
        width: 80px;
        background-size: 70px;
    }

    .icons-and-logo-div {
        height: 73%;
    }
}

.logout-div {
    float: right;
    padding-right: 30px;
}

.tf-hello-user {
    float: right;
    padding-right: 15px;
    line-height: 25px;
    color: #666;
}

.tf-top-admin-link {
    float: right;
    padding-right: 50px;
    line-height: 25px;
    color: #116997;
}

.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #c8c9ca;
}

.btn-light:hover {
    border-color: #c8c9ca;
    background-color: #f4f5f6;
    color: #369;
}

.tf-sw-page .tf-data-div {
    background-color: #eee;
}

.tf-sw-page .top-buttons-group-wrapper-div .tf-data-div {
    background-color: #fff;
}

.tf-sw-page .tf-ew-page .top-buttons-group-wrapper-div .tf-data-div {
    background-color: #eee;
}

.tf-round-corners {
    border-radius: 4px;
}


/********************************************************/
/********       TREE styles - BEGIN  ********************/
/********************************************************/

.tf-tree-item {
    display: flex;
    cursor: default;
}

.tf-expand-icon,
.tf-item-key,
.tf-item-value {
    /*margin: 1px;*/
    margin-top: 0px;
    line-height: 20px;
    font-size: 14px;
}


#leftTree .tf-item-key,
#leftTree .tf-item-value {
    cursor: pointer;
}

.tf-item-value {
    /*placeholder for on-fly icons*/
    /*padding-right: 50px;*/
}

.tf-expand-icon {
    font-weight: bold;
    width: 20px;
    min-width: 20px;
    height: 20px;
    text-align: center;
    /* to make the toggle button unselectable*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tf-expand-icon.tf-toggle {
    background-color: #1b809e;
    color: #fff;
}

.tf-expand-icon:before {
    content: '+';
}

.tf-expand-icon.tf-item-open:before {
    content: '-';
}

div[data-toggle="open"].tf-expand-icon:before {
    content: '-';
}

.tf-expand-icon.tf-no-toggle:before {
    color: #1b809e;
    opacity: 0.5;
    font-size: 14px;
    content: '>';
}

.tf-expand-icon.tf-toggle:hover {
    background-color: #1B9DBB;
    color: #fff;
}

.tf-item-value-wrap {
    padding-left: 3px;
}

.tf-item-value-wrap.tf-no-toggle {
    display: flex;
}

.tf-item-value-wrap.tf-no-toggle span {
    color: #ef8d19;
    font-size: 10px;
    padding-right: 3px;
    padding-left: 3px;
}

.tf-editable {
    /*float: left;*/
    cursor: pointer;
}


.tf-editable:not(.tf-widget) {
    background-color: #f9f9f9;
    border: solid 1px #eee;
    padding-left: 2px;
    padding-right: 2px;
    /*float: left;*/
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.tf-item-key.tf-widget {
    background-color: #ffeb9f;
    border: solid 1px #e9d589;
    padding-left: 2px;
    padding-right: 2px;
    /*float: left;*/
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.tf-item-key.tf-widget.tf-droppable-hover {
    background-color: #e7d389;
    border-bottom: solid 3px #1B9DBB;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.tf-item-key.w-container {
    background-color: #feffe9;
    border: solid 1px #eeefd9;
}

.tf-item-key.tf-column {
    background-color: #efe9ff;
    border: solid 1px #d5c9f1;
}


.tf-item-key.w-container.tf-droppable-hover {
    background-color: #f1f2dc;
    border-bottom: solid 3px #1B9DBB;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.tf-item-key.tf-column.tf-droppable-hover {
    background-color: #d5c9f1;
    border-bottom: solid 3px #1B9DBB;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.tf-item-key.columns.tf-droppable-hover {
    border-bottom: solid 3px #1B9DBB !important;
}

.tf-item-key.children.tf-droppable-hover {
    border-bottom: solid 3px #1B9DBB !important;
}

.tf-item-key.tf-toggle {
    float: left;
}

.widget-icons-div {
    float: left;
    padding-left: 5px;
    padding-right: 15px;
    cursor: default;
    border: solid 1px transparent;
}

.tf-move, .tf-copy, .tf-add, .tf-delete, .tf-edit, .tf-copy-default {
    float: left;
    line-height: 20px;
    border-width: 0px;
    color: #EFEFEF;
    z-index: 1000;
    padding-bottom: 1px;
    font-size: 15px;
    padding-left: 18px;
}

.widget-icons-div:hover {
    border: solid 1px #ddd;
    border-radius: 3px;
}

.widget-icons-div:hover .tf-move,
.widget-icons-div:hover .tf-copy,
.widget-icons-div:hover .tf-add,
.widget-icons-div:hover .tf-delete,
.widget-icons-div:hover .tf-edit,
.widget-icons-div:hover .tf-copy-default {
    color: #ddd;
}

.tf-copy:after {
    content: "\f24d";
    font-family: 'Font Awesome 5 Free';
}

/*.tf-move:after {*/
/*    content: "\e145";*/
/*    font-family: "Material Icons";*/
/*    font-size: 28px;*/
/*}*/

.tf-move:hover, .tf-copy:hover, .tf-add:hover, .tf-edit:hover, .tf-copy-default:hover {
    color: #1bb5d3 !important;
}

.tf-delete:hover {
    color: #ffa2a8 !important;
}

.tf-delete {
    padding-left: 5px;
}

.tf-add.tf-add-only {
    padding-left: 5px;
}


.tf-move.tf-draggable-dragging, .tf-copy.tf-draggable-dragging {
    color: #1cbfde;
}

.tf-item-selected {
    border: solid 3px red !important;
}


/********************************************************/
/********       TREE styles - END  ********************/
/********************************************************/


#gui_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #903;
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    opacity: 0.2;
    z-index: 10000;
}

.search_overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 22px;
    line-height: 22px;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    color: #1ba3c1;
}

#ajaxloader {
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 10000;
    opacity: 0.3;
    display: none;
}

#ajaxloader img {
    width: 55px;
}

@media (max-width: 768px) {
    #ajaxloader img {
        width: 20px;
    }
}

.tf-dummy-subpanel, .tf-dummy-tab {
    height: 100px;
    border: solid 3px #ddd;
    line-height: 100px;
    text-align: center;
}

.search-match {
    background-color: #fdeb0c;
}

.tf-test {
    border: solid 1px red;
    color: red;

}

#guiAjaxFunctions {
    width: 400px;
}

.go-gui-btn-wrapper {
    right: 0px;
    top: 0px;
    position: absolute;
    z-index: 1;
}

.go-gui-btn-wrapper .tf-data-div {
    background-color: transparent;
}

.go-gui-btn {
    font-size: 14px;
}

.range-separator { /* - separator label between range fields*/
    font-size: 16px;
    color: #999;
    font-weight: bold;
}

.range-separator-div {
    text-align: center;
}

.searchResult .tf-number {
    text-align: right;
}

.tf-number input {
    text-align: right;
}


.tf-screen-log {
    max-height: 90vh;
    overflow: visible;
}

.title-dynamic {
    color: chocolate;
}

.tf-group-wrapper.submitFields {
    padding-bottom: 2px;
}

.tf-group-wrapper.submitFields > .tf-group-body {
    padding-top: 4px;
    padding-bottom: 6px;
}

.tf-group-wrapper.addRecordsSubmitButtons {
    padding-top: 20px;
}

/* sw - create prospect list group css */
div.prospectFieldsCreateGrp {
    border-top: solid 1px #dddddd;
    margin-top: 10px;
    padding: 10px 0px 5px;
    float: right;
}

div.prospectCreateBtn {
    line-height: 18px;
}

div.prospectMessageDisplayGrp {
    border-top: 1px;
    padding: 2em;
    background-color: #fff;
    text-align: center;
}

div.prospectMessage {
    padding: 1em 1em;
}

/* selected side menu item css */
.side-menu-item-selected {
    color: #ff8b29 !important;
}

#apiResult pre {
    border-width: 0px;
}

#apiResult #apiRequest {
    padding: 10px;
    padding-bottom: 50px;
}

#apiResult #requestDiv {
    border-bottom: solid 5px #fff;
}

#apiResult .tf-group-title {
    border-bottom: solid 1px #ddd;
}

.input-datetime-stack-icons {
    height: 20px;
}

.input-datetime-stack-icons .button-icon {
    height: inherit;
}

.input-datetime-stack-icons .fa-stack i.fa-calendar {
    font-size: 90%;
    position: absolute;
    top: 4px;
    left: 1px;
}

.input-datetime-stack-icons .fa-stack i.fa-clock {
    font-size: 65%;
    position: absolute;
    bottom: 2px;
    right: 1px;
}

.tf-top-env-info-div {
    float: right;
    height: 50px;
    padding-top: 10px;
    font-size: 25px;
}


/*
Calendar  Calendar Calendar
Calendar  Calendar Calendar
Calendar  Calendar Calendar
Calendar  Calendar Calendar
Calendar  Calendar Calendar
Calendar  Calendar Calendar
 */

@media screen, print {
    .calWrapperDiv > div {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }


    /*  Calendar Common ****************************/
    /*  Calendar Common ****************************/
    /*  Calendar Common ****************************/
    .calDataSlotDiv {
        border: solid 1px #ccc;
        padding: 3px;
        margin: 0px;
        height: 100%;
        overflow: hidden;
        font-size: smaller;
        box-shadow: 3px 3px 3px #dddddd;
        cursor: pointer;
    }

    .calDataSlotDiv:hover {
        border-style: outset;
        cursor: pointer;
    }

    .calDataSlotDiv1 {
        background-color: #ebf9f7 !important;
    }

    .calDataSlotDiv2 {
        background-color: #f8eaff !important;
    }

    .calDataSlotDiv3 {
        background-color: #ffecde !important;
    }

    .calDataSlotDiv4 {
        background-color: #f2ffd0 !important;
    }

    .calDataSlotDiv5 {
        background-color: #ffffdf !important;
    }

    .calDataSlotCancelled {
        background-color: #ffcacf !important;
    }

    .calDataSlotCancelled::before {
        content: "\e014";
        color: red !important;
        font-family: 'Glyphicons Halflings';
        line-height: 25px;
        padding-right: 10px;

    }

    .calDataSlotFurikaeMoto {
        background-color: #ffcacf !important;
    }

    .calDataSlotFurikaeMoto::before {
        content: "\e093";
        color: red !important;
        font-family: 'Glyphicons Halflings';
        line-height: 25px;
        padding-right: 10px;
    }

    .calDataSlotFurikaeSaki::before {
        content: "\e094";;
        color: green !important;
        font-family: 'Glyphicons Halflings';
        line-height: 25px;
        padding-right: 10px;
    }

    .calTargetCancelled::before {
        content: "\e014";
        color: red !important;
        font-family: 'Glyphicons Halflings';
        font-size: 10px;
        padding-right: 5px;
        font-weight: lighter;
    }


    .calEventNameDiv {
        color: #0d177a;
        font-weight: bolder;
    }

    .calTeacherNamesDiv {
        color: #d36a27;
    }

    .calStudentNamesDiv {

    }

    .calClassroomNamesDiv, .calStudentCountCapacityDiv {
        color: #219915;
    }

    .calDataLineDiv {
        white-space: nowrap;
        padding-top: 0px;
        margin: 0px;
        border: 0px;
    }


    .calWrapperDiv {
        /*border: solid 1px #ccc;*/
        margin: 0;
        background-color: #fff;
        /*padding-top: 10px !important;*/
    }

    .calTableDiv {
        padding: 0px;
        margin: 0px;
        border: 0px;
    }

    .calButtonsDiv {
        background-color: #eee !important;
        padding: 10px;
        padding-right: 80px;
    }

    .calButtonsDiv button {
        width: 100px;
    }

    .calButtonsDiv select {
        width: 100px;
    }

    .calButtonsDiv > div {
        float: right;
        width: max-content;
        padding-right: 30px;
    }


    .calTitleDiv {
        border: solid 1px #ccc;
        border-bottom: 0px;
        background-color: #eee;
        display: flex;
    }

    .calTitleDiv > div {
        height: 30px;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 40px;
    }

    .calTitleLeftBtnDiv {
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: auto;
        text-align: left;
        margin: 0;
    }

    .calTitleDiv span {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .calBtnSpanLeft, .calBtnSpanRight {
        color: #ff7d3f;
        width: 50px;
        line-height: 20px;
        cursor: pointer;
    }

    .calBtnSpanLeft:hover, .calBtnSpanRight:hover {
        border: outset 1px #ddd;
        /*box-shadow: 1px 1px 1px #dddddd;*/
    }

    .calBtnSpanLeft {
        left: 10px;
    }

    .calBtnSpanRight {
        right: 10px;
    }

    .calTitlePrintBtnRightBtnDiv {
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: auto;
        text-align: right;
        padding-right: 0px !important;

    }

    .calTitleTextDiv {
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: auto;
    }

    .calTitleTextDiv > span {
        position: absolute;
        top: 50%;
        left: 0px;
        width: 100%;
        text-align: center;
        line-height: 30px;
        font-size: 15px;
        font-weight: bold;
        padding: 0px;
    }


    .calTitlePrintBtnRightBtnInnerDiv {
        display: flex;
        height: 100%;
        padding: 0px;
        margin: 0px;
    }

    .calTitlePrintBtnDiv {
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: auto;
        text-align: right;
        padding: 0px;
        margin: 0px;
    }

    .calTitleRightBtnDiv {
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: auto;
        text-align: right;
        padding: 0px;
        margin: 0px;
    }

    .calPrintBtnSpan {
        padding: 5px;
        padding-left: 15px;
        padding-right: 15px;
        cursor: pointer;
        right: 0px !important;
        color: #669;
    }

    .calPrintBtnSpan:hover {
        border: outset 1px #ddd;
    }

    /*  Daily Calendar */
    /*  Daily Calendar */
    /*  Daily Calendar */
    .calDailyTable {
        table-layout: fixed;
        width: 100%;
        border: solid 1px #ccc;
        border-bottom: solid 1px #eaeaea;
    }

    .calDailyTable > td {
        border-collapse: collapse;
    }

    .calDailyHoursLabelTd {
        border: solid 1px #ccc;
        width: 125px;
        text-align: center;
    }

    .calDailyHoursHourTd {
        border: solid 1px #ccc;
        font-size: smaller;
        text-align: center;
        vertical-align: center;
        height: 25px;
    }

    .calDailyEmpty {
        height: 50px;
    }

    .calDailyEmptyTd {
        border-left: solid 1px #eaeaea;
        border-bottom: solid 1px #ddd;
        background-color: #fff;
    }

    .calDailyEmptyTd.calDailyTdBorder {
        border-left: solid 1px #caa;
    }

    .calDailyDataLabelTd {
        background-color: #fffbd2 !important;
        border: solid 1px #ddd;
        padding: 5px;
        overflow-x: hidden;
    }

    .calDailyDataLabelTdCourse {

    }

    .calDailyDataLabelTdTeacher {

    }

    .calDailyDataLabelTdClassroom {

    }

    .calDailyDataSlotTd.calDailyTdBorder {
        border-left: solid 1px #caa;
    }

    .calDailyDataSlotTd > div {

    }

    .calDailyDataSlotTd {
        height: 75px;
    }


    /* Weekly Calendar */
    /* Weekly Calendar */
    /* Weekly Calendar */
    .calWeeklyDaysWrapperDiv {
    }

    .calWeeklyOneDayWrapperDiv {
        display: flex;
        padding-top: 5px;
    }

    .calWeeklyDayLabelDiv {
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: 40px;
        border: solid 1px #ddd;
        text-align: center;
        background-color: #eee;
        cursor: pointer;
    }

    .calWeeklyDayLabelDiv > span {
        position: absolute;
        top: 50%;
        left: 0px;
        width: 40px;
        text-align: center;
        font-size: 10px;
    }

    .calWeeklyDayDataDiv {
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: auto;
    }

    .calWeeklySeparator {
        position: relative !important;
        padding-left: 20px;
        padding-right: 20px;
    }

    /*  Monthly Calendar */
    /*  Monthly Calendar */
    /*  Monthly Calendar */
    .calMonthlyRowsWrapperDiv {

    }

    .calMonthlyRowWrapperDiv {
        display: flex;
    }

    .calMonthlyDayWrapperDiv, .calMonthlyDayLabelDiv {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        overflow-x: hidden;
        min-height: 100px;
        padding: 3px;
        width: 100px; /* set any width to keep the grid layout aligned */
        flex-wrap: nowrap;
    }

    .calMonthlyDayWrapperDiv {
        padding-top: 20px;
    }

    .calMonthlyDayLabelDiv {
        min-height: 30px !important;
        text-align: center;
        line-height: 30px;
        vertical-align: center;
        height: 30px !important;
        background-color: #eee;
        padding: 0px;
        margin: 0px;
    }

    .calMonthlyRowLabelDiv {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 30px;
        box-shadow: 1px 0 0 0 #ccc,
        0 1px 0 0 #ccc,
        1px 1px 0 0 #ccc, /* Just to fix the corner */ 1px 0 0 0 #ccc inset,
        0 1px 0 0 #ccc inset;
        text-align: center;
        padding: 0px;
        margin: 0px;
        background-color: #eee;
        cursor: pointer;
        font-size: 10px;
        color: #999;
    }

    .calMonthlyRowLabelDivFirst {
        line-height: 30px;
        cursor: auto;
    }

    .calMonthlyRowLabelDiv > span {
        position: absolute;
        top: 48%;
        left: 10px;
    }

    .calMonthlyInactiveDayDiv {
        background-color: #f6f6f6 !important;
    }

    .calMonthlySaturdayDiv {
        /*background-color: #eee;*/
    }

    .calMonthlySundayDiv {
        /*background-color: #eee;*/
    }

    .calMonthlyDataSlotDiv {
        padding: 2px;
        margin-bottom: 3px;
        cursor: pointer;
    }

    .calMonthlyDataSlotDiv {
        padding: 2px;
        margin-bottom: 3px;
        overflow-x: hidden;
        height: auto;
        box-shadow: none;
    }

    .calMonthlyDataSlotDiv:hover {
        border-style: outset;
    }


    .calMonthlyDayLinkDiv {
        position: absolute;
        top: 2px;
        right: 4px;
        padding: 0px;
        margin: 0px;
        cursor: pointer;
        padding-left: 20px;
    }

    .calMonthlyDayLinkDiv:hover {
        color: #1B9DBB;
    }

    .calMonthlySlotHourDiv {
        font-weight: bolder;
    }


    /*  Calendar edit popup  */
    /*  Calendar edit popup  */
    /*  Calendar edit popup  */
    /*  Calendar edit popup  */
    .calPopupBtnDiv {
        width: auto !important;
        padding-left: 20px !important;
    }

    .calPopupBtnDiv .btn {
        min-width: 50px;
    }

    .calPopupInlineDelBtnTd {
        padding-left: 3px !important;
        padding-right: 3px !important;
        width: 30px;
    }

    .calPopupInlineCancelBtnTd {
        padding-left: 3px !important;
        padding-right: 3px !important;
        width: 30px;
    }

    .calPopupEventNameDiv {
        font-size: 20px;
        font-weight: bold;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .calPopupList th {
        display: none;
    }

    .calPopupList {
        border-top: solid 5px #fff;
    }

    .calPopupEventNameDiv.calDataSlotFurikaeMoto::before {
        font-size: 14px;
        padding-right: 10px;
        padding-left: 5px;
    }

    .calPopupEventNameDiv.calDataSlotCancelled::before {
        font-size: 14px !important;
        padding-right: 10px;
        padding-left: 5px;
    }

    .calPopupEventNameDiv.calDataSlotFurikaeSaki::before {
        font-size: 14px;
        padding-right: 10px;
        padding-left: 5px;
    }

}

@media screen {
    .calMonthlyDayWrapperDiv, .calMonthlyDayLabelDiv {
        box-shadow: 1px 0 0 0 #ccc,
        0 1px 0 0 #ccc,
        1px 1px 0 0 #ccc, /* Just to fix the corner */ 1px 0 0 0 #ccc inset,
        0 1px 0 0 #ccc inset;
    }
}

@media print {
    .calMonthlyDayWrapperDiv, .calMonthlyDayLabelDiv {
        border:solid 1px #f6f6f6 !important;
    }
}
/*****************************************************/

.tf-tracker-link {
    padding-left:25px;
    color: #337ab7;
    height: 25px;
    border:0px;
    cursor: pointer;
    max-width: 200px;
    /*padding-top: 7px;*/
    line-height: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Font Awesome 5 Free";
}
.tf-tracker-link:hover {
}
.tf-tracker-link::before {
    color:#d76d0c;
    padding-right:3px;
}
.tf-tracker-link.glyphicon::before {
    font-family: 'Glyphicons Halflings' !important;
}
.tf-tracker-link.glyphicon {
    top:0px;
}
.tf-tracker-div {
    height: 25px;
    float:left;
}

.tf-tracker-div a {
    font-weight: normal;
    height: 25px;
    line-height: 25px;
}

.tf-tracker-link.glyphicon a {
    position: relative;
    top:-2px;
}

.tf-tracker-label {
    cursor: pointer;
    color:black;
}