/******** Color Picker Panel ********/

.color-picker-columns { gap: 72px; }
.color-picker-columns > div { flex: 1; }
.color-selection-columns { gap: 24px; }
.color-selection { min-width: 550px; }
.color-picker-columns .cp_panel-title { color: var(--text-text-primary, #222); font-family: Inter; font-size: 21px; font-style: normal; font-weight: 600; line-height: 33px; letter-spacing: -0.116px; margin-bottom: 24px; }

.sp-container { border: 0; background-color: transparent; display: block; overflow: visible; z-index: 5; }
.sp-container.sp-flat { height: 100%;}
.sp-picker-container { border: 0; padding: 0; margin: 0; width: 300px; height: 100%; float: none; }
.sp-top { margin: 0; height: 100%; }
.sp-slider { height: 40px; top: -5px; left: 0; right: auto; border: 0; opacity: 1; background: #FFFFFF; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); border-radius: 99px; width: 9px; }
.sp-fill { padding-top: 0; height: 440px; }
.sp-dragger { width: 15px; height: 15px; border: 2px solid #FFFFFF; background-color: transparent; border-radius: 50%; }
.sp-color { border-radius: 6px 6px 0 0; border: 0; overflow: hidden; right: 0; bottom: 32px; }
.sp-hue { border-radius: 0 0 6px 6px; left: 0; right: 0; top: auto; bottom: 0; height: 32px; border: 0; background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); }

.main_color { position: relative; height: 178px; overflow: hidden; margin-bottom: 25px; border-radius: 10px 10px 6px 6px; display: flex; flex-direction: row; align-items: flex-end; }
.main_color .main_color_foot { width: 100%; border: 1px solid var(--table-border, #CED4DA); background: var(--color-grays-white, #FFF); border-radius: 0; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; position: relative;}
.main_color .main_color_foot .main_color_tag { color: var(--color-grays-gray-04, #869298); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 700; line-height: 16px; letter-spacing: 0.8px; text-transform: uppercase; }
.main_color .main_color_foot input { color: var(--text-text-primary, #222); text-transform: uppercase; text-align: center; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 400; line-height: 16px; letter-spacing: -0.081px; border: 0px solid transparent;}
.main_color .main_color_foot .copy_link { text-decoration: none; }

.copied_link { position: absolute; background: white; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; left: 0px;}

#color_codes_list { list-style: none; margin: 0 -7px 15px; padding: 0; }
#color_codes_list:after { content: ""; display: block; clear: both; }
#color_codes_list li { margin-bottom: 10px; float: left; width: 50%; padding: 0 7px; }
#color_codes_list div { position: relative; border-radius: 8px; border: 1px solid #CED4DA; background: #FFF; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
#color_codes_list span { color: #869298; font-size: 16px; font-style: normal; font-weight: 700; line-height: 16px; letter-spacing: 0.8px; text-transform: uppercase; }
#color_codes_list input { color: #222; text-align: right; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 400; line-height: 16px; letter-spacing: -0.081px; padding: 0px; width: 100%;  border: 0px solid transparent !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none;}

.color-picker-columns .btn_save { padding: 16px 32px; border-radius: 4px; background: #26B16D; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; color: #FFF; text-align: center; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 600; line-height: 28px; letter-spacing: -0.144px; text-decoration: none; }
.color-picker-columns .btn_save:hover {background-color: var(--Secondary-Green-Darkest)!important; border-color: var(--Secondary-Green-Darkest)!important;}

.save-color { display: flex; gap: 40px; flex-direction: column; }
.saved_colors ul { list-style: none; padding: 0; margin: 0 -15px; display: flex; flex-wrap: wrap; }
.saved_colors ul li {  margin-bottom: 40px; padding: 0 15px; width: 117px; position: relative; font-family: inherit; font-weight: normal; font-size: 14px; line-height: 28px; text-align: center; color: #FFFFFF; }
.saved_colors ul li span {  display: flex; position: absolute; text-transform: uppercase; left: 0px; width: 100%; justify-content: center; bottom: -18px; color: var(--text-text-primary, #222); text-align: center; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: 100%; letter-spacing: -0.045px; gap: 4px; align-items: center; padding: 0 15px;}
.saved_colors ul li span::after {  display: block; width: 12px; height: 12.75px; background-image: url('/wp-content/themes/fx/assets/img/tools/color-picker/copy-link.svg'); background-repeat: no-repeat; background-size: 100%;}
.saved_colors ul li span:hover::after { content: ''; }

.saved_colors ul li:before { content: ""; padding-bottom: 100%; display: block; background-color: #F2F2F2; border-radius: 6px; }
.saved_colors ul li:after { content: "\e90d"; font-family: 'cp-icomoon' !important; width: 100%; line-height: 1; font-size: 20px; position: absolute; top: 50%; left: 0; margin-top: -10px; text-align: center; color: #CED4DA; }
.saved_colors ul li._addedd:after { display: none; }
.saved_colors ul li._addedd:before { background-color: transparent; }
.saved_colors ul li > div { display: flex; align-items: flex-start; justify-content: flex-end;  background-color: #FFFFFF; border-radius: 6px; position: absolute; left: 15px; right: 15px; top: 0; height: 100%; }
.saved_colors ul li .copied { position: absolute;background: white;left: 0px;width: 100%; }
.saved_colors ul li .color_close_btn { right: 2px; top: 2px; background: url('/wp-content/themes/fx/assets/img/tools/color-picker/close-button.svg') no-repeat center; font-size: 14px; opacity: 0.5; color: #fff; text-decoration: none; width: 31px; height: 31px; display: block; text-indent: -99999px; }
.saved_colors ul li .color_close_btn:hover { opacity: 1; }
.saved_colors ul li._next, .saved_colors ul li._addedd { cursor: pointer; }
.saved_colors ul li._next::after { color: #697076; }

#generateColorSchemeBlock select {color: #222!important; -webkit-appearance: auto!important; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 600; line-height: 100%; /* 18px */ letter-spacing: -0.081px; } 
.color-resutls { padding: 30px 0px 0px 0px; }
.color-resutls ul { list-style: none; padding: 0; margin: 0 -15px; display: flex; flex-wrap: wrap; }
.color-resutls ul li { cursor: pointer; margin-bottom: 40px; padding: 0 15px; width: 117px; position: relative; font-family: inherit; font-weight: normal; font-size: 14px; line-height: 28px; text-align: center; color: #FFFFFF; }
.color-resutls ul li:before { content: ""; padding-bottom: 100%; display: block; background-color: #F2F2F2; border-radius: 6px; }
.color-resutls ul li:not(._added) > div:after { content: "\e90d"; font-family: 'cp-icomoon' !important; width: 100%; line-height: 1; font-size: 20px; position: absolute; top: 50%; left: 0; margin-top: -10px; text-align: center; color: #CED4DA; }
.color-resutls ul li > div { display: flex; align-items: center; justify-content: center; background-color: #FFFFFF; border-radius: 6px; position: absolute; left: 15px; right: 15px; top: 0; height: 100%; }
.color-resutls ul li span {  display: flex; position: absolute; text-transform: uppercase; left: 0px; width: 100%; bottom: -18px; color: var(--text-text-primary, #222); text-align: center; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: 100%; letter-spacing: -0.045px; gap: 4px; align-items: center; padding: 0 15px; justify-content: center; }	
.color-resutls ul li span .copied { position: absolute;background: white;left: 0px;width: 100%; }
.color-resutls ul li span::after {  display: block; width: 12px; height: 12.75px; background-image: url('/wp-content/themes/fx/assets/img/tools/color-picker/copy-link.svg'); background-repeat: no-repeat; background-size: 100%;}
.color-resutls ul li span:hover::after { content: ''; }

#generateColorSchemeBlock { display: flex; flex-direction: row; gap: 24px; justify-content: space-between; align-items: center; }
#generateColorSchemeBlock .cp_panel-title { margin-bottom: 0px; }

@media screen and (max-width: 1100px) { 
	.color-picker-columns { flex-direction: column; gap: 40px; } 
}
@media screen and (max-width: 750px) { 
	.color-selection-columns { flex-direction: column; } 
	.color-selection { min-width: 100%; } 
	.sp-picker-container { width: 100%; } 
	.main_color .main_color_foot { width: 100%; } 
	#generateColorSchemeBlock { display: flex; flex-direction: column; gap: 8px; justify-content: space-between; align-items: flex-start; } 
}

/******** End of Color Picker Panel ********/

#color_sheme_tab .select2-container {display: flex; flex: 1 1 100%; align-self: stretch;}
#color_sheme_tab .select2-container .select2-results__options {max-height: none !important; overflow-y: visible !important;}
#color_sheme_tab .select2-container .selection {display: flex; flex: 1 1 100%; width: 100%;}
#color_sheme_tab .select2-container .selection .select2-selection--single {height: 100%; padding: 16px; border-radius: 8px; border: 1px solid #ABB9C2; width: 100%; display: flex; align-items: center; justify-content: space-between;}
#color_sheme_tab .select2-container .selection .select2-selection--single .select2-selection__rendered {color: var(--text-text-primary, #222); font-family: Inter; font-size: 18px; font-style: normal; font-weight: 600; line-height: 100%; letter-spacing: -0.081px; padding-left: 0px;}
#color_sheme_tab .select2-container--open .select2-dropdown--below {border-top-left-radius: 4px; border-top-right-radius: 4px; margin-top: 2px; border-top: 1px solid gray; padding-top: 0px;}
#color_sheme_tab .select2-container .selection .select2-selection--single .select2-selection__arrow {display: none;}
#color_sheme_tab .select2-container .selection .select2-selection--single::after {content: ""; width: 16px; height: 9px; display: flex; background-image: url('/wp-content/themes/fx/assets/img/tools/color-picker/select-caret.svg'); background-repeat: no-repeat; background-size: 100%;}
#color_sheme_tab .select2-container.select2-container--open .selection .select2-selection--single::after {transform: rotate(180deg); top: calc(50% - 17.5px);}
#color_sheme_tab .select2-container--open .select2-dropdown {border: 0px; padding: 8px 24px; border-radius: 8px; background: var(--Vivid-Blue-vivid-000, #F5F8FF); margin-top: 13px; z-index: 1;}
#color_sheme_tab .select2-container--open .select2-dropdown ul.select2-results__options li {background-color: transparent; font-family: var(--font-inter); font-size: 21px; font-style: normal; font-weight: 600; line-height: 35px; padding: 0px; color: var(--Primary-Dark-Gray, #6E7B81);}
#color_sheme_tab .select2-container--open .select2-dropdown ul.select2-results__options li.select2-results__option--highlighted, #color_sheme_tab .select2-container--open .select2-dropdown ul.select2-results__options li[aria-selected="true"] {color: var(--Primary-Blue, #207DE9);}

.select2-container--open .select2-dropdown--below {border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom: 1px solid #ABB9C2; margin-bottom: 4px;}
.select2-container--open .select2-dropdown--above {border-top-left-radius: 4px; border-top-right-radius: 4px; border-top: 1px solid #ABB9C2; margin-top: 4px;}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {width: 6px;}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {background: #f1f1f1;}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {background-color: #888; border-radius: 10px;}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {background-color: #555;}
.select2-container--default .select2-results>.select2-results__options {scrollbar-width: thin; scrollbar-color: #888 #f1f1f1;}

.select2-dropdown {z-index: 2!important;}

@media screen and (min-width: 221px) and (max-width: 500px) {#color_sheme_tab .select2-container {min-width: 220px;}}