/* Start:/bitrix/templates/crystallux/components/bitrix/breadcrumb/my_breadcrumbs/style.min.css?1713520553467*/
.bx-breadcrumb{margin:10px 0}.bx-breadcrumb i{color:#b5bdc2;line-height:13px;font-size:12px;vertical-align:middle;margin-right:5px}.bx-breadcrumb .bx-breadcrumb-item{float:left;margin-bottom:10px;white-space:nowrap;line-height:13px;vertical-align:middle;margin-right:10px}.bx-breadcrumb .bx-breadcrumb-item span{font-family:"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:13px;white-space:normal}.bx-breadcrumb .bx-breadcrumb-item a{border-bottom:0}
/* End */


/* Start:/local/components/crystallux/calculator.illumination/templates/.default/style.css?17569078785596*/
    @media (max-width: 900px) {
        .calculator-block{flex-direction: column;gap: 20px;}
        .calculator-block .calculator{width: initial;}
        .calculator-block .canvas{width: initial;}
    }

    .info-table
    {font-family: 'Open Sans', sans-serif;}
    .info-table *{border-spacing: 0;border-collapse:collapse;}
    .info-table > div{margin: 30px 0 10px;font-size: 20px;font-weight: 400;line-height: 150%;}
    .info-table table{width: 100%;margin: 32px 0;}
    .info-table table td{text-align: center;padding: 8px;border: 1px solid #eee;cursor: default;line-height: 200%;}
    .info-table table td:hover{background: #f1f1f1;}

    .optional-params .form-group{display: none;}

    .switch-mode:has(#manual:checked) + .optional-params .form-group:has(#lamp){display: block;}
    .switch-mode:has(#auto:checked) + .optional-params .form-group:has(#lux){display: block;}

    /* .calculator:has(.switch-mode:has(#manual:checked)) .form-group:has(#lux_standart) {display: none;} */
    .calculator:has(#auto:checked) .form-group:has(#lux_standart) {
        display: none;
    }   
    .calculator:has(#manual:checked) .form-group:has(#lumen) {
        display: none;
    }    
    .calculator:has(#auto:checked) p:has(+ .form-group):where(.form-group:has(#lux_standart)) {
        color: red !important;
    }


    .switch-mode {display: flex;justify-content: space-between;margin: 20px 0;}
    .switch-mode label{cursor: pointer;user-select: none;border-radius: 5px;background: #ddd;padding: 10px 20px;width:35%;text-align: center;}
    .switch-mode label:has(input:checked){background: #007bff;color: white;}
    
    .switch-mode label input{display: none;}

    .color-scale{height: 20px;margin-top: 20px;background: linear-gradient(to right, black 0%, #5b0000 4%, #800080 8%, #4682b4 10%, #00bfff 14%, #40e0d0 19%, #7fff00 23%, #008000 30%, yellow 40%, #ff8c00 60%, red 80%, #ff69b4 90%, white 100%);}
    .legend{display: flex;justify-content: space-between;}
    .calculator{background: #f5f5f5;width: 40%;padding: 20px;box-sizing: border-box;border-radius: 8px;font-family: 'Open Sans', sans-serif;font-size: 15px;max-width: fit-content;}
    .calculator .calculate-btn{padding: 10px 20px;color: white;background-color: #007bff;border-radius: 8px;margin: 20px 0;text-align: center;cursor: pointer;user-select: none;}
    .calculator .form-group{margin: 10px 0;}
    .calculator .form-group label{display: block;margin-bottom: 5px;font-weight: bold;}
    .calculator .form-group > p{margin: 25px 0 0;font-size: 17px;}
    .calculator .form-group input + p{font-size: 10px;margin-top: 5px;}
    .calculator .form-group input{width: 100%;margin-top: 2px;padding: 8px;border: 1px solid #ddd;border-radius: 4px;}
    .calculator #result{background: #efefef;}
    .calculator-block{display: flex;justify-content: space-between; margin-top: 48px;}

    .dot{width: 10px;height: 10px;border-radius: 10px;position: absolute;}
    .dot .heat{    
        background: radial-gradient(ellipse,
                                     /* rgb(233, 37, 37),
                                     rgb(230, 70, 41),
                                     rgb(231, 58, 27),
                                      rgba(236, 195, 57, 0.7),
                                      rgba(212, 193, 15, 0.7),
                                       rgba(223, 226, 50, 0.5),
                                       rgba(202, 216, 79, 0.5),
                                        rgba(115, 255, 0, 0.2),
                                          rgba(77, 224, 64, 0.1),
                                            rgba(0, 255, 98, 0.05),
                                            rgba(0, 102, 255, 0.02),
                                           rgba(105, 128, 255, 0.01),
                                           transparent); */
                                     rgb(220, 220, 20),
                                      rgba(220, 220, 20, 0.7),
                                       rgba(220, 220, 20, 0.5),
                                        rgba(220, 220, 20, 0.2),
                                          rgba(220, 220, 20, 0.1),
                                            rgba(220, 220, 20, 0.05),
                                            rgba(220, 220, 20, 0.02),
                                            rgba(220, 220, 20, 0.01) 50%);
        aspect-ratio: 1/1;
        position: absolute;
        top: calc(50% - 10px);
        right: calc(50% - 10px);
    }
    
    .canvas{overflow: hidden;width: 40%;border: 1px solid black;position: relative;}

    .dot .center{background: black;width: 10px;aspect-ratio: 1;border-radius: 10px;position: absolute;z-index: 1;top: calc(50% - 5px);left: calc(50% - 5px);}


.show_instruction{
    padding: 10px 20px;
    color: white;
    background-color: #007bff;
    border-radius: 5px;
    margin: 20px 0;
    text-align: center;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
  }
  .show_instruction:hover, .show_instruction:focus{
    color: white;
    text-decoration: none;
  }
#instruction{font: 400 15px/22px "Roboto", Arial, sans-serif; padding: 48px; display: none;}
#instruction p{margin-bottom: 4px;}
#instruction hr{border-color: #444;}
#instruction ul:has(.variant){padding-inline-start: 20px; margin-top: 48px;}
#instruction ul:has(.variant) > li:not(:last-child){margin-bottom: 36px;}
#instruction .variant{font-size: 18px;}
#instruction .strong{font-weight: 700;}
#instruction ul ul{list-style-type: disc;}
#instruction ol ul{list-style-type: circle;}
#instruction .before_start{font-size: 18px;}
/* End */
/* /bitrix/templates/crystallux/components/bitrix/breadcrumb/my_breadcrumbs/style.min.css?1713520553467 */
/* /local/components/crystallux/calculator.illumination/templates/.default/style.css?17569078785596 */