html, body {
    margin: 0;
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
	.dropdown-menu li{ position: relative; 	}
	.nav-item .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.nav-item .submenu-left{ 
		right:100%; left:auto;
	}
	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{ display: block; }
}	
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
  .dropdown-menu .dropdown-menu{
      margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
  }
}	
/* ============ small devices .end// ============ */

.navbar-expand-lg .navbar-nav .dropdown-menu {
    right: 0 !important;
}

.main-container {
    margin: 5px;
    width: calc(100% - 10px);
    height: calc(100vh - 10px);
    display: flex;
    flex-direction: column;
}

.main-container #mainNavbar {
    margin-bottom: 5px;
    border: 1px solid #000;
}
@media(max-width: 1200px) {
    .main-container #mainNavbar {
        padding: 0;
    }
}

.main-container #mainNavbar .navbar-toggler-icon
{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.main-container .navbar-nav .nav-link.active {
    color: #75140c;
}

.main-container .navbar-nav .icon {
    margin: 4px 10px 4px 0;
    width: 40px;
}

.main-container .navbar-nav:not(.brand) {
    flex: 1;
    justify-content: space-around;
}

.main-container .navbar-nav .nav-item .divider {
    height: 100%;
    border-left: 2px solid;
}

.main-container .navbar-nav .nav-item.flags {
}
    .main-container .navbar-nav .nav-item.flags .flag {
        width: 22px;
    }

.main-container .navbar-nav .nav-link {
    padding-top: 0;
    padding-bottom: 0;
}
@media(max-width: 576px) {
    .main-container .navbar-nav .nav-link {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}
@media(max-width: 1354px) {
    .main-container .navbar-nav .nav-link {
        font-size: 12px;
    }
}
@media(min-width: 1355px) {
    .main-container .navbar-nav .nav-link {
        font-size: 14px;
    }
}
@media(min-width: 1500px) {
    .main-container .navbar-nav .nav-link {
        font-size: 16px;
    }
}
@media(min-width: 1500px) {
    .main-container .navbar-nav .nav-link {
        font-size: 18px;
    }
}
@media(min-width: 1800px) {
    .main-container .navbar-nav .nav-link {
        font-size: 20px;
    }
}
@media(min-width: 2200px) {
    .main-container .navbar-nav .nav-link {
        font-size: 22px;
    }
}

.main-container .navbar-brand {
    padding-left: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
}
.main-container .navbar-brand.dropdown-toggle::after {
    display: none;
}
@media(min-width: 2000px) {
    .main-container .navbar-brand {
        font-size: 28px;
    }
}
    .main-container .navbar-brand img {
        width: 110px;
    }

/* MIDDLE */
.middle-content-container {
    margin-bottom: 5px;
    display: flex;
    width: 100%;
    flex: 1;
    overflow: hidden;
}
@media(max-width: 576px) {
    .middle-content-container {
        flex-direction: column;
    }
}
@media(max-height: 576px) {
    .middle-content-container {
        height: calc(100% - 80px);
    }
}

    .middle-content-container .left-container {
        display: flex;
        margin-right: 5px;
        width: calc(80% - 5px);
        float: left;
    }
    /* this was 992px */
    @media(max-width: 576px) {
        .middle-content-container .left-container {
            display: inline-block;
        }
    }
    @media(max-width: 576px) {
        .middle-content-container .left-container {
            margin-bottom: 10px;
            width: 100%;
            float: none;
            flex: 1;
        }
    }

        .middle-content-container .left-container .buttons-container {
            background-color: #f09650;
            border: 1px solid #000;
            margin-right: 5px;
            width: auto;
            float: left;
            overflow: auto;
        }
        /* this was 992px */
        @media(max-width: 576px) {
            .middle-content-container .left-container .buttons-container {
                margin-right: 0;
                width: 100%;
                height: 70px;
                float: none;
                white-space: nowrap;
            }
        }
        @media(min-width: 992px) {
            .middle-content-container .left-container .buttons-container {
                max-width: 100px;
            }
        }

            .middle-content-container .left-container .buttons-container ul#menu {
                margin: 0;
                padding: 6px;
                list-style-type: none;
            }
            /* this was 992px */
            @media(max-width: 576px) {
                .middle-content-container .left-container .buttons-container ul#menu {
                    display: flex;
                }
            }

                .middle-content-container .left-container .buttons-container ul#menu li {
                    margin-bottom: 6px;
                    width: 100%;
                }
                /* this was 992px */
                @media(max-width: 576px) {
                    .middle-content-container .left-container .buttons-container ul#menu li {
                        margin-bottom: 0;
                        margin-right: 10px;
                        width: auto;
                        float: left;
                    }
                }
                .middle-content-container .left-container .buttons-container ul#menu li:last-child {
                    margin-bottom: 0;
                }

                    .middle-content-container .left-container .buttons-container ul#menu li a {
                        padding: 6px;
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        text-decoration: none;
                        font-size: 14px;
                        color: #fff;
                        background-color: #333;
                        -webkit-border-radius: 10px;
                        -moz-border-radius: 10px;
                        border-radius: 10px;
                        text-align: center;
                    }
                    @media(max-width: 992px) {
                        .middle-content-container .left-container .buttons-container ul#menu li a {
                            width: 80px;
                            font-size: 10px;
                        }
                    }
                    @media(max-width: 576px) {
                        .middle-content-container .left-container .buttons-container ul#menu li a {
                            min-height: 47px;
                        }
                    }
                    .middle-content-container .left-container .buttons-container ul#menu li a:hover {
                        cursor: pointer;
                        text-decoration: none;
                        background-color: #75140c;
                    }

                        .middle-content-container .left-container .buttons-container ul#menu li a i {
                            margin-bottom: 4px;
                            font-size: 24px;
                            color: #f2a83b;
                        }
                        /* this was 992px */
                        @media(max-width: 992px) {
                            .middle-content-container .left-container .buttons-container ul#menu li a i {
                                font-size: 16px;
                            }
                        }

        .middle-content-container .left-container .tv-container {
            background-color: #ccc;
            border: 1px solid #000;
            flex: 1;
            float: left;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* this was 992px */
        @media(max-width: 576px) {
            .middle-content-container .left-container .tv-container {
                float: none;
                /* display: block; */
                width: 100%;
                /* height: calc(100% - 70px); */
                height: 350px;
            }
        }

        .middle-content-container .left-container .contact-container {
            padding-top: 10px;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: scroll;
            background-color: #ccc;
            border: 1px solid #000;
        }

            .middle-content-container .left-container .contact-container .title {
                margin-bottom: 2px;
                font-weight: bold;
                font-size: 20px;
            }

            .middle-content-container .left-container .contact-container .subtitle {
                margin-bottom: 20px;
                font-size: 16px;
            }

            .middle-content-container .left-container .contact-container .form-container {
                width: 100%;
                max-width: 350px;
            }

                .middle-content-container .left-container .contact-container .form-container form {
                    width: 100%;
                }

                    .middle-content-container .left-container .contact-container .form-container form .form-group {
                        margin-bottom: 10px;
                        width: 100%;
                    }

            .player-container {
                width: 100%;
                height: 100%;
                color: #000;
                position: relative;
            }
            .player-container.radio {
                display: flex;
                flex-direction: column;
                justify-items: center;
                align-items: center;
                position: relative;
            }

                .player-container .logo-container {
                    width: 50px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 1;
                    background-color: #ffffff;
                }
                @media(min-width: 2000px) {
                    .player-container .logo-container {
                        width: 70px;
                    }
                }

                    .player-container .logo-container img {
                        width: 100%;
                    }

                #tv {
                    width: 100%;
                    height: 100%;
                }
                    #tv .vjs-progress-control {
                        display: none !important;
                    }
                    #tv.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
                        opacity: 1 !important;
                    }
                    #tv .vjs-control-bar {
                        background-color: rgba(43, 51, 63, 1) !important;
                    }
                    #tv .vjs-picture-in-picture-control {
                        display: none !important;
                    }
                    #tv .vjs-button i.custom-button {
                        font-size: 16px;
                    }

                .player-container.radio .name {
                    margin-bottom: 15px;
                    font-size: 16px;
                    font-weight: bold;
                    z-index: 9;
                    padding: 6px 10px;
                    border-radius: 10px;
                    background-color: rgba(255, 255, 255, 0.8);
                }

                .player-container.radio .radio-background {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                }

    .middle-content-container .right-container {
        width: 20%;
        float: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    @media(max-width: 576px) {
        .middle-content-container .right-container {
            flex: 1;
            width: 100%;
            height: 100px;
        }
    }
    @media(max-width: 500px) {
        .middle-content-container .right-container {
            font-size: 20px;
        }
    }
        .middle-content-container .right-container .header-container {
            margin-bottom: 5px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border: 1px solid #000;
        }
            .middle-content-container .right-container .header-container .greeting {
                font-size: 16px;
                line-height: 22px;
                font-weight: bold;
                text-indent: 2px;
            }
            .middle-content-container .right-container .header-container .time {
                padding: 0 6px;
                font-size: 16px;
                line-height: 22px;
                font-weight: bold;
                background-color: #009900;
                color: #ffffff;
                text-align: center;
            }
            @media(max-width: 900px) {
                .middle-content-container .right-container .header-container .greeting,
                .middle-content-container .right-container .header-container .time {
                    font-size: 10px;
                    line-height: 14px;
                }
            }
            @media(max-width: 660px) {
                .middle-content-container .right-container .header-container .greeting,
                .middle-content-container .right-container .header-container .time {
                    padding: 0 2px;
                }
            }
            @media(max-width: 624px) {
                .middle-content-container .right-container .header-container .greeting,
                .middle-content-container .right-container .header-container .time {
                    font-size: 10px;
                    line-height: 16px;
                }
            }
            @media(min-width: 1500px) {
                .middle-content-container .right-container .header-container .greeting,
                .middle-content-container .right-container .header-container .time {
                    font-size: 20px;
                    line-height: 26px;
                }
            }
            @media(min-width: 2000px) {
                .middle-content-container .right-container .header-container .greeting,
                .middle-content-container .right-container .header-container .time {
                    font-size: 26px;
                    line-height: 32px;
                }
            }
            @media(min-width: 3000px) {
                .middle-content-container .right-container .header-container .greeting,
                .middle-content-container .right-container .header-container .time {
                    font-size: 30px;
                    line-height: 36px;
                }
            }
            @media(min-width: 4000px) {
                .middle-content-container .right-container .header-container .greeting,
                .middle-content-container .right-container .header-container .time {
                    font-size: 40px;
                    line-height: 46px;
                }
            }
        .middle-content-container .right-container .bottom-area {
            flex: 1;
            border: 1px solid #000;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
            .middle-content-container .right-container .bottom-area #rightTabs {
            }
                .middle-content-container .right-container .bottom-area #rightTabs .nav-item {
                }
                    .middle-content-container .right-container .bottom-area #rightTabs .nav-item .nav-link {
                        padding: 6px 4px;
                        border-radius: 0;
                        background-color: #ccc;
                        font-size: 16px;
                        color: #000;
                        border: none;
                        border-right: 1px solid #000;
                    }
                    .middle-content-container .right-container .bottom-area #rightTabs .nav-item .nav-link.active {
                        background-color: #838282;
                        color: #000;
                    }
                    @media(max-width: 1014px) {
                        .middle-content-container .right-container .bottom-area #rightTabs .nav-item .nav-link {
                            font-size: 14px;
                        }
                    }
                    @media(max-width: 920px) {
                        .middle-content-container .right-container .bottom-area #rightTabs .nav-item .nav-link {
                            padding-top: 0;
                            padding-bottom: 0;
                            font-size: 12px;
                        }
                    }
                    @media(max-width: 824px) {
                        .middle-content-container .right-container .bottom-area #rightTabs .nav-item .nav-link {
                            font-size: 10px;
                        }
                    }
                    .middle-content-container .right-container .bottom-area #rightTabs .nav-item:last-child .nav-link {
                        border-right: none;
                    }
            .middle-content-container .right-container .bottom-area #rightTabsContent {
                height: 100%;
                overflow: hidden;
            }
                .middle-content-container .right-container .bottom-area #rightTabsContent .tab-pane {
                    height: 100%;
                    max-height: 100%;
                }
                .middle-content-container .right-container .bottom-area #rightTabsContent .tab-pane.with-padding {
                    padding: 5px;
                }
                    .middle-content-container .right-container .bottom-area #rightTabsContent .tab-pane #homeSlider {
                        width: 100%;
                    }
                        .middle-content-container .right-container .bottom-area #rightTabsContent .tab-pane #homeSlider img {
                            width: 100%;
                        }

            .middle-content-container .right-container .bottom-area .prayer-times-container {
                padding: 5px;
                width: 100%;
                height: 100%;
                overflow: scroll;
            }
                .middle-content-container .right-container .bottom-area .prayer-times-container .date {
                    padding: 2px 4px;
                    margin-bottom: 5px;
                    width: 100%;
                    font-size: 16px;
                    text-align: center;
                    background-color: rgba(0, 0, 0, 0.9);
                    color: #fff;
                    border-radius: 10px;
                }
                @media(max-width: 992px) {
                    .middle-content-container .right-container .bottom-area .prayer-times-container .date {
                        font-size: 12px;
                    }
                }
                .middle-content-container .right-container .bottom-area .prayer-times-container .prayer-time {
                    padding: 4px 2px;
                    margin-bottom: 5px;
                    width: 100%;
                    background-color: rgba(0, 0, 0, 0.7);
                    color: #fff;
                    border-radius: 10px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    font-size: 16px;
                }
                @media(max-width: 992px) {
                    .middle-content-container .right-container .bottom-area .prayer-times-container .prayer-time {
                        font-size: 12px;
                    }
                }
                    .middle-content-container .right-container .bottom-area .prayer-times-container .prayer-time .title {
                        
                    }
                    .middle-content-container .right-container .bottom-area .prayer-times-container .prayer-time .time {
                    }

    .offcanvas.side-menu {
        width: 100%;
        max-width: 250px;
    }

        .offcanvas.side-menu ul {
            padding: 0;
            list-style-type: none;
        }

            .offcanvas.side-menu ul li {
                margin-bottom: 6px;
                width: 100%;
            }

                .offcanvas.side-menu ul li a {
                    padding: 8px 4px;
                    display: block;
                    width: 100%;
                    font-size: 16px;
                    text-decoration: none;
                    background-color: #333;
                    color: #fff;
                    border-radius: 10px;
                    text-align: center;
                }
                .offcanvas.side-menu ul li a:hover {
                    cursor: pointer;
                    text-decoration: none;
                    background-color: #75140c;
                }
                .offcanvas.side-menu ul li a.active {
                    background-color: #75140c;
                }

    .middle-content-container .left-container .mosque-container {
        width: 100%;
        position: relative;
        background-color: #ccc;
        border: 1px solid #000;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    /* this was 992px */
    @media(max-width: 576px) {
        .middle-content-container .left-container .mosque-container {
            /* display: block; */
            width: 100%;
            /* height: calc(100% - 70px); */
            height: 350px;
        }
    }
        .middle-content-container .left-container .mosque-container .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            min-height: 100%;
            height: 100%;
            z-index: 1;
            background-color: rgba(0, 0, 0, 0.2);
        }
        .middle-content-container .left-container .mosque-container .contents {
            padding: 0 5px 5px 5px;
            width: 100%;
            height: 100%;
            overflow: scroll;
            z-index: 9;
            color: #fff;
            position: inherit;
            display: flex;
            flex-direction: column;
        }
            .middle-content-container .left-container .mosque-container .contents .title-container {
                margin-bottom: 5px;
                width: 100%;
                text-align: center;
                position: relative;
            }
                .middle-content-container .left-container .mosque-container .contents .title-container .back {
                    width: 30px;
                    height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 100%;
                    text-decoration: none;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background-color: rgba(0, 0, 0, 0.6);
                    color: #fff;
                    font-size: 20px;
                }
                @media(max-width: 992px) {
                    .middle-content-container .left-container .mosque-container .contents .title-container .back {
                        width: 20px;
                        height: 20px;
                        font-size: 16px;
                    }
                }
                .middle-content-container .left-container .mosque-container .contents .title-container .title {
                    padding: 2px 15px;
                    border-radius: 10px;
                    width: auto;
                    font-weight: bold;
                    font-size: 20px;
                    background-color: rgba(0,0,0,0.6);
                    display: inline-block;
                }
                @media(max-width: 992px) {
                    .middle-content-container .left-container .mosque-container .contents .title-container .title {
                        font-size: 14px;
                    }
                }
                    .middle-content-container .left-container .mosque-container .contents .title-container .title a {
                        color: #fff;
                        text-decoration: none;
                    }
            .middle-content-container .left-container .mosque-container .contents .page-data {
                display: flex;
                flex-direction: row;
                flex: 1;
            }
            @media(max-width: 576px) {
                .middle-content-container .left-container .mosque-container .contents .page-data {
                    flex-direction: column;
                }
            }
                .middle-content-container .left-container .mosque-container .contents .page-data .links-container {
                    width: auto;
                    display: inline-block;
                    border-radius: 10px;
                }
                    .middle-content-container .left-container .mosque-container .contents .page-data .links-container > ul {
                        padding: 10px 15px;
                        margin: 0;
                        list-style: none;
                        background-color: rgba(0,0,0,0.6);
                        border-right: 1px solid #aaa;
                        border-top-left-radius: 10px;
                        border-bottom-left-radius: 10px;
                    }
                    @media(max-width: 576px) {
                        .middle-content-container .left-container .mosque-container .contents .page-data .links-container > ul {
                            border-right: none;
                            border-top-left-radius: 0;
                            border-bottom-left-radius: 0;
                        }
                    }
                    @media(max-width: 992px) {
                        .middle-content-container .left-container .mosque-container .contents .page-data .links-container > ul {
                            padding: 4px 4px;
                        }
                    }
                        .middle-content-container .left-container .mosque-container .contents .page-data .links-container ul li {
                            margin-bottom: 2px;
                        }
                        .middle-content-container .left-container .mosque-container .contents .page-data .links-container ul li:last-child {
                            margin-bottom: 0;
                        }
                            .middle-content-container .left-container .mosque-container .contents .page-data .links-container ul li a {
                                color: #fff;
                                text-decoration: none;
                                display: block;
                                font-size: 16px;
                            }
                            @media(max-width: 992px) {
                                .middle-content-container .left-container .mosque-container .contents .page-data .links-container ul li a {
                                    font-size: 12px;
                                }
                            }
                            .middle-content-container .left-container .mosque-container .contents .page-data .links-container ul li a:hover,
                            .middle-content-container .left-container .mosque-container .contents .page-data .links-container ul li a[aria-expanded=true] {
                                color: #aaa;
                            }
                                .middle-content-container .left-container .mosque-container .contents .page-data .links-container ul li a i {
                                    font-size: 14px;
                                }
                                @media(max-width: 992px) {
                                    .middle-content-container .left-container .mosque-container .contents .page-data .links-container ul li a i {
                                        font-size: 12px;
                                    }
                                }
                            .middle-content-container .left-container .mosque-container .contents .page-data .links-container ul li .collapse ul {
                                padding: 8px 0 8px 10px;
                                list-style: none;
                                border-bottom: 1px solid #666;
                            }
                                .middle-content-container .left-container .mosque-container .contents .page-data .links-container ul li .collapse ul li a {
                                    display: flex;
                                    align-items: center;
                                }
                                    .middle-content-container .left-container .mosque-container .contents .page-data .links-container ul li .collapse ul li a .fa-circle {
                                        margin-right: 8px;
                                        font-size: 10px;
                                        color: #FFA500;
                                    }
                                    .middle-content-container .left-container .mosque-container .contents .page-data .links-container ul li .collapse ul li.active a .fa-circle {
                                        color: #aaa;
                                    }
                .middle-content-container .left-container .mosque-container .contents .page-data .page {
                    padding: 5px 5px 5px 10px;
                    flex: 1;
                    background-color: rgba(0, 0, 0, 0.6);
                    font-size: 16px;
                    border-top-right-radius: 10px;
                    border-bottom-right-radius: 10px;
                }
                @media(max-width: 992px) {
                    .middle-content-container .left-container .mosque-container .contents .page-data .page {
                        font-size: 12px;
                    }
                }
                @media(max-width: 576px) {
                    .middle-content-container .left-container .mosque-container .contents .page-data .page {
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }
            .middle-content-container .left-container .mosque-container .contents .content {
                width: 100%;
                display: inline-block;
            }
        
        .middle-content-container .left-container .mosque-container .contents .events-container {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        @media(max-width: 1200px) {
            .middle-content-container .left-container .mosque-container .contents .events-container {
                display: block;
            }
        }
            .middle-content-container .left-container .mosque-container .contents .events-container .event {
                padding-bottom: 10px;
                margin-bottom: 10px;
                width: 50%;
                height: auto;
                display: flex;
                border-bottom: 1px solid #aaa;
            }
            @media(max-width: 1200px) {
                .middle-content-container .left-container .mosque-container .contents .events-container .event {
                    width: 100%;
                }
            }
                .middle-content-container .left-container .mosque-container .contents .events-container .image-container {
                    margin-right: 15px;
                    width: 100%;
                    max-width: 150px;
                }
                @media(max-width: 992px) {
                    .middle-content-container .left-container .mosque-container .contents .events-container .image-container {
                        max-width: 100px;
                    }
                }
                    .middle-content-container .left-container .mosque-container .contents .events-container .image-container a {
                        width: 100%;
                        display: block;
                    }
                        .middle-content-container .left-container .mosque-container .contents .events-container .image-container img {
                            width: 100%;
                        }
                .middle-content-container .left-container .mosque-container .contents .events-container .descriptions {
                    flex: 1;
                    padding: 0 10px 0 0;
                }
                    .middle-content-container .left-container .mosque-container .contents .events-container .descriptions .title {
                    }
                        .middle-content-container .left-container .mosque-container .contents .events-container .descriptions .title a {
                            margin-bottom: 6px;
                            display: block;
                            color: #fff;
                            text-decoration: none;
                            font-size: 16px;
                            font-weight: bold;
                        }
                    .middle-content-container .left-container .mosque-container .contents .events-container .descriptions .date {
                        width: 100%;
                        color: #ccc;
                        font-size: 12px;
                    }

            .middle-content-container .left-container .mosque-container .contents .event-images {
                margin-right: 10px;
                margin-bottom: 10px;
                width: 100%;
                max-width: 400px;
                float: left;
            }
            @media(max-width: 991px) {
                .middle-content-container .left-container .mosque-container .contents .event-images {
                    margin-right: 0;
                    margin: auto;
                    margin-bottom: 15px;
                    float: none;
                }
            }
/* MIDDLE FINISH */

/* BOTTOM */
.bottom-content-container {
    width: 100%;
    height: 100px;
    display: flex;
}
@media(min-width: 1300px) {
    .bottom-content-container {
        height: 140px;
    }
}
@media(max-width: 576px) {
    .bottom-content-container {
        height: 150px;
    }
}
@media(max-height: 576px) {
    .bottom-content-container {
        height: 70px;
    }
}

    .bottom-content-container .left-container {
        margin-right: 5px;
        width: calc(80% - 5px);
        height: 100%;
        float: left;
    }
    @media(max-width: 576px) {
        .bottom-content-container .left-container {
            width: calc(60% - 5px);
        }
    }

        .bottom-content-container .left-container .scrolling-text {
            margin-bottom: 5px;
            width: 100%;
            height: 28%;
            display: flex;
            align-items: center;
            border: 1px solid #000;
            color: #fff;

            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
        @media(max-width: 576px) {
            .bottom-content-container .left-container .scrolling-text {
                height: 20%;
            }
        }
            .bottom-content-container .left-container .scrolling-text .scrolling-container {
                width: 100%;
                font-size: 16px;
            }
            @media(max-width: 920px) {
                .bottom-content-container .left-container .scrolling-text .scrolling-container {
                    font-size: 14px;
                }
            }

                .bottom-content-container .left-container .scrolling-text .scrolling-container a {
                    color: #fff;
                    text-decoration: none;
                }
                .bottom-content-container .left-container .scrolling-text .scrolling-container #currencies {
                    display: inline-flex;
                }
                    .bottom-content-container .left-container .scrolling-text .scrolling-container #currencies .currency-container {
                        display: inline-block;
                        padding-right: 6px;
                        margin-right: 6px;
                    }
                        .bottom-content-container .left-container .scrolling-text .scrolling-container #currencies .currency-container .currency {
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                            align-items: center;
                        }
                            .bottom-content-container .left-container .scrolling-text .scrolling-container #currencies .currency-container .currency img {
                                margin-right: 4px;
                                width: 16px;
                            }
                            @media(max-width: 920px) {
                                .bottom-content-container .left-container .scrolling-text .scrolling-container #currencies .currency-container .currency img {
                                    width: 12px;
                                }
                            }
                            .bottom-content-container .left-container .scrolling-text .scrolling-container #currencies .currency-container .currency .amount {
                                margin-right: 4px;
                                width: 16px;
                                display: inline-table;
                            }
                            .bottom-content-container .left-container .scrolling-text .scrolling-container #currencies .currency-container .currency .label {
                                display: inline-table;
                            }

        .bottom-content-container .left-container .bottom-container {
            width: 100%;
            height: calc(72% - 10px);
            border: 1px solid #000;
            -webkit-border-bottom-left-radius: 10px;
            -moz-border-radius-bottomleft: 10px;
            border-bottom-left-radius: 10px;
            display: flex;
            flex-direction: row;
        }
            .bottom-content-container .left-container .bottom-container .left {
                padding: 0 10px;
                margin-right: 10px;
                width: auto;
                display: flex;
                align-items: center;
                font-size: 20px;
                border-right: 1px solid #000;
            }
            @media(max-width: 576px) {
                .bottom-content-container .left-container .bottom-container .left {
                    font-size: 14px;
                }
            }
            .bottom-content-container .left-container .bottom-container .right {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
                .bottom-content-container .left-container .bottom-container .right .title {
                    margin-bottom: 4px;
                    font-size: 26px;
                    line-height: 26px;
                }
                @media(max-width: 920px) {
                    .bottom-content-container .left-container .bottom-container .right .title {
                        font-size: 14px;
                        line-height: 14px;
                    }
                }
                .bottom-content-container .left-container .bottom-container .right .subtitle {
                    font-size: 16px;
                    line-height: 16px;
                }
                @media(max-width: 920px) {
                    .bottom-content-container .left-container .bottom-container .right .subtitle {
                        font-size: 12px;
                        line-height: 12px;
                    }
                }

    .bottom-content-container .right-container {
        width: 20%;
        height: 100%;
        float: left;
    }
    @media(max-width: 576px) {
        .bottom-content-container .right-container {
            width: 40%;
        }
    }

        .bottom-content-container .right-container .header-text {
            margin-bottom: 5px;
            width: 100%;
            height: 28%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            border: 1px solid #000;
            color: #fff;
            position: relative;

            -webkit-border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 10px;
            -moz-border-radius-topleft: 10px;
            -moz-border-radius-topright: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        @media(max-width: 1150px) {
            .bottom-content-container .right-container .header-text {
                font-size: 12px;
            }
        }
        @media(max-width: 576px) {
            .bottom-content-container .right-container .header-text {
                height: 20%;
            }
        }
        @media(max-width: 1000px) {
            .bottom-content-container .right-container .header-text {
                font-size: 10px;
            }
        }
        @media(max-width: 860px) {
            .bottom-content-container .right-container .header-text span {
                display: none;
            }
        }
            .bottom-content-container .right-container .header-text img {
                position: absolute;
                right: 5px;
                width: 18px;
            }
            @media(max-width: 920px) {
                .bottom-content-container .right-container .header-text img {
                    width: 12px;
                }
            }

        .bottom-content-container .right-container .bottom-container {
            padding: 5px;
            width: 100%;
            height: calc(72% - 10px);
            border: 1px solid #000;
            -webkit-border-bottom-right-radius: 10px;
            -moz-border-radius-bottomright: 10px;
            border-bottom-right-radius: 10px;
        }
            .bottom-content-container .right-container .bottom-container a {
                display: block;
                font-size: 16px;
                text-decoration: none;
            }
            @media(max-width: 920px) {
                .bottom-content-container .right-container .bottom-container a {
                    font-size: 14px;
                }
            }

    img.announcement-icon {
        margin-right: 6px;
        width: 24px !important;
    }
/* BOTTOM FINISH */

.scrolling-container {
    height: 100%;
    overflow: hidden;
}
    .scrolling-container ul {
        list-style: disc;
        margin: 0;
        padding-left: 14px;
        /* animation: scroll 20s linear infinite; */
        width: 100%;
    }
        .scrolling-container ul li {
            padding: 0;
            font-size: 16px;
        }
        @media(max-width: 920px) {
            .scrolling-container ul li {
                font-size: 14px;
            }
        }