@charset "UTF-8";

/* Стили для блока предпросмотра цвета */
#select-value {
    display: none; /* По умолчанию скрыт */
    width: 100%;
    height: 100%;
    /* min-height: 300px; */ /* Настройте под ваш дизайн */
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

/* Базовые стили для элементов формы */
.flist-select {
    transition: background-color 0.2s ease;
}

.flist-select option {
    color: #000;
}

/* --- СВЕТЛЫЕ ЦВЕТА (Черный текст) --- */
.ral-7035, select.ral-7035 { background-color: #CBD0CC !important; color: #000 !important; }
.ral-7044, select.ral-7044 { background-color: #BDBDB2 !important; color: #000 !important; }
.ral-9001, select.ral-9001 { background-color: #EFEBDC !important; color: #000 !important; }
.ral-9002, select.ral-9002 { background-color: #DDDED4 !important; color: #000 !important; }
.ral-6019, select.ral-6019 { background-color: #B7D9B1 !important; color: #000 !important; }
.ral-6027, select.ral-6027 { background-color: #81C0BB !important; color: #000 !important; }
.ral-6034, select.ral-6034 { background-color: #7FB0B2 !important; color: #000 !important; }
.ral-1000, select.ral-1000 { background-color: #CCC58F !important; color: #000 !important; }
.ral-1001, select.ral-1001 { background-color: #D1BC8A !important; color: #000 !important; }
.ral-1002, select.ral-1002 { background-color: #D2B773 !important; color: #000 !important; }
.ral-1003, select.ral-1003 { background-color: #F7BA0B !important; color: #000 !important; }
.ral-1007, select.ral-1007 { background-color: #E79C00 !important; color: #000 !important; }
.ral-1012, select.ral-1012 { background-color: #D9C022 !important; color: #000 !important; }
.ral-1014, select.ral-1014 { background-color: #DED09F !important; color: #000 !important; }
.ral-1015, select.ral-1015 { background-color: #EADEBD !important; color: #000 !important; }
.ral-1016, select.ral-1016 { background-color: #EAF044 !important; color: #000 !important; }
.ral-1017, select.ral-1017 { background-color: #F4B752 !important; color: #000 !important; }
.ral-1018, select.ral-1018 { background-color: #F3E03B !important; color: #000 !important; }
.ral-1021, select.ral-1021 { background-color: #EEC900 !important; color: #000 !important; }
.ral-1023, select.ral-1023 { background-color: #F0CA00 !important; color: #000 !important; }
.ral-1034, select.ral-1034 { background-color: #EDAB56 !important; color: #000 !important; }
.ral-1037, select.ral-1037 { background-color: #EEA205 !important; color: #000 !important; }
.ral-2003, select.ral-2003 { background-color: #FA842B !important; color: #000 !important; }

/* --- ТЕМНЫЕ ЦВЕТА (Белый текст) --- */
.ral-7040, select.ral-7040 { background-color: #9DA3A6 !important; color: #fff !important; }
.ral-1005, select.ral-1005 { background-color: #C89F04 !important; color: #fff !important; }
.ral-1011, select.ral-1011 { background-color: #AF8A54 !important; color: #fff !important; }
.ral-1019, select.ral-1019 { background-color: #A4957D !important; color: #fff !important; }
.ral-1020, select.ral-1020 { background-color: #9A9464 !important; color: #fff !important; }
.ral-1024, select.ral-1024 { background-color: #B89C50 !important; color: #fff !important; }
.ral-1027, select.ral-1027 { background-color: #A38C15 !important; color: #fff !important; }
.ral-1032, select.ral-1032 { background-color: #DDB20F !important; color: #fff !important; }
.ral-2000, select.ral-2000 { background-color: #DD7907 !important; color: #fff !important; }
.ral-2001, select.ral-2001 { background-color: #BE4E24 !important; color: #fff !important; }
.ral-2002, select.ral-2002 { background-color: #C63927 !important; color: #fff !important; }
.ral-2004, select.ral-2004 { background-color: #E75B12 !important; color: #fff !important; }
.ral-2008, select.ral-2008 { background-color: #F3752C !important; color: #fff !important; }
.ral-2009, select.ral-2009 { background-color: #E15501 !important; color: #fff !important; }
.ral-2010, select.ral-2010 { background-color: #D4652F !important; color: #fff !important; }
.ral-2011, select.ral-2011 { background-color: #EC7C25 !important; color: #fff !important; }
.ral-3000, select.ral-3000 { background-color: #AB2524 !important; color: #fff !important; }
.ral-3001, select.ral-3001 { background-color: #A02128 !important; color: #fff !important; }
.ral-3002, select.ral-3002 { background-color: #A1232B !important; color: #fff !important; }
.ral-3004, select.ral-3004 { background-color: #701F29 !important; color: #fff !important; }
.ral-3005, select.ral-3005 { background-color: #5E2028 !important; color: #fff !important; }
.ral-3007, select.ral-3007 { background-color: #402225 !important; color: #fff !important; }
.ral-3009, select.ral-3009 { background-color: #703731 !important; color: #fff !important; }
.ral-3011, select.ral-3011 { background-color: #7E292C !important; color: #fff !important; }
.ral-3012, select.ral-3012 { background-color: #CB8D73 !important; color: #fff !important; }
.ral-3016, select.ral-3016 { background-color: #AC4034 !important; color: #fff !important; }
.ral-3018, select.ral-3018 { background-color: #D14152 !important; color: #fff !important; }
.ral-3020, select.ral-3020 { background-color: #C1121C !important; color: #fff !important; }
.ral-3022, select.ral-3022 { background-color: #D56D56 !important; color: #fff !important; }
.ral-3027, select.ral-3027 { background-color: #B42041 !important; color: #fff !important; }
.ral-3028, select.ral-3028 { background-color: #CB3334 !important; color: #fff !important; }
.ral-4005, select.ral-4005 { background-color: #83639D !important; color: #fff !important; }
.ral-4006, select.ral-4006 { background-color: #992572 !important; color: #fff !important; }
.ral-4009, select.ral-4009 { background-color: #A38995 !important; color: #fff !important; }
.ral-5002, select.ral-5002 { background-color: #2B2C7C !important; color: #fff !important; }
.ral-5003, select.ral-5003 { background-color: #2A3756 !important; color: #fff !important; }
.ral-5008, select.ral-5008 { background-color: #313C48 !important; color: #fff !important; }
.ral-5009, select.ral-5009 { background-color: #2E5978 !important; color: #fff !important; }
.ral-5010, select.ral-5010 { background-color: #13447C !important; color: #fff !important; }
.ral-5011, select.ral-5011 { background-color: #232C3F !important; color: #fff !important; }
.ral-5012, select.ral-5012 { background-color: #3481B8 !important; color: #fff !important; }
.ral-5014, select.ral-5014 { background-color: #6C7C98 !important; color: #fff !important; }
.ral-5017, select.ral-5017 { background-color: #0E518D !important; color: #fff !important; }
.ral-5018, select.ral-5018 { background-color: #21888F !important; color: #fff !important; }
.ral-5019, select.ral-5019 { background-color: #1A5784 !important; color: #fff !important; }
.ral-5020, select.ral-5020 { background-color: #0B4151 !important; color: #fff !important; }
.ral-5021, select.ral-5021 { background-color: #07737A !important; color: #fff !important; }
.ral-5022, select.ral-5022 { background-color: #2F2A5A !important; color: #fff !important; }
.ral-5023, select.ral-5023 { background-color: #4D668E !important; color: #fff !important; }
.ral-5024, select.ral-5024 { background-color: #6A93B0 !important; color: #fff !important; }
.ral-6000, select.ral-6000 { background-color: #327662 !important; color: #fff !important; }
.ral-6001, select.ral-6001 { background-color: #28713E !important; color: #fff !important; }
.ral-6002, select.ral-6002 { background-color: #276235 !important; color: #fff !important; }
.ral-6005, select.ral-6005 { background-color: #0F4336 !important; color: #fff !important; }
.ral-6006, select.ral-6006 { background-color: #40433B !important; color: #fff !important; }
.ral-6009, select.ral-6009 { background-color: #26392F !important; color: #fff !important; }
.ral-6010, select.ral-6010 { background-color: #3E753B !important; color: #fff !important; }
.ral-6011, select.ral-6011 { background-color: #66825B !important; color: #fff !important; }
.ral-6013, select.ral-6013 { background-color: #797C5A !important; color: #fff !important; }
.ral-6016, select.ral-6016 { background-color: #026A52 !important; color: #fff !important; }
.ral-6017, select.ral-6017 { background-color: #468641 !important; color: #fff !important; }
.ral-6018, select.ral-6018 { background-color: #48A43F !important; color: #fff !important; }
.ral-6021, select.ral-6021 { background-color: #86A47C !important; color: #fff !important; }
.ral-6022, select.ral-6022 { background-color: #3E3C32 !important; color: #fff !important; }
.ral-6024, select.ral-6024 { background-color: #008754 !important; color: #fff !important; }
.ral-6025, select.ral-6025 { background-color: #53753C !important; color: #fff !important; }
.ral-6026, select.ral-6026 { background-color: #005D52 !important; color: #fff !important; }
.ral-6029, select.ral-6029 { background-color: #007243 !important; color: #fff !important; }
.ral-6032, select.ral-6032 { background-color: #0F8558 !important; color: #fff !important; }
.ral-6033, select.ral-6033 { background-color: #478A84 !important; color: #fff !important; }
.ral-6037, select.ral-6037 { background-color: #008F39 !important; color: #fff !important; }
.ral-7000, select.ral-7000 { background-color: #7E8B92 !important; color: #fff !important; }
.ral-7002, select.ral-7002 { background-color: #817F68 !important; color: #fff !important; }
.ral-7003, select.ral-7003 { background-color: #7A7B6D !important; color: #fff !important; }
.ral-7012, select.ral-7012 { background-color: #596163 !important; color: #fff !important; }
.ral-7016, select.ral-7016 { background-color: #373F43 !important; color: #fff !important; }
.ral-7030, select.ral-7030 { background-color: #939388 !important; color: #fff !important; }
.ral-7043, select.ral-7043 { background-color: #4E5451 !important; color: #fff !important; }
.ral-8000, select.ral-8000 { background-color: #887142 !important; color: #fff !important; }
.ral-8001, select.ral-8001 { background-color: #9C6B30 !important; color: #fff !important; }
.ral-8002, select.ral-8002 { background-color: #7B5141 !important; color: #fff !important; }
.ral-8003, select.ral-8003 { background-color: #80542F !important; color: #fff !important; }
.ral-8004, select.ral-8004 { background-color: #8F4E35 !important; color: #fff !important; }
.ral-8007, select.ral-8007 { background-color: #6F4A2F !important; color: #fff !important; }
.ral-8011, select.ral-8011 { background-color: #5A3A29 !important; color: #fff !important; }
.ral-8012, select.ral-8012 { background-color: #673831 !important; color: #fff !important; }
.ral-8014, select.ral-8014 { background-color: #49392D !important; color: #fff !important; }
.ral-8015, select.ral-8015 { background-color: #633A34 !important; color: #fff !important; }
.ral-8017, select.ral-8017 { background-color: #44322D !important; color: #fff !important; }
.ral-8019, select.ral-8019 { background-color: #3F3A3A !important; color: #fff !important; }
.ral-8022, select.ral-8022 { background-color: #211F20 !important; color: #fff !important; }
.ral-8023, select.ral-8023 { background-color: #A65E2F !important; color: #fff !important; }
.ral-8024, select.ral-8024 { background-color: #79553C !important; color: #fff !important; }
.ral-8025, select.ral-8025 { background-color: #755C49 !important; color: #fff !important; }
.ral-8028, select.ral-8028 { background-color: #4E3B2B !important; color: #fff !important; }
.ral-9005, select.ral-9005 { background-color: #0A0A0D !important; color: #fff !important; }
.page-toggle {
    width:50%
}
/* При открытии страницы этот блок должен быть скрыт */
.page-toggle {
    display: none;
}

/* Блок с фоном RAL тоже скрыт по умолчанию */
#select-value {
    display: none;
}
.object-arrow  {
    color:white;
    font-weight:400;
    font-size:1rem;
    display: flex;
    flex-wrap: wrap;
}
.object-arrow .visible {
    margin:3px 5px;
    padding:4px;
    background: var(--primary-color);
    background: linear-gradient(90deg, #007bff, #00c6ff);    
    border-radius: 10px 10px 0 0;
    
}
.page-toggle {
    position: relative;    /* Чтобы фон не улетел за пределы блока */
    /*min-height: 200px;*/     /* Высота блока */
    /*overflow: hidden; */     /* Чтобы фон не вылезал за скругления */
    z-index: 1;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 15px;
}
.page-toggle p {
    font-size: 1.1rem;
    line-height: 1.4rem;
    font-weight: 500;
    text-align: center;
    color:black;
    background-color: white;
    height: 100%;
    width: 100%;
    margin-bottom: 0;
    /* padding: 0 0 10px 0; */
    z-index: 9999;
}
p.mini {
    font-size:0.8rem;
    line-height:normal;
    padding: 3px;
}
/* Контент (текст и иконка) */
.toggle-content {
    position: relative;
    z-index: 10;           /* Поднимаем текст выше фона */
    color: white;          /* Цвет текста, чтобы был виден на фоне */
    pointer-events: none;  /* Чтобы текст не мешал кликам, если нужно */
}
.toggle-content img {
    width:100%
}
/* Сам блок-фон */
#select-value {
    position: absolute;    /* Вырываем из потока и растягиваем */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;            /* Ниже текста, но выше стандартного фона */
    margin: 0 !important;  /* Убираем лишние отступы */
}
/* Теперь вы можете стилизовать этот span как угодно! */
#file-name-display {
    color: #007bff;
    font-size: 14px;
    margin-left: 10px;
    font-style: italic;
    border-bottom: 1px dashed #ccc;
}

.custom-file-button {
    background: #eee;
    padding: 5px 15px;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 4px;
    color: black;
}