/* main menu icon */
#swf_wrapper #menu ul li.recatest a { background-image: url("../images/recatest-menu-icon.png"); }


table.rec_test_case_details td.header,
table.rec_test_run_details td.header {
   background-color: #5e686b;
   color: #ffffff !important;
}

div.test_case_step {
   position: relative;
   margin-bottom: 20px;
   padding: 20px;
   background-color: rgb(237, 237, 237);
}

div.test_case_step h3 {
   font-size: 110%;
   color: #3398db !important;
}

div.test_case_step_actions {
   position: absolute;
   top: 10px;
   right: 10px;
}

ul.recorder-config-steps,
ul.rec-instructions {
   margin-top: 15px;
   margin-left: 10px;
}

ul.recorder-config-steps li,
ul.rec-instructions li {
   list-style-type:decimal;
   margin-left: 20px;
   margin-bottom: 5px;
}

a.rec_instruction_href {
   margin-right: 10px;
}

h2.function {
   text-transform:none !important;
   color: #3398db !important;
   font-size: 130% !important;
   margin-top: 20px !important;
}

#successRateChart {
    margin: 0 auto;
    max-width: 400px;
}

.chart-container {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1200px;
}

.chart {
    width: 33%;
    height: 200px;
}

.csv-upload-preview {
   margin: 10px 0;
   padding: 10px;
   background: #f5f5f5;
   border: 1px solid #ddd;
}

.csv-upload-preview .file-name {
   font-weight: bold;
   color: #3398db;
}

.csv-upload-preview .file-size {
   color: #666;
   font-size: 0.9em;
}

.sections-tree {
   margin: 10px;
   padding: 10px;
   border: 1px solid #e0e0e0;
   border-radius: 4px;
   background: #fff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sections-tree h3 {
   margin: 0 0 15px 0;
   padding-bottom: 10px;
   border-bottom: 1px solid #e0e0e0;
   color: #333;
   font-size: 1.1em;
}

.sections-tree h3 i {
   margin-right: 8px;
   color: #666;
}

.section-item {
   padding: 4px 5px;
   cursor: pointer;
   border-radius: 3px;
   transition: all 0.2s ease;
   position: relative;
}

.section-item:hover > .toggle i,
.section-item:hover > .section-name {
   color: #3398db;
}

.section-item:hover::before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background-color: #f0f7ff;
   z-index: -1;
   border-radius: 3px;
}

.section-item .toggle {
   cursor: pointer;
   margin-right: 8px;
   width: 20px;
   display: inline-block;
   text-align: center;
}

.section-item .toggle i {
   font-size: 1.1em;
   color: #666;
   transition: all 0.2s ease;
   width: 16px;
}

.fa-folder-open {
   color: #3398db !important;
}

.children {
   display: none;
   margin-left: 10px;
}

.section-name {
   color: #333;
   font-size: 0.95em;
   vertical-align: middle;
   transition: all 0.2s ease;
}

.root-section {
   pointer-events: none;  /* Disable clicking on the root section itself */
}

.root-section > .children {
   display: block !important;  /* Always show root's children */
   pointer-events: auto;  /* Re-enable clicking for children */
}

.root-section > .toggle i {
   color: #3398db !important;  /* Keep the root folder icon blue */
}