﻿.InformationBoard {
    border-radius: 16px;
    background: linear-gradient(96deg, #F3F8FD 0%, #DEE9F3 100%);
    padding: 60px;
    background-repeat: no-repeat;
}

    .InformationBoard ul {
        padding: 0px;
        margin: -10px;
    }

    .InformationBoard li .infoItemDivOut {
        padding: 14px;
        border-radius: 8px;
        background: #FFF;
        margin: 0 !important;
        border: 2px solid transparent;
    }

    .InformationBoard li {
        padding: 10px;
        list-style: none;
    }

        .InformationBoard li img {
            width: 52px;
            height: 52px;
            margin-left: 12px;
            border-radius: 4px;
        }

        .InformationBoard li .infoItemDiv, .InformationBoard li .infoItemDiv:hover {
            text-decoration: none;
            width: 100%;
            display: grid;
            color: #2E2E2E;
            text-align: right;
            font-family: BlenderRegular;
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: 24px;
            background-image: url(/_layouts/15/TlvSP2013PublicSite/images/arrowLinks.svg);
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 10px 12px;
            padding-left: 15px;
        }

        .InformationBoard li .popUpDivOut {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }



        .InformationBoard li .popUpDiv {
            margin-left: auto;
            margin-right: auto;
            /* margin-top: 50px;*/
            display: flex;
            width: 800px;
            padding: 20px 20px 25px 20px;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            gap: 32px;
            border-radius: 16px;
            background: #FFF;
            box-shadow: 0px 73px 20px 0px rgba(46, 46, 46, 0.00), 0px 47px 19px 0px rgba(46, 46, 46, 0.01), 0px 26px 16px 0px rgba(46, 46, 46, 0.04), 0px 12px 12px 0px rgba(46, 46, 46, 0.07), 0px 3px 6px 0px rgba(46, 46, 46, 0.08);
            position: relative;
            transform: translate(0%, -50%);
            top: 50%;
        }

            .InformationBoard li .popUpDiv .popUpDivImg {
                border-radius: 8px;
                display: flex;
                height: 300px;
                flex-direction: column;
                justify-content: flex-end;
                align-items: flex-end;
                align-self: stretch;
                background-repeat: no-repeat;
                background-size: cover;
            }

            .InformationBoard li .popUpDiv .popUp-close-img {
                display: flex;
                width: 32px;
                height: 32px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 13.333px;
                position: absolute;
                right: -12px;
                top: -12px;
                border-radius: 1333.333px;
                border: 2px solid #FFF;
                background: #2E2E2E;
                background-image: url(/_layouts/15/TlvSP2013PublicSite/images/CloseIMG.svg);
                background-position: center center;
                background-size: 15px;
                background-repeat: no-repeat;
            }

            .InformationBoard li .popUpDiv .popUpDivTitle {
                color: #2E2E2E;
                text-align: right;
                font-family: BlenderRegular;
                font-size: 32px;
                font-style: normal;
                font-weight: 700;
                line-height: 36px;
                align-self: stretch;
            }

            .InformationBoard li .popUpDiv .popUpDivDetails {
                color: #2E2E2E;
                text-align: right;
                font-family: BlenderRegular;
                font-size: 20px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                align-self: stretch;
                overflow: auto;
                max-height: 400px;
            }

            .InformationBoard li .popUpDiv .popUpDivLink {
                color: var(--0072-c-1, #0072C1);
                text-align: right;
                font-family: BlenderRegular;
                font-size: 22px;
                font-style: normal;
                font-weight: 700;
                line-height: 20px; /* 90.909% */
                align-self: stretch;
            }


        .InformationBoard li .infoItemDiv.noLink, .InformationBoard li .infoItemDiv.noLink:hover {
            background: none;
            cursor: default;
        }

        .InformationBoard li .infoItemDiv, .InformationBoard li .infoItemDiv.popUpLink, .InformationBoard li .infoItemDiv.popUpLink:hover {
            cursor: pointer;
        }

        .InformationBoard li .infoItemDivOut:hover, .InformationBoard li .infoItemDivOut:focus-visible {
            border-radius: 8px;
            border: 2px solid rgba(46, 46, 46, 0.55);
            background: #FFF;
            padding: 14px;
        }



        .InformationBoard li .iconWrap {
            display: flex;
            align-items: center;
        }


@media screen and (max-width: 575px) {


    .InformationBoard {
        border-radius: 0;
        background: #F9F9F9;
        padding: 32px 16px;
        margin: 0 16px;
        border-radius: 16px;
    }

        .InformationBoard #planAndDev h2 {
            margin-bottom: 20px !important;
        }

        .InformationBoard li {
            padding: 6px 8px;
        }

            .InformationBoard li .infoItemDivOut {
                padding: 8px;
                border-radius: 8px;
                align-items: center;
                display: flex
            }

            .InformationBoard li img {
                width: 36px;
                height: 36px;
                margin-left: 8px;
            }

            .InformationBoard li .infoItemDiv, .InformationBoard li .infoItemDiv:hover {
                background-image: none;
                padding: 0px;
                color: #2E2E2E;
                text-align: right;
                font-family: BlenderRegular;
                font-size: 14px;
                font-style: normal;
                font-weight: 700;
                line-height: 16px;
            }



            .InformationBoard li .popUpDivOut {
                padding: 0 16px;
            }

            .InformationBoard li .popUpDiv {
                display: flex;
                width: 100%;
                padding: 20px;
                flex-direction: column;
                justify-content: center;
                align-items: flex-end;
                gap: 16px;
                align-self: stretch;
                border-radius: 12px;
                background: #FFF;
                box-shadow: 0px 73px 20px 0px rgba(46, 46, 46, 0.00), 0px 47px 19px 0px rgba(46, 46, 46, 0.01), 0px 26px 16px 0px rgba(46, 46, 46, 0.04), 0px 12px 12px 0px rgba(46, 46, 46, 0.07), 0px 3px 6px 0px rgba(46, 46, 46, 0.08);
                position: relative;
            }

                .InformationBoard li .popUpDiv .popUpDivImg {
                    display: flex;
                    height: 160px;
                    flex-direction: column;
                    justify-content: flex-end;
                    align-items: flex-end;
                    align-self: stretch;
                    border-radius: 8px;
                }

                .InformationBoard li .popUpDiv .popUp-close-img {
                    display: flex;
                    width: 32px;
                    height: 32px;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 13.333px;
                    position: absolute;
                    right: -12px;
                    top: -12px;
                    border-radius: 1333.333px;
                    border: 2px solid #FFF;
                    background: #2E2E2E;
                    background-image: url(/_layouts/15/TlvSP2013PublicSite/images/CloseIMG.svg);
                    background-position: center center;
                    background-size: 15px;
                    background-repeat: no-repeat;
                }

                .InformationBoard li .popUpDiv .popUpDivTitle {
                    text-align: right;
                    font-family: BlenderRegular;
                    font-size: 24px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 28px;
                    align-self: stretch;
                }

                .InformationBoard li .popUpDiv .popUpDivDetails {
                    color: #2E2E2E;
                    text-align: right;
                    font-family: BlenderRegular;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    align-self: stretch;
                    max-height: 500px;
                    overflow: auto;
                }

                .InformationBoard li .popUpDiv .popUpDivLink {
                    color: #0072C1;
                    text-align: right;
                    font-family: BlenderRegular;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 20px;
                    align-self: stretch;
                }
}
