/*=====================================================================================*/
/* Общие настройки интерфейсов
/*=====================================================================================*/

.iface{user-select: none;display:block;}

@keyframes rdd {
    0% {
        transform:rotate(0deg) scale(1);
    }
    50%{
        transform:rotate(180deg) scale(2);

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

.r{
    display:block;
    animation: rdd 3s infinite linear;
}

.iface_data{display:none;}

/*
=====================================================================================
Шаблоны
=====================================================================================
*/

.panel_and_content{display:flex;}
.pac_panel{flex:0 300px;}
.pac_content{flex:1}

.icon_n_num{position:relative;width:40px;height:40px;}
.icon_n_num>.num{position:absolute;left:-7px;top:-7px;width:20px;height:20px;text-align:center;line-height:20px;border-radius:50%;background-color:var(--secondary-color);}
.icon_n_num>img{width:100%;height:100%;}

/*
=====================================================================================
Интерфейс текст
=====================================================================================
*/

.iface_text{}
.iface_text_input{border:1px solid #aaa;display:flex;align-items:center;background-color:white;}
.iface_text_input>.prefix{margin-left:10px;}
.iface_text_input>input{padding:10px;display:inline-block;color:#444;outline:none;border:none;width:100%;box-sizing:border-box;}

/*
=====================================================================================
Интерфейс расширенный текст
=====================================================================================
*/

.iface_text_ex{display:flex;justify-content: space-between;}
.iface_text_ex .iface_text_input{border-radius:20px;overflow:hidden;}
.iface_text_ex_panel{z-index:9999;margin-left:20px;position:absolute;background-color:white;display:none;box-shadow:5px 5px 5px #444;padding:10px;}

/*
=====================================================================================
Интерфейс лист
=====================================================================================
*/

.iface_list{display:flex;flex-wrap:wrap;}
.iface_list_item{border:2px solid transparent;border-radius:5px;display:flex;color:white;margin:5px;padding:5px 10px;color:#444;position:relative;}
.iface_list_item_content{}
.iface_list_item_del{background-color:var(--primary-color);padding:2px;color:white;width:20px;height:20px;text-align:center;margin:0 5px;border-radius:3px;}
.iface_list_item:hover{outline:1px solid #eee;cursor:pointer;}
._iface_list_item.active{background-color:var(--primary-color);color:white;}
.iface_list_item.active{border:2px solid var(--primary-color);}

.iface_list_pages{padding:5px;display:flex;flex-wrap:wrap;}
.iface_list_pages_item{color:#aaa;margin:3px;width:25px;height:25px;line-height:25px;text-align:center;border:1px solid #eee;border-radius:3px;}
.iface_list_pages_item:hover{background-color:var(--secondary-color);color:white;cursor:pointer;}
.iface_list_pages_item_active{background-color:var(--primary-color);color:white;}

.list>.iface_list>.iface_list_item{display:block;}

/*
=====================================================================================
 Интерфейс кнопка
=====================================================================================
*/

.iface_but{display:flex;}
.iface_but_key{background-color:var(--primary-color);color:white;display:inline-block;padding:5px 10px;border-radius:3px;cursor:pointer;}
.iface_but_key:hover{background-color:var(--primary-color-darked);}
.iface_but_label{}


/*
=====================================================================================
 Слайдер слайдов
=====================================================================================
*/

.iface_block_slider{margin:0 auto;user-select:none;position:relative;overflow:hidden;white-space:nowrap;background-color:#C5CCD4;}
    .iface_block_slide{overflow:hidden;position:relative;cursor:pointer;background-position:top center;background-repeat:no-repeat;height:100%;display:inline-block;vertical-align:top;width:100%;background-color:#C5CCD4;}
    .iface_block_slide>*{user-select:none;}
        .iface_block_slide>img{width:100%;-webkit-user-drag: none;}
    

    .iface_block_slider_left{z-index:3;cursor:pointer;padding:5px;position:absolute;left:40px;top:45%;width:40px;height:60px;text-align:center;}
    .iface_block_slider_right{z-index:3;cursor:pointer;padding:5px;position:absolute;right:40px;top:45%;width:40px;height:60px;text-align:center;}
    .iface_block_slider_left>img,.iface_block_slider_right>img{width:100%;}
    
    /*
    .iface_block_slider_buts{padding:3px;position:absolute;bottom:0;left:0;right:0;height:15px;text-align:center;display:flex;justify-content: space-between;}
        .iface_block_slider_but{background-color:#fff3;flex-grow:1;margin:2px;border:1px solid #aaa;}
        .iface_block_slider_but:hover,.iface_block_slider_but_active{background-color:var(--primary-color);cursor:pointer;}
    */

    .iface_block_slider_buts{z-index:3;justify-content: center;padding:3px;position:absolute;bottom:0;left:0;right:0;height:15px;text-align:center;display:flex;}
    .iface_block_slider_but{width:10px;height:10px;border-radius:50%;flex-grow:0;background-color:#fff3;margin:2px;border:1px solid #aaa;}
    .iface_block_slider_but:hover,.iface_block_slider_but_active{background-color:var(--primary-color);cursor:pointer;}        


/*
=====================================================================================
 Редактор текста
=====================================================================================
*/

.iface_text_editor{padding:5px;background-color:#eee;}
.iface_text_editor_panel{display:flex;padding:5px 0;}
    .iface_text_editor_panel_but{border:1px solid #ddd;margin:3px;}
    .iface_text_editor_panel_but>a{display:block;padding:5px;text-decoration:none;color:#444;min-width:30px;height:30px;box-sizing:border-box;text-align:center;border-radius:5px;}
    .iface_text_editor_panel_but>a>img{width:20px;height:20px;}

.iface_text_editor_workzone{background-color:white;outline:none;font-size:14px;}
    
    .iface_text_editor_workzone_render{height:200px;overflow-y:scroll;width:96%;outline:none;}
        .iface_text_editor_workzone_render p{margin:20px 0;}
        .iface_text_editor_workzone_render_zones *{outline:1px dashed #eee;}
    
    .iface_text_editor_workzone_code{height:200px;overflow-y:scroll;width:100%;}
    
    
/*
=====================================================================================
 Линейный слайдер
=====================================================================================
*/

.iface_line_slider{display:flex}
.iface_line_slider_section{width:20px;}
.iface_line_slider_section_label{text-align:center;font-size:12px;}
.iface_line_slider_section_shtrih{text-align:center;font-size:10px;}


/*
=====================================================================================
 Выбор цвета
=====================================================================================
*/

.iface_color{position:relative;}
.iface_color_preview{cursor:pointer;padding:5px;}
.iface_color_panel{border-radius: 0 20px 20px 20px;display:none;position:absolute;width:210px;z-index:9999;background-color:white;border:1px solid #eee;box-shadow:0 0 10px #ddd;flex-wrap:wrap;}
.iface_color_panel>div{width:30px;height:30px;margin:5px;border:1px solid #eee;border-radius:50%;}
.iface_color_panel>div:hover{box-shadow:0 0 5px #444;cursor:pointer;}


/*
=====================================================================================
 Форма
=====================================================================================
*/

.iface_form{padding:10px;border:1px dashed #ddd;}
.iface_form_item{margin-bottom:10px;padding:5px;display:flex;}
.iface_form_item_label{padding:5px;background-color:#eee;width:300px;color:#999;}
.iface_form_tabs{display:flex;}
    .iface_form_tab{padding:10px;border-bottom:10px solid transparent;cursor:pointer;}
    .iface_form_tab.active{border-bottom:10px solid var(--primary-color);}
.iface_form_tab_content{display:none;}
.iface_form_tab_content.active{display:block;}

.iface_popup{z-index:9999;position:fixed;left:10px;top:10px;right:10px;bottom:10px;background-color:white;box-shadow: 0 0 10px #000;border-radius:5px;border:1px solid #eee;overflow-y:scroll;}
.iface_popup_content{padding:10px;position:relative;}
.iface_popup_closer{position:absolute;right:10px;top:10px;cursor:pointer;width:30px;height:30px;}
.iface_popup_closer>img{width:100%;}

.iface_popup_alert{left:30%;right:30%;bottom:auto;top:50px;overflow:auto;}

.iface_alert_text{padding:10px;text-align:center;}
.iface_alert_buts{display:flex;justify-content:center;}
.iface_alert_buts .iface{padding:5px;}


/*
=====================================================================================
Табсы
=====================================================================================
*/

.iface_tabs{display:flex;margin-bottom:10px;}
.iface_tab{padding:10px;border-bottom:5px solid transparent;cursor:pointer;color:#777;}
.iface_tab.active,.iface_tab:hover{border-bottom:5px solid var(--primary-color);}

/*
=====================================================================================
Прайс
=====================================================================================
*/
.iface_price{display:flex;}
.iface_price_val{}
.iface_price_orig{position:relative;}
    .iface_price_orig>svg{display:block;position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;}
    .iface_price_orig_val{color:#999;text-decoration:line-through;font-size:20px;}

/*
=====================================================================================
Универсальные шаблоны
=====================================================================================
*/

.utemp_n{padding:5px;margin:1px;}
.utemp_n:hover{background-color:#eee;}
.utemp_n.active{background-color:var(--primary-color);color:white;}

/*
=====================================================================================
Универсальный селектор
=====================================================================================
*/

.iface_uni_selector{position:relative;}
    
    .iface_uni_selector.panel .choice_panel .drop{display:none;}
    .iface_uni_selector.panel .list_panel{display:block;}    

    .iface_uni_selector.drop .choice_panel{min-width:250px;background-color:white;display:inline-flex;border:1px solid #eee;border-radius:5px;align-items:center;justify-content: space-between;padding:5px;}
    .iface_uni_selector.drop .choice_panel .drop{display:block;}
    .iface_uni_selector.drop .list_panel{display:none;height:200px;overflow-y:scroll;position:absolute;z-index:999;background-color:white;box-shadow:0 0 10px #444a;}

    .iface_uni_selector.drop .j_list_item{width:100%;}

/*
=====================================================================================
Редактор изображений
=====================================================================================
*/

    .iface_image.embed>.preview{display:none;}
    .iface_image.embed>.editor{display:block;}
    
    .iface_image.popup>.preview{display:block;background-color:#999;padding:3px;}
    .iface_image.popup>.preview > img{width:100%;height:100%;object-fit: contain;}
    .iface_image.popup>.editor{z-index:999;top:20px;left:0;right:0;margin: 0 auto;background-color:white;padding:10px;display:none;position: fixed;box-shadow:0 0 10px #000a;}
    .iface_image.popup>.editor>.panel{position:relative;padding:5px;margin-bottom:10px;}
    .iface_image.popup>.editor>.panel>.closer{position:absolute;right:5px;top:5px;}


    .tiles_4{display:flex;flex-wrap: wrap;}
    .tiles_4>*{width:25%;}


/*############################################################################################*/
/*############################################################################################*/
/*############################################################################################*/

@media screen and (max-width:1150px){
    .list_slider{width:auto;border-radius:0;}
    .list_slider_buts{left:0;right:0;bottom:0;top:auto;width:auto;}
    .list_slider_left{display:none;}
    .list_slider_right{display:none;}
    .list_slide{background-size:cover;}
    
    .iface_popup_alert{left:5%;right:5%;bottom:auto;top:50px;overflow:auto;}

}

/*############################################################################################*/
/*############################################################################################*/
/*############################################################################################*/

@media screen and (max-width:500px){
    
    .tiles_4{flex-wrap:wrap;}
    .tiles_4>*{width:auto;flex-basis:100%;}

    .list_slide>.but{left:0;right:0;bottom:50px;top:auto;width:auto;text-shadow:0 0 3px #000;background-color:transparent;text-align:center;}
    .list_slide>.but:hover{background-color:transparent;}

    .iface_popup_alert{top:30vh;}
    .iface_alert_buts{display:block;}
    .iface_alert_buts .iface_but_key{width:90%;text-align:center;}

}