@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap");

:root{
    /* [clr] colors */
    --clr-primary: #c5944b;
    --clr-secondary: #4b4c4d ;
    --clr-tertiary: #133a5b;
    --clr-white: #FFFFFF;

    /* [fnt] font */
    --fnt: 'Tajawal', sans-serif;

    /* [siz] font size */
    --siz-12: 0.75rem;
    --siz-13: 0.8125rem;
    --siz-14: 0.875rem;
    --siz-16: 1rem;
    --siz-18: 1.125rem;
    --siz-20: 1.25rem;
    --siz-24: 1.5rem;
    --siz-32: 2rem;
    --siz-36: 2.25rem;
    --siz-42: 2.625rem;
    --siz-48: 3rem;

    /* [wgt] font weight */
    --wgt-light: 300;
    --wgt-regular: 400;
    --wgt-medium: 500;
    --wgt-semibold: 600;
    --wgt-bold: 700;

    --header-height: 8.125rem;
    --inner-hero-height: 24rem;

    /* component config */
    --link-card-height-md: 12rem;

}

/* GLOBAL STYLE RESET */

.page__contet__parent {
    padding-top: 4rem !important;
}

a, a:hover, a:focus, a:visited{
    text-decoration: none;
    color: inherit;
}

.nav-link.active {
    background-color: inherit !important;
}

/* TYPOGRAPHY */

h1{
    color: var(--clr-primary);
    font-size: var(--siz-32);
    font-weight: var(--wgt-bold);
}

h2{
    color: var(--clr-secondary);
    font-size: var(--siz-20);
    font-weight: var(--wgt-bold);
}

h2 > span:after {
    content: "";
    width: 2rem;
    height: 0.25rem;
    background: var(--clr-primary);
    display: block;
    border-radius: 1rem;
}

h3{
    color: var(--clr-secondary);
    font-size: var(--siz-16);
    font-weight: var(--wgt-bold);
}

h4{
    color: var(--clr-secondary);
    font-size: var(--siz-14);
    font-weight: var(--wgt-bold);
}

h5{
    color: var(--clr-secondary);
    font-size: var(--siz-14);
    font-weight: var(--wgt-bold);
}

p{
    color: var(--clr-secondary);
    font-size: var(--siz-16);
    font-weight: var(--wgt-regular);
}

body{
    color: var(--clr-secondary);
    font-size: var(--siz-14);
    font-weight: var(--wgt-regular);
    font-family: var(--fnt) !important;
}

body.cms-preview{
    font-family: var(--fnt) !important;
}

/* BUTTONS */


.btn.btn-bk-primary{
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
    font-weight: var(--wgt-medium);
}

.btn > span > span{
    color: var(--clr-white);
    vertical-align: -webkit-baseline-middle;
}

/* NAVBAR */

/* Navbar reset */

#mainMenuNavBarToggle > .navbar-nav > .nav-item:last-child > .nav-link{
    all: unset;
}

#mainMenuNavBarToggle > .navbar-nav > .nav-item:last-child > .nav-link {
    background:none;
    padding: 0.407rem 0.75rem;
    top: 8px;
    position: relative;
    font-size: 1rem;
    font-weight: 500;
    color: #000 !important;
}

@media only screen and (max-width: 991px) {
    #mainMenuNavBarToggle > .navbar-nav > .nav-item:last-child > .nav-link {
        padding: 0.5rem 0rem !important;
    }
}

/* GLOBAL COMPONENTS */

.link-card{
    min-height: var(--link-card-height-md);
}

.link-card .nav > .nav-item{
    position: relative
}

.link-card .nav > .nav-item > .nav-link{
    min-height: var(--link-card-height-md);
    display: flex;
    align-items: end;
    font-size: var(--siz-20);
    border-radius: 0;
    font-weight: var(--wgt-semibold);
    z-index: 2;
    position: relative;
}

.link-card .nav > .nav-item:before{
    content: '';
    width: 100%;
    height: 50%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(0deg, #ddd6c4db, transparent);
    z-index: 1;
}

/* HOME PAGE */

.bkir-stock-info > div{
    height: 100% !important;
}

.bkir-stock-info > div {
    background: #fff;
    padding: 1rem;
    border: 1px solid #EEEFF2;
}

.bkir-pro-chart {
    background: #fff;
    padding: 1rem 1rem 0 1rem;
    border: 1px solid #EEEFF2;
}

.bkir-pro-chart  #chartContainer canvas{
    max-height: 240px !important;
}


.home-page.theme2 .data-table .layout-row:hover {
    background: none;
    border-color: transparent;
}

.home__hero .carousel-content {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
}

.home__hero {
	height: 500px;
}


/* INNER PAGE - GENERAL */

.inner-hero{
    height: var(--inner-hero-height);
    margin-top: -4rem;
}

.inner-hero > .row {
    height: 100%;
}

.inner-hero > .row > .col-md{
    display: flex;
    align-items: flex-end!important;
    margin-bottom: 1rem
}

/*
.inner-hero h1{
    color: var(--clr-secondary)
}
*/

.btn.btn-bk-primary{
    background-color: var(--clr-primary);
}



/* Table Sortable */



.sortable{
    cursor: pointer !important;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;


}

.sortable > div:after{
    width: 16px;
    height: 20px;
    content: '';
    position: absolute;
    display: inline-block;
    float: left;
    margin: auto 0.25rem;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/bk-icons/sortable.svg');
    margin-top: 2px;
}
.sortable.sortable-ase > div:after{
    background-image: url('/bk-icons/sortable-down.svg') !important;
}
.sortable.sortable-des > div:after{
    background-image: url('/bk-icons/sortable-up.svg') !important;
}
.sortable > div:empty:after {
   display: none;
}

.ember-view .sortable > div:after{
	display: none
}


.scrolltotop-container {
    position: fixed;
    right: 10vw;
    left: auto;
    bottom: 3rem;
    transition: right 0.5s;
    cursor: pointer;
    background-color: white;
    font-size: 20px;
    padding: 10px;
    opacity: 0;
    border-radius: 5rem;
    box-shadow: 0 0 4rem rgb(0 0 0 / 30%);
    z-index: 999;
}

.scrolltotop-transition {
    opacity: 1 !important;
}
/* TEM MENI FIX ISSUE */

.footer__container a,
.navbar-nav a {
    display: block !important;
}

.navbar-nav a *{
    display: block !important;
}



@media only screen and (max-width: 991px) and (-Webkit-min-device-pixel-ratio: 1),
@media only screen and (max-width: 991px) and (-moz-min-device-pixel-ratio: 1),
@media only screen and (max-width: 991px) and (-o-min-device-pixel-ratio: 1),
@media only screen and (max-width: 991px) and (min-device-pixel-ratio: 3),
@media only screen and (min-width: 0px) and (max-width: 991px) {

    /* Global - Navbar */

    .navbar {
        z-index: 1;
        background: #fff;
        height: 58px !important; 
	z-index: 999;
    }
	.navbar .megamenu {
    	padding: 0 !important;
    	box-shadow: none !important;
    	border: none !important;
    	background: none !important;
    }
    .navbar-nav > .nav-item > .megamenu > .row > .col-md:last-child:not(:only-child):not(:nth-child(5)):not(:nth-child(6)):not(:nth-child(7)):not(:nth-child(8)):not(:nth-child(9)) {
        background: none !important;
        color: #4b4c4d; !important
    }
	.navbar .megamenu > .row > .col-md:last-child:not(:only-child):not(:nth-child(5)):not(:nth-child(6)):not(:nth-child(7)):not(:nth-child(8)):not(:nth-child(9)) {
		margin: auto;
		background: inherit;
		color: inherit;
		padding: 1rem;
	}
	.navbar .megamenu > .row > .col-md:last-child:not(:only-child):not(:nth-child(5)):not(:nth-child(6)):not(:nth-child(7)):not(:nth-child(8)):not(:nth-child(9)) > ul > li > a {
		color: inherit;
	}
	.navbar .megamenu > .row > .col-md:nth-child(5),
	.navbar .megamenu > .row > .col-md:nth-child(6),
	.navbar .megamenu > .row > .col-md:nth-child(7),
	.navbar .megamenu > .row > .col-md:nth-child(8),
	.navbar .megamenu > .row > .col-md:nth-child(9),
	.navbar .megamenu > .row > .col-md:nth-child(10){
		max-width: 100% !important;
	}
	#mainMenuNavBarToggle > .navbar-nav > .nav-item:last-child > .megamenu {margin-top: 2rem;}
	.nav-float {
		left: 0;
		position: absolute !important;
	}
	.nav-float .navbar-nav{
        width: 100% !important;
    }
	.header__utility{
		width: calc(100% - 10rem);
	}
	.header__utility, .nav-float {
		margin-top: 0 !important;
	}
    .navbar .primary-logo {
        height: 68px !important;
    }
    .navbar.navbar-expand-lg {
        background: transparent;
        z-index: 999;
    }
    .navbar.navbar-expand-lg > .container{
		padding: 0rem 1rem;
		top: -2px;
		position: relative;
    }
    [dir="rtl"]
    .navbar.navbar-expand-lg > .container {
        display: contents;
    }
    .navbar-collapse{
        background: #EEEFF2;
        padding: 2rem 2rem 3rem !important;
        margin: 0rem -0.5rem;
        max-height: calc(100vh - 68px);
		overflow-y: auto;
		display:none;
		height: auto;
    }
	#mainMenuNavBarToggle.show{
		position: fixed;
		left: 0rem;
		top: 68px;
		height: calc(100vh - 1.8rem);
		display: block;
		z-index: 999;
		margin-top: -0.5rem;
	}
	.home-page #mainMenuNavBarToggle.show{
        left: 0.5rem;
        top: 132px;
        height: calc(100vh - 1.8rem);
	}
    #mainMenuNavBarToggle{
        height: auto;
        padding: 0;
    }
    [dir="rtl"]
    #mainMenuNavBarToggle {
        padding-right: 2rem !important;
    }
	#mainMenuNavBarToggle > .navbar-nav > .nav-item > .megamenu > .row > .col-md:last-child:not(:only-child):not(:nth-child(5)):not(:nth-child(6)):not(:nth-child(7)):not(:nth-child(8)):not(:nth-child(9)) *{
		color: #2b3035 !important;
	}
    [dir="rtl"]
    #mainMenuNavBarToggle .nav-item.dropdown {
        margin-right: 0px;
    }

    /* Mobile Navbar */

    #mainMenuNavBarToggle .navbar-nav .nav-item .nav-link:before {
        width: 2rem;
        height: 2rem;
        content:'';
        margin-right: 1rem;
        display: inline-block;
        float: left;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index:99;
        top: -8px;
        position: relative;
    }

    #mainMenuNavBarToggle .navbar-nav .nav-item:nth-child(1) .nav-link:before {
        background-image: url('/bk-icons/bk-menu-icon-securities.svg');
    }

    #mainMenuNavBarToggle .navbar-nav .nav-item:nth-child(2) .nav-link:before {
        background-image: url('/bk-icons/bk-menu-icon-regulations.svg');
    }

    #mainMenuNavBarToggle .navbar-nav .nav-item:nth-child(3) .nav-link:before {
        background-image: url('/bk-icons/bk-menu-icon-participants.svg');
    }

    #mainMenuNavBarToggle .navbar-nav .nav-item:nth-child(4) .nav-link:before {
        background-image: url('/bk-icons/bk-menu-icon-data-and-research.svg');
    }

    #mainMenuNavBarToggle .navbar-nav .nav-item:nth-child(5) .nav-link:before {
        background-image: url('/bk-icons/bk-menu-icon-announcements.svg');
    }

    #mainMenuNavBarToggle .navbar-nav .nav-item:nth-child(6) .nav-link:before {
        background-image: url('/bk-icons/bk-menu-icon-resources.svg');
    }

    #mainMenuNavBarToggle .navbar-nav .nav-item:nth-child(8) .nav-link:before {
        background-image: url('/bk-icons/bk-menu-icon-otc-platform-dark.svg');
    }



	/* Global - Footer */

    .footer__container.jumbotron{
        padding: 0;
    }
    .footer__container > .container{
        display:block;
        height: auto;
    }
	.footer__container > .footer__nav{
          background: #39444b;
          font-size: 0;
          height: 58px !important;
          bottom: 0 !important;
    }
    .footer__container > .footer__nav > .container > .row > div:nth-child(1) > span{
        display: table;
        width: auto;
        margin: auto;
    }
	.footer__container > .footer__nav > .container > .row > div:nth-child(2) {
        display: none;
    }
    .footer__container > .footer__nav > .container > .row > div:nth-child(1) > span:nth-child(1) {
        height:43px;
    }
    .footer__container > .footer__nav > .container > .row > div:nth-child(1) {
        overflow: hidden;
        height: 58px;
    }
	.footer__declaration {
		text-align: center;
		line-height: 1rem;
		width: 100%;
		position: relative;
		padding-bottom: 0.5rem;
	}
	.footer__declaration > div > div:nth-child(1) {
		margin-bottom: 1rem;
	}
	.footer__container{
		height: autp;
		display: block;
		padding: 2rem !important;
	}

	/* Global - Inner Hero Image */

	.inner-hero {
		object-fit: cover !important;
		object-position: left center !important;
		height: 10rem !important;
	}
	
	[dir="rtl"]
	.inner-hero {
		object-position: right center !important;
	}


	#mainMenuNavBarToggle > .navbar-nav > .nav-item:last-child > .nav-link{
	font-weight: 500;
	font-size: 1rem;
	color: #000 !important;
	}
	
}

/* 11/01/2024 Mobile nav bar issue fix */

@media screen and (max-width:924px){

   .mobile-nav-header {
        background: white !important;
        width: 100vw !important;
        padding-left: 1rem !important;
   }

   .ar .mobile-nav-header {
       width:100vw !important;
       padding-left: 0 !important;
       padding-right: 1rem !important;
   }


   .mobile-nav-main-header {
       background: white !important;
       width: 100vw !important;
       padding-left: 1rem !important;
   }
    
   .ar .mobile-nav-main-header {
       width: 100vw !important;
       padding-left: 0 !important;
       padding-right: 1rem !important;
   }

   .nav-float .navbar-nav {
      height: fit-content !important;
      padding-bottom: 10rem !important;
   }
}

/* 01/02/2024 Page issue for high resolution fix */

.header-image-margin {
    margin-top: -4rem;
}