#chromaspot_viewer {
   
    font-size: 12px;
}
#chromaspot_viewer h2 {
	width:100%; 
	font-size:16px;
	font-weight:500;
	color:#000;
        line-height:30px;
	
}
#chromaspot_viewer h3 {
	width:100%; 
	font-size:14px;
	font-weight:normal;
	color:#07a1e2;
	
}
#chromaspot_viewer p, #chromaspot_viewer h1,#chromaspot_viewer  h2,#chromaspot_viewer h3, #chromaspot_viewer h4,#chromaspot_viewer  h5,#chromaspot_viewer h6  {
	padding:0px;
        clear:both;
	margin-bottom:10px;
}
#range_list div {
    float:left;
}
#chromaspot_viewer p {
    font-size:12px;
}
.ui-helper-reset {
    line-height:1.1;
    font-size:0.8em;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br{
    border-radius:0px;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
border-color:#fff;
   background:#fff;;
    font-weight: normal;
    color: #0095FF;
    cursor:pointer;
}
/* Multiselect */
.ui-multiselect {text-align:left; float:left;background:#D9DADA;border:none;margin-right:10px;height:30px;width:179px;padding:0px;padding-left:10px; overflow:hidden}
.ui-multiselect .ui-multiselect-open { float:right }
.ui-multiselect-menu { display:none; box-sizing:border-box;  border:1px solid #ccc; position:absolute; text-align:left; z-index: 99999999999; width:auto; height:auto; padding:3px;  background:#fff; width:250px;}
.ui-multiselect-menu.ui-multiselect-listbox {position:relative; z-index: 0;}
.ui-multiselect-header { text-align:center; display:block; box-sizing:border-box; position:relative; height:25px; line-height:25px; background:#8f0787}
.ui-multiselect-header > ul { list-style:none; margin:0px; padding:0px; }
.ui-multiselect-header li { display:inline-block;   margin:0 10px; list-style:none;}
.ui-multiselect-header a { text-decoration:none; color:#fff;}
.ui-multiselect-header a:hover {  cursor: pointer; color:#eee;}
.ui-multiselect-header .ui-icon { float:left; }
.ui-multiselect-header .ui-multiselect-close { float:right; margin-right:0; text-align:right; }
.ui-multiselect-checkboxes { display:block; box-sizing:border-box; position:relative; overflow:auto; width: auto; border: 0; padding: 4px 0 8px;}
.ui-multiselect-checkboxes li:not(.ui-multiselect-optgroup) { clear:both; font-size:0.9em; list-style: none; padding-right:0px;}
.ui-multiselect-checkboxes li:not(.ui-multiselect-optgroup):hover{background:#eee;}
.ui-multiselect-checkboxes label { border:1px solid transparent; cursor:default; display:block; padding:3px 1px 3px 21px; text-indent: -20px;}
.ui-multiselect-checkboxes input { position:relative; top:1px; cursor: pointer; margin-right:5px;}
.ui-multiselect-checkboxes img { height: 30px; vertical-align: middle; margin-right: 3px;}
.ui-multiselect-grouplabel { border-bottom:1px solid #ccc; display:block; font-weight:bold; margin:1px 0; padding:3px;  text-decoration:none; color:#000;}
.ui-multiselect-selectable { cursor: pointer; }
.ui-multiselect-optgroup > ul { padding: 3px; }
.ui-multiselect-columns { display: inline-block; vertical-align: top; }
.ui-multiselect-collapser { float: left; padding: 0 1px; margin: 0; }
.ui-multiselect-collapsed > ul { display:none }
.ui-multiselect-single .ui-multiselect-checkboxes input { left:-9999px; position:absolute !important; top: auto !important; margin-right:5px; }
.ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important; text-indent: 0 !important; }
.ui-multiselect.ui-multiselect-nowrap { white-space: nowrap }
.ui-multiselect.ui-multiselect-nowrap > span { display: inline-block }
.ui-multiselect-checkboxes.ui-multiselect-nowrap li,
.ui-multiselect-checkboxes.ui-multiselect-nowrap a { white-space: nowrap }
.ui-multiselect-measure > .ui-multiselect-header,
.ui-multiselect-measure > .ui-multiselect-checkboxes { float: left; }
.ui-multiselect-measure > .ui-multiselect-checkboxes { margin: 4px; overflow-y: scroll; }
.ui-multiselect-resize { border: 2px dotted #00F }
.ui-multiselect-header .ui-helper-reset li:first-child{
	float:left;
}
.ui-multiselect-header .ui-helper-reset li:nth-child(2){
	float:right;
}

.ui-state-active {
	background:#eee;
}

#chromaspot_header button {
    margin-bottom:10px;
}
#chromaspot_header{

    border-bottom:1px solid #B0B0B0;
    margin-bottom:15px;
    position:relative;
    padding-bottom:10px;
}
.top_bar_label {
    display:inline-block;
    margin-right:5px;

}
.triangle_picker_a {
    display:block;
    border-right:1px solid #fff;
    float:left;
    margin-bottom:10px;
}

#chromaspot_picker_tabs{
    width:580px;

    padding:10px;
    float:left;
}

#chromaspot_picker {
    width:480px;

    height:535px;
    padding:0px;
    float:left;
}
#chromaspot_sample_field{
    width:185px;
    height:500px;
    float:left;
     margin-left:20px;
      margin-right:20px;
  
}

.ui-slider-horizontal {height:6px;}
.ui-slider-horizontal .ui-slider-handle {
    top: -6px;
    background:#fff;
    border:2px solid #999;
    border-radius:9px;
    height:14px;
    width:14px;

}
 .grid_table {
            width:480px;
            height:480px;
            border-collapse:collapse;
            background:none;
        }
        .grid_table td {
            border:1px solid #ccc;
        }
     
.slider_menu {
            width:100%;
            height:35px;
            float:left;
        }
        #tab_list label {
            display:inline-block;
            margin-right:5px;
        }
#tab_list select {
    width:200px;
   
}
#search_input {
     -webkit-appearance: none;
     height:18px;
     width:160px;
     padding:5px;
     margin-right:5px;
}
#tab_list {
     padding:0px;
    border:none;
    margin:0px;
    position:absolute;
    top:30px;
    left:0px;
}
#tab_select { width:150px;}
#range_list {
    padding:0px;
    border:none;
    text-align: left;
    margin:0px;
    margin-top:10px;
}
#range_list .ui-multiselect {
    float:none;
}
#total_samples {
    position:absolute;
    bottom:5px;
    left:210px;
    color:#333;
    font-size:9px;
}
#chromaspot_scratchpad_field {
    width:185px;
    height:500px;
    float:left;
 
}
#start_section {
    background:#F0F0F0;
     padding-top: 100px;
}
#top_submenu_new .nav_gray_bar {
    border-bottom:0px !important;
}
.chromaspot_fieldlist_header {
    line-height:16px;
    margin-bottom:14px;
    float:left;
    margin-top:5px;
    font-size:14px;
}
#chromaspot_samples {
    background: #fff;
    width:185px;
    clear:both;
    overflow-y: scroll;
    height:480px;
   
}

#chromaspot_scratchpad {
    background: #fff;
    width:185px;
    clear:both;
    height:480px;
    overflow-y: scroll;
}
.chs_patch, .chs_patch2 {
    padding:2px;
    padding-bottom:0px;
}
#chromaspot_samples .chs_patch:last-child, #chromaspot_samples .chs_patch2:last-child{
    padding-bottom:2px;
}
.chs_patch_name {
    line-height:16px;
    font-size:10px;
}
.chs_patch_rgb_preview {
    height:62px;
    cursor:pointer;
    width:100%;
}
.chs_patch_rgb_preview2 {
    width: 20px;
    float:left; 
    margin-right:5px;
}
#patch_viewever {
   margin-left:20px;

   height:500px;
    width:350px;
    float:left;
}
.scratchpad_patch, .scratchpad_patch2 {
    padding:2px;
}
.scratchpad_patch_name {
    line-height:16px;
    font-size:10px;
}
.scratchpad_patch_rgb_preview {
    height:60px;
    width:100%;
    cursor:pointer;
}
.scratchpad_patch_rgb_preview2 {
    width: 90px;
    float:left; 
    margin-right:5px;
}
.chromaspot_viewmode, .scratchpad_viewmode {
    float:right; 
    width:20px;
    cursor:pointer;
}
.add_icon {
    font-family: 'icomoon';
    float:right; 
    color:#999;
    font-size:9px;
    cursor:pointer;
    margin-right:5px;
}
.add_icon:after{
    content:'\E70A';
}
.remove_icon {
    font-family: 'icomoon';
    float:right; 
    color:#999;
    cursor:pointer;
    margin-right:5px;
}
.remove_icon:after{
    content:'\E70F';
}
.add_icon:hover,  .remove_icon:hover {
    color:#000;
}
.viewmode_2, .viewmode_1 , .viewmode_3{
    font-family:'icomoon';
    font-size:20px;
    color:#999;
}
#ase_tooltip {
    display:none;
    font-size:12px;
    color:#999;
    clear:both;
    margin-bottom:10px;
}
.download_scratchpad {
     font-family:'icomoon';
    font-size:22px;
    color:#000;
    cursor:pointer;
    float:right;
}
.selected_viewmode {
    color:#000;
}
.viewmode_2:after {
    content:'\02C6';
}
.viewmode_1:after {
    content:'\00F9';
}
.viewmode_3:after {
    content:'\00FA';
}
.download_scratchpad:after{
    content:'\0161';
}
.ui-state-active {
    background-color:#fff;
    font-weight:normal;
    color:#000;
}
.ui-multiselect {
    border:1px solid #ccc;
    background:#fff;
    border-radius: 0px;
}
.sqr_over {
    border: 2px solid #000;
    width: 16px !important;
    height: 16px !important;
    transform: translate(-4px, 4px);
    z-index:100;
    
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid #666;
    background: #eee;;
    font-weight: bold;
    color: #000;
}
@media (max-width: 1200px) {
    #patch_viewever {
        clear:both;
        width:100%;
        margin:0px;
        margin-top:10px;;
        margin-bottom:10px;
        height:auto;
           
    }
}

@media (max-width: 700px) {
    #chromaspot_sample_field {
        clear:both;
        margin:0px;
  
    }
    #range_list {
        width:100%;
    }
    #chromaspot_left_field , #chromaspot_scratchpad{
        width:100%;
    }
    #chromaspot_sample_field  {
        width:40%;
    }
    #chromaspot_picker {
        width:90%;
        padding:0%;
        margin:5%;
        height:auto;
    }
    #chromaspot_sample_field {
        margin-right:0px;
    }
    #patch_viewever {
        clear:both;
        width:100%;
        margin:0px;
        margin-top:5%;
        margin-bottom:5%;
        height:auto;
           
    }
    #patch_preview_sample_desc  {
        width:100%;
    }
    #chromaspot_scratchpad_field, #chromaspot_scratchpad {
        clear:none;
    }
    #chromaspot_scratchpad_field {
        float:right;
    }
    .top_bar_label {
        font-size:8px;
    }
    #search_input {
        width:150px;
    }
}