﻿/*
    ----------------
          NEWS
    ----------------
*/

#NEWS_FEED_Feed .NEWS_FEED_NO_NEWS, #NEWS_FEED_FullPage .NEWS_FEED_NO_NEWS {
    padding: 5px;
    border: 1px solid lightgray;
    font-weight: bold;
    color: dimgray;
}

#NEWS_FEED_Feed #NEWS_FEED_Feed_WAITER {
    margin: 10px auto;
    width: 100px !important;
}
/*
    ----------------
          SMALL
    ----------------
*/
#NEWS_FEED_Feed {
    width: 100%;
    font-family: Arial;
    color: black;
}
.darkmode #NEWS_FEED_Feed {
    color: white;
}

    #NEWS_FEED_Feed .News_Feed_News {
        margin: 15px 0;
        padding: 5px;
        background-color: white;
        overflow: hidden;
    }

.darkmode #NEWS_FEED_Feed  .News_Feed_News {
    background-color: #4f4f4f;
}

        #NEWS_FEED_Feed .News_Feed_News .News_Feed_Header {
            position: relative;
        }

            #NEWS_FEED_Feed .News_Feed_News .News_Feed_Header h2 {
                margin: 15px 5px 5px 15px;
            }

                #NEWS_FEED_Feed .News_Feed_News .News_Feed_Header h2 a {
                    text-decoration: none;
                    color: black;
                }
                .darkmode #NEWS_FEED_Feed .News_Feed_News .News_Feed_Header h2 a {
                    color: white;
                }

#NEWS_FEED_Feed .News_Feed_News .News_Feed_Header p {
    margin: 0;
    color: gray;
    position: absolute;
    top: 0px;
    right: 10px;
}
.darkmode #NEWS_FEED_Feed .News_Feed_News .News_Feed_Header p {
    color: white;
}

                #NEWS_FEED_Feed .News_Feed_News .News_Feed_Header p[scheduled]::before {
                    content: 'SCHEDULED';
                    margin-right: 5px;
                    background-color: gray;
                    padding: 1px 5px;
                    border-radius: 5px;
                    color: white;
                }

        #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body {
            margin: 15px;
            display: grid;
            grid-template-columns: minmax(100px, 300px) auto;
            grid-template-rows: auto;
            grid-column-gap: 10px;
            grid-row-gap: 10px;
            grid-template-areas: "images left" "bottom bottom" "misc misc";
        }

            #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body h3 {
                margin-top: 0;
                margin-bottom: 0;
            }

            #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body p {
                margin-top: 0;
                margin-bottom: 15px;
            }

            #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body .News_Feed_Images {
                grid-area: images;
                display: grid;
                grid-template-columns: 40px 40px 40px auto;
                grid-template-rows: auto auto;
                grid-template-areas: "big big big big big";
                grid-row-gap: 10px;
            }

                #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body .News_Feed_Images .News_Feed_Big_Image {
                    grid-area: big;
                }

                    #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body .News_Feed_Images .News_Feed_Big_Image img {
                        width: 100%;
                    }

                #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body .News_Feed_Images .News_Feed_Small_Image img {
                    height: 30px;
                    width: 30px;
                }

                #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body .News_Feed_Images .News_Feed_More_Images {
                    text-decoration: none;
                    font-size: 30px;
                }

            #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body .News_Feed_Text_Top {
                grid-area: left;
            }

            #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body .News_Feed_Text_Bottom {
                grid-area: bottom;
            }

            #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body .News_Feed_Text_Miscs {
                grid-area: misc;
            }

                #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body .News_Feed_Text_Miscs .News_Feed_Text_Misc:nth-child(1) {
                    border-top: 1px dashed gray;
                }

                #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body .News_Feed_Text_Miscs .News_Feed_Text_Misc {
                    border-bottom: 1px dashed gray;
                    padding: 5px;
                    display: grid;
                    grid-template-columns: 20px auto;
                    grid-template-rows: 20px;
                    grid-column-gap: 5px;
                    overflow: hidden;
                }

                    #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body .News_Feed_Text_Miscs .News_Feed_Text_Misc img {
                        height: 20px;
                    }

                    #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body .News_Feed_Text_Miscs .News_Feed_Text_Misc a {
                        padding-top: 1px;
                        text-decoration: none;
                        font-size: 18px;
                    }

.darkmode #NEWS_FEED_Feed .News_Feed_News .News_Feed_Body .News_Feed_Text_Miscs .News_Feed_Text_Misc a {
    color: #2ee6c0;
}


/*
    ----------------
          BIG
    ----------------
*/

#NEWS_FEED_FullPage {
    font-family: Arial;
    margin: 15px;
    overflow: hidden;
    color: black;
}
.darkmode #NEWS_FEED_FullPage {
    color: white;
}

#NEWS_FEED_FullPage .Wrapper {
    background-color: white;
    padding: 5px;
}
.darkmode #NEWS_FEED_FullPage .Wrapper {
    background-color: #4f4f4f;
}

    #NEWS_FEED_FullPage .News_Feed_Header {
        position: relative;
    }

        #NEWS_FEED_FullPage .News_Feed_Header h2 {
            margin: 15px 5px 5px 15px;
        }

            #NEWS_FEED_FullPage .News_Feed_Header h2 a {
                text-decoration: none;
                color: black;
            }

        #NEWS_FEED_FullPage .News_Feed_Header p {
            margin: 0;
            color: gray;
            position: absolute;
            top: 0px;
            right: 10px;
        }
        .darkmode #NEWS_FEED_FullPage .News_Feed_Header p {
            color: white;
        }

                #NEWS_FEED_FullPage .News_Feed_Header p[scheduled]::before {
                    content: 'SCHEDULED';
                    margin-right: 5px;
                    background-color: gray;
                    padding: 1px 5px;
                    border-radius: 5px;
                    color: white;
                }

    #NEWS_FEED_FullPage .News_Feed_Body {
        margin: 0 15px;
        margin-bottom: 15px;
        display: grid;
        grid-template-columns: 30% auto;
        grid-template-rows: auto;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        grid-template-areas: "bigImage left" "bottom bottom" "misc misc" "images images";
    }

        #NEWS_FEED_FullPage .News_Feed_Body h3 {
            margin-bottom: 0;
        }

        #NEWS_FEED_FullPage .News_Feed_Body p {
            margin-top: 0;
        }

        #NEWS_FEED_FullPage .News_Feed_Body .News_Feed_Big_Image img {
            grid-area: bigImage;
            width: 100%;
        }

        #NEWS_FEED_FullPage .News_Feed_Body .News_Feed_Text_Top {
            grid-area: left;
        }

        #NEWS_FEED_FullPage .News_Feed_Body .News_Feed_Text_Bottom {
            grid-area: bottom;
        }

        #NEWS_FEED_FullPage .News_Feed_Body .News_Feed_Text_Miscs {
            grid-area: misc;
        }

            #NEWS_FEED_FullPage .News_Feed_Body .News_Feed_Text_Miscs .News_Feed_Text_Misc:nth-child(1) {
                border-top: 1px dashed gray;
            }

            #NEWS_FEED_FullPage .News_Feed_Body .News_Feed_Text_Miscs .News_Feed_Text_Misc {
                border-bottom: 1px dashed gray;
                padding: 5px;
                display: grid;
                grid-template-columns: 20px auto;
                grid-template-rows: 20px;
                grid-column-gap: 5px;
                overflow: hidden;
            }

                #NEWS_FEED_FullPage .News_Feed_Body .News_Feed_Text_Miscs .News_Feed_Text_Misc img {
                    height: 20px;
                }

                #NEWS_FEED_FullPage .News_Feed_Body .News_Feed_Text_Miscs .News_Feed_Text_Misc a {
                    padding-top: 1px;
                    text-decoration: none;
                    font-size: 18px;
                }
.darkmode #NEWS_FEED_FullPage .News_Feed_Body .News_Feed_Text_Miscs .News_Feed_Text_Misc a {
    color: #2ee6c0;
}

    #NEWS_FEED_FullPage .News_Feed_Images {
        grid-area: images;
        margin-top: 30px;
        padding: 15px;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 40px auto;
        grid-column-gap: 5px;
        grid-column-gap: 5px;
        background-color: white;
    }

        #NEWS_FEED_FullPage .News_Feed_Images h2 {
            margin: 0px;
        }

        #NEWS_FEED_FullPage .News_Feed_Images div {
            display: grid;
            grid-template-columns: calc(25% - 1.25px) calc(25% - 1.25px) calc(25% - 1.25px) calc(25% - 1.25px);
            grid-template-rows: auto;
            grid-column-gap: 5px;
            grid-row-gap: 5px;
        }

        #NEWS_FEED_FullPage .News_Feed_Images img {
            width: 100%;
        }


/*
    ----------------
       NEWSMAKER
    ----------------
*/

#NEWS_FEED_NewsMaker {
    margin: 15px;
    display: none;
    grid-template-columns: minmax(370px, 50%) 50%;
    grid-template-rows: auto;
    grid-column-gap: 5px;
}

    #NEWS_FEED_NewsMaker .Editor {
        padding: 15px;
        background-color: white;
    }

.darkmode #NEWS_FEED_NewsMaker .Editor {
    background-color: #4f4f4f;
}

        #NEWS_FEED_NewsMaker .Editor h1 {
            margin: 0px;
        }

            #NEWS_FEED_NewsMaker .Editor h1 #SaveBTN {
                background-color: lime;
                float: right;
                width: 130px;
                cursor: pointer;
                font-size: 25px;
                border: none;
                color: black;
            }

                #NEWS_FEED_NewsMaker .Editor h1 #SaveBTN[disabled] {
                    cursor: default;
                    background-color: gray;
                }

#NEWS_FEED_NewsMaker .Editor input, #NEWS_FEED_NewsMaker .Editor textarea {
    width: 100%;
    min-height: 20px;
    margin-bottom: 5px;
    outline: none;
}

.darkmode #NEWS_FEED_NewsMaker .Editor input, .darkmode #NEWS_FEED_NewsMaker .Editor textarea {
    background: none;
    border-color: white;
    color: white;
}
    .darkmode #NEWS_FEED_NewsMaker .Editor input::placeholder, .darkmode #NEWS_FEED_NewsMaker .Editor textarea::placeholder {
        color: gray;
    }

        #NEWS_FEED_NewsMaker .Editor #Editor_Input_Date {
            width: 175px;
            position: absolute;
            top: 0;
            right: -5px;
        }

        #NEWS_FEED_NewsMaker .Editor textarea {
            resize: vertical;
        }

        #NEWS_FEED_NewsMaker .Editor #Editor_Input_Title {
            font-size: 30px;
        }


        #NEWS_FEED_NewsMaker .Editor .List {
            display: grid;
            grid-template-columns: auto 80px 30px 30px;
            grid-template-rows: auto;
            grid-column-gap: 5px;
            grid-template-areas: "head bt0 bt1 bt2" "list list list list"
        }

            #NEWS_FEED_NewsMaker .Editor .List h4 {
                grid-area: head;
                margin-top: 5px;
                margin-bottom: 0px;
            }

            #NEWS_FEED_NewsMaker .Editor .List > div {
                grid-area: list;
                margin-top: 5px;
            }

            #NEWS_FEED_NewsMaker .Editor .List .Element {
                background-color: lavender;
                margin-bottom: 10px;
                display: grid;
                grid-template-columns: 20px auto;
                grid-template-rows: auto;
                cursor: move;
            }

.darkmode #NEWS_FEED_NewsMaker .Editor .List .Element {
    background-color: #914d4d;
}

                #NEWS_FEED_NewsMaker .Editor .List .Element > center {
                    border-right: 1px dashed black;
                    padding-top: 20px;
                }

                #NEWS_FEED_NewsMaker .Editor .List .Element > div {
                    margin: 5px;
                }

                    #NEWS_FEED_NewsMaker .Editor .List .Element > div input {
                        width: 45%;
                        margin-right: 5px;
                    }

#NEWS_FEED_NewsMaker .Editor .List > button {
    background-color: #ededed;
    height: 30px;
    width: 30px;
    border: none;
    font-size: 25px;
    cursor: pointer;
}

    #NEWS_FEED_NewsMaker .Editor .List > button img {
        margin-top: 3px;
    }

    #NEWS_FEED_NewsMaker .Editor .List > button:hover {
        background-color: #d4d4d4;
    }

        #NEWS_FEED_NewsMaker .Editor .TrashElement {
            background-color: #ededed;
            margin-top: 0px !important;
            grid-area: bt1 !important;
        }

            #NEWS_FEED_NewsMaker .Editor .TrashElement img {
                filter: invert(50%) sepia(82%) saturate(5074%) hue-rotate(336deg) brightness(113%) contrast(111%);
                height: 20px;
                width: 20px;
                margin-top: 5px;
                margin-left: 5px;
            }

#NEWS_FEED_NewsMaker .Editor .NEWS_FEED_NEWSMAKER_IMAGE > .Middle {
    display: grid;
    grid-template-columns: auto auto;
    z-index: 0;
}

    #NEWS_FEED_NewsMaker .Editor .NEWS_FEED_NEWSMAKER_IMAGE > .Middle > .File {
        height: 50px;
        border: 1px solid black;
        padding: 3px;
        margin: 0 auto;
        position: relative;
    }

        #NEWS_FEED_NewsMaker .Editor .NEWS_FEED_NEWSMAKER_IMAGE > .Middle > .File > img {
            height: 100%;
            cursor: pointer;
        }

        #NEWS_FEED_NewsMaker .Editor .NEWS_FEED_NEWSMAKER_IMAGE > .Middle > .File > img:hover {
            background-color: rgba(0, 0, 0, 0.3);
        }

        #NEWS_FEED_NewsMaker .Editor .NEWS_FEED_NEWSMAKER_IMAGE > .Middle > .File > div {
            background-color: white;
            width: 30vw;
            z-index: 1;
            position: absolute;
            top: 0;
            left: 60px;
        }

            #NEWS_FEED_NewsMaker .Editor .NEWS_FEED_NEWSMAKER_IMAGE > .Middle > .File > div > .MISC_FILE_LIBRARY {
                height: 50vh;
            }