/*
 * bacis styles
 * 
 * @package Embassy of Botswana
 * @link: https://www.gov.bw/
 * @author Daniel Friedrich (https://slideandscroll.com/)
 * @since: 1.0
*/



/*
____________________________________________________________

screen width "XXL":     min 1400px
____________________________________________________________
*/

/*
____________________________________________________________

screen width "XL":      min 1200px      max 1399px
____________________________________________________________
*/
@media only screen and (max-width: 1399px) {

}

/*
____________________________________________________________

screen width "L":       min 992px       max 1199px
____________________________________________________________
*/
@media only screen and (max-width: 1199px) {

}

/*
____________________________________________________________

screen width "M":       min 768px       max 991px
____________________________________________________________
*/
@media only screen and (max-width: 991px) {

}

/*
____________________________________________________________

screen width "S":       min 576px       max 767px
____________________________________________________________
*/
@media only screen and (max-width: 767px) {

}

/*
____________________________________________________________

screen width "XS":                     max 575px
____________________________________________________________
*/
@media only screen and (max-width: 575px) {

}

/*
____________________________________________________________

print
____________________________________________________________
*/
@media print {
    
}

/*
____________________________________________________________

common
____________________________________________________________
*/

/*
------------------------------------------------------------
standard css settings
------------------------------------------------------------
*/

:root {
    /* letter spacing */
    --BW_LetterSpacing_Narrower: -0.08em;
    --BW_LetterSpacing_Narrow: -0.04em;
    --BW_LetterSpacing_Standard: normal;
    --BW_LetterSpacing_Wide: 0.2em;
    --BW_LetterSpacing_Wider: 0.4em;
    /* line height */
    --BW_LineHeight_Lower: .86em;
    --BW_LineHeight_Low: .93em;
    --BW_LineHeight_Standard: 1em;
    --BW_LineHeight_High: 1.5em;
    --BW_LineHeight_Higher: 2em;
    /* font weight */
    --BW_Font_Weight_Lighter: 200;
    --BW_Font_Weight_Light: 300;
    --BW_Font_Weight_Standard: 400;
    --BW_Font_Weight_Bold: 500;
    --BW_Font_Weight_Bolder: 600;
    /* font size */
    --BW_Font_Size_Smaller: .5rem;
    --BW_Font_Size_Small: .75rem;
    --BW_Font_Size_Standard: 1rem;
    --BW_Font_Size_Large: 1.5rem;
    --BW_Font_Size_Larger: 2rem;
    /* padding & margin */
    --BW_PaddingMargin_Spacing_Smaller: .25rem;
    --BW_PaddingMargin_Spacing_Small: .5rem;
    --BW_PaddingMargin_Spacing_Standard: 1rem;
    --BW_PaddingMargin_Spacing_Big: 1.5rem;
    --BW_PaddingMargin_Spacing_Bigger: 2rem;
    /* border width */
    --BW_Border_Width_Smaller: .0625rem;
    --BW_Border_Width_Small: .125rem;
    --BW_Border_Width_Standard: .1875rem;
    --BW_Border_Width_Big: .25rem;
    --BW_Border_Width_Bigger: .3125rem;
    /* border radius */
    --BW_Border_Radius_Smaller: .125rem;
    --BW_Border_Radius_Small: .25rem;
    --BW_Border_Radius_Standard: .375rem;
    --BW_Border_Radius_Big: .5rem;
    --BW_Border_Radius_Bigger: .625rem;
    /* box shadow size */
    --BW_Box_Shadow_Smaller: 0 .2rem .5rem;
    --BW_Box_Shadow_Small: 0 .3rem .75rem;
    --BW_Box_Shadow_Standard: 0 .4rem 1rem;
    --BW_Box_Shadow_Big: 0 .5rem 1.25rem;
    --BW_Box_Shadow_Bigger: 0 .6rem 1.5rem;
    /* fonts */
    --BW_Font_SansSerif: 'Libre Franklin', sans-serif;
    --BW_Font_Serif: 'Taviraj', serif;
    /* transition */
    --BW_Transition_BackgroundColor: background-color 0.25s ease;
    --BW_Transition_BorderColor: border-color 0.25s ease;
    --BW_Transition_Color: color 0.25s ease;
    --BW_Transition_Fill: fill 0.25s ease;
    --BW_Transition_Opacity: opacity 0.25s ease;
    --BW_Transition_Transform: transform 0.25s ease;
}

/*
------------------------------------------------------------
primary colors
------------------------------------------------------------
*/

body {
    --BW_PrimaryColor_SkyBlue: rgb(109,170,212);
    --BW_PrimaryColor_Black: black;
    --BW_PrimaryColor_White: white;
}

.has-primary-color-sky-blue-background-color,
.BW-Background__PrimaryColor--SkyBlue {
    background-color: var(--BW_PrimaryColor_SkyBlue);
}

.has-primary-color-black-background-color,
.BW-Background__PrimaryColor--Black {
    background-color: var(--BW_PrimaryColor_Black);
}

.has-primary-color-white-background-color,
.BW-Background__PrimaryColor--White {
    background-color: var(--BW_PrimaryColor_White);
}

.has-primary-color-sky-blue-color,
.BW-Font__PrimaryColor--SkyBlue {
    color: var(--BW_PrimaryColor_SkyBlue);
}

.has-primary-color-black-color,
.BW-Font__PrimaryColor--Black {
    color: var(--BW_PrimaryColor_Black);
}

.has-primary-color-white-color,
.BW-Font__PrimaryColor--White {
    color: var(--BW_PrimaryColor_White);
}

/*
------------------------------------------------------------
secondary colors
------------------------------------------------------------
*/

body {
    --BW_SecondaryColor_CasualBlue_Lighter: rgb(147,180,190);
    --BW_SecondaryColor_CasualBlue_Light: rgb(111,155,169);
    --BW_SecondaryColor_CasualBlue_Standard: rgb(76,130,148);
    --BW_SecondaryColor_CasualBlue_Dark: rgb(60,104,118);
    --BW_SecondaryColor_CasualBlue_Darker: rgb(45,78,88);
    --BW_SecondaryColor_MediumPurple_Lighter: rgb(171,179,229);
    --BW_SecondaryColor_MediumPurple_Light: rgb(143,154,220);
    --BW_SecondaryColor_MediumPurple_Standard: rgb(116,129,212);
    --BW_SecondaryColor_MediumPurple_Dark: rgb(92,103,169);
    --BW_SecondaryColor_MediumPurple_Darker: rgb(69,77,127);
    --BW_SecondaryColor_SpringGreen_Lighter: rgb(167,229,185);
    --BW_SecondaryColor_SpringGreen_Light: rgb(138,221,162);
    --BW_SecondaryColor_SpringGreen_Standard: rgb(109,213,139);
    --BW_SecondaryColor_SpringGreen_Dark: rgb(87,170,111);
    --BW_SecondaryColor_SpringGreen_Darker: rgb(65,127,83);
    --BW_SecondaryColor_PatinaGreen_Lighter: rgb(147,190,159);
    --BW_SecondaryColor_PatinaGreen_Light: rgb(111,168,127);
    --BW_SecondaryColor_PatinaGreen_Standard: rgb(76,147,96);
    --BW_SecondaryColor_PatinaGreen_Dark: rgb(60,117,76);
    --BW_SecondaryColor_PatinaGreen_Darker: rgb(45,88,57);
    --BW_SecondaryColor_CoralRed_Lighter: rgb(246,178,178);
    --BW_SecondaryColor_CoralRed_Light: rgb(243,153,153);
    --BW_SecondaryColor_CoralRed_Standard: rgb(240,128,128);
    --BW_SecondaryColor_CoralRed_Dark: rgb(192,102,102);
    --BW_SecondaryColor_CoralRed_Darker: rgb(144,76,76);
    --BW_SecondaryColor_GraniteGrey_Lighter: rgb(245,245,245);
    --BW_SecondaryColor_GraniteGrey_Light: rgb(189,189,189);
    --BW_SecondaryColor_GraniteGrey_Standard: rgb(97,97,97);
    --BW_SecondaryColor_GraniteGrey_Dark: rgb(66,66,66);
    --BW_SecondaryColor_GraniteGrey_Darker: rgb(33,33,33);
}

.BW-Background__SecondaryColor--CasualBlueLighter {
    background-color: var(--BW_SecondaryColor_CasualBlue_Lighter)
}

.BW-Background__SecondaryColor--CasualBlueLight {
    background-color: var(--BW_SecondaryColor_CasualBlue_Light)
}

.has-secondary-color-casual-blue-background-color,
.BW-Background__SecondaryColor--CasualBlueStandard {
    background-color: var(--BW_SecondaryColor_CasualBlue_Standard)
}

.BW-Background__SecondaryColor--CasualBlueDark {
    background-color: var(--BW_SecondaryColor_CasualBlue_Dark)
}

.BW-Background__SecondaryColor--CasualBlueDarker {
    background-color: var(--BW_SecondaryColor_CasualBlue_Darker)
}

.BW-Background__SecondaryColor--MediumPurpleLighter {
    background-color: var(--BW_SecondaryColor_MediumPurple_Lighter)
}

.BW-Background__SecondaryColor--MediumPurpleLight {
    background-color: var(--BW_SecondaryColor_MediumPurple_Light)
}

.has-secondary-color-medium-purple-background-color,
.BW-Background__SecondaryColor--MediumPurpleStandard {
    background-color: var(--BW_SecondaryColor_MediumPurple_Standard)
}

.BW-Background__SecondaryColor--MediumPurpleDark {
    background-color: var(--BW_SecondaryColor_MediumPurple_Dark)
}

.BW-Background__SecondaryColor--MediumPurpleDarker {
    background-color: var(--BW_SecondaryColor_MediumPurple_Darker)
}

.BW-Background__SecondaryColor--SpringGreenLighter {
    background-color: var(--BW_SecondaryColor_SpringGreen_Lighter)
}

.BW-Background__SecondaryColor--SpringGreenLight {
    background-color: var(--BW_SecondaryColor_SpringGreen_Light)
}

.has-secondary-color-spring-green-background-color,
.BW-Background__SecondaryColor--SpringGreenStandard {
    background-color: var(--BW_SecondaryColor_SpringGreen_Standard)
}

.BW-Background__SecondaryColor--SpringGreenDark {
    background-color: var(--BW_SecondaryColor_SpringGreen_Dark)
}

.BW-Background__SecondaryColor--SpringGreenDarker {
    background-color: var(--BW_SecondaryColor_SpringGreen_Darker)
}

.BW-Background__SecondaryColor--PatinaGreenLighter {
    background-color: var(--BW_SecondaryColor_PatinaGreen_Lighter)
}

.BW-Background__SecondaryColor--PatinaGreenLight {
    background-color: var(--BW_SecondaryColor_PatinaGreen_Light)
}

.has-secondary-color-patina-green-background-color,
.BW-Background__SecondaryColor--PatinaGreenStandard {
    background-color: var(--BW_SecondaryColor_PatinaGreen_Standard)
}

.BW-Background__SecondaryColor--PatinaGreenDark {
    background-color: var(--BW_SecondaryColor_PatinaGreen_Dark)
}

.BW-Background__SecondaryColor--PatinaGreenDarker {
    background-color: var(--BW_SecondaryColor_PatinaGreen_Darker)
}

.BW-Background__SecondaryColor--CoralRedLighter {
    background-color: var(--BW_SecondaryColor_CoralRed_Lighter)
}

.BW-Background__SecondaryColor--CoralRedLight {
    background-color: var(--BW_SecondaryColor_CoralRed_Light)
}

.has-secondary-color-coral-red-background-color,
.BW-Background__SecondaryColor--CoralRedStandard {
    background-color: var(--BW_SecondaryColor_CoralRed_Standard)
}

.BW-Background__SecondaryColor--CoralRedDark {
    background-color: var(--BW_SecondaryColor_CoralRed_Dark)
}

.BW-Background__SecondaryColor--CoralRedDarker {
    background-color: var(--BW_SecondaryColor_CoralRed_Darker)
}

.BW-Background__SecondaryColor--GraniteGreyLighter {
    background-color: var(--BW_SecondaryColor_GraniteGrey_Lighter)
}

.BW-Background__SecondaryColor--GraniteGreyLight {
    background-color: var(--BW_SecondaryColor_GraniteGrey_Light)
}

.has-secondary-color-granite-grey-background-color,
.BW-Background__SecondaryColor--GraniteGreyStandard {
    background-color: var(--BW_SecondaryColor_GraniteGrey_Standard)
}

.BW-Background__SecondaryColor--GraniteGreyDark {
    background-color: var(--BW_SecondaryColor_GraniteGrey_Dark)
}

.BW-Background__SecondaryColor--GraniteGreyDarker {
    background-color: var(--BW_SecondaryColor_GraniteGrey_Darker)
}

.BW-Font__SecondaryColor--CasualBlueLighter {
    color: var(--BW_SecondaryColor_CasualBlue_Lighter)
}

.BW-Font__SecondaryColor--CasualBlueLight {
    color: var(--BW_SecondaryColor_CasualBlue_Light)
}

.has-secondary-color-casual-blue-color,
.BW-Font__SecondaryColor--CasualBlueStandard {
    color: var(--BW_SecondaryColor_CasualBlue_Standard)
}

.BW-Font__SecondaryColor--CasualBlueDark {
    color: var(--BW_SecondaryColor_CasualBlue_Dark)
}

.BW-Font__SecondaryColor--CasualBlueDarker {
    color: var(--BW_SecondaryColor_CasualBlue_Darker)
}

.BW-Font__SecondaryColor--MediumPurpleLighter {
    color: var(--BW_SecondaryColor_MediumPurple_Lighter)
}

.BW-Font__SecondaryColor--MediumPurpleLight {
    color: var(--BW_SecondaryColor_MediumPurple_Light)
}

.has-secondary-color-medium-purple-color,
.BW-Font__SecondaryColor--MediumPurpleStandard {
    color: var(--BW_SecondaryColor_MediumPurple_Standard)
}

.BW-Font__SecondaryColor--MediumPurpleDark {
    color: var(--BW_SecondaryColor_MediumPurple_Dark)
}

.BW-Font__SecondaryColor--MediumPurpleDarker {
    color: var(--BW_SecondaryColor_MediumPurple_Darker)
}

.BW-Font__SecondaryColor--SpringGreenLighter {
    color: var(--BW_SecondaryColor_SpringGreen_Lighter)
}

.BW-Font__SecondaryColor--SpringGreenLight {
    color: var(--BW_SecondaryColor_SpringGreen_Light)
}

.has-secondary-color-spring-green-color,
.BW-Font__SecondaryColor--SpringGreenStandard {
    color: var(--BW_SecondaryColor_SpringGreen_Standard)
}

.BW-Font__SecondaryColor--SpringGreenDark {
    color: var(--BW_SecondaryColor_SpringGreen_Dark)
}

.BW-Font__SecondaryColor--SpringGreenDarker {
    color: var(--BW_SecondaryColor_SpringGreen_Darker)
}

.BW-Font__SecondaryColor--PatinaGreenLighter {
    color: var(--BW_SecondaryColor_PatinaGreen_Lighter)
}

.BW-Font__SecondaryColor--PatinaGreenLight {
    color: var(--BW_SecondaryColor_PatinaGreen_Light)
}

.has-secondary-color-patina-green-color,
.BW-Font__SecondaryColor--PatinaGreenStandard {
    color: var(--BW_SecondaryColor_PatinaGreen_Standard)
}

.BW-Font__SecondaryColor--PatinaGreenDark {
    color: var(--BW_SecondaryColor_PatinaGreen_Dark)
}

.BW-Font__SecondaryColor--PatinaGreenDarker {
    color: var(--BW_SecondaryColor_PatinaGreen_Darker)
}

.BW-Font__SecondaryColor--CoralRedLighter {
    color: var(--BW_SecondaryColor_CoralRed_Lighter)
}

.BW-Font__SecondaryColor--CoralRedLight {
    color: var(--BW_SecondaryColor_CoralRed_Light)
}

.has-secondary-color-coral-red-color,
.BW-Font__SecondaryColor--CoralRedStandard {
    color: var(--BW_SecondaryColor_CoralRed_Standard)
}

.BW-Font__SecondaryColor--CoralRedDark {
    color: var(--BW_SecondaryColor_CoralRed_Dark)
}

.BW-Font__SecondaryColor--CoralRedDarker {
    color: var(--BW_SecondaryColor_CoralRed_Darker)
}

.BW-Font__SecondaryColor--GraniteGreyLighter {
    color: var(--BW_SecondaryColor_GraniteGrey_Lighter)
}

.BW-Font__SecondaryColor--GraniteGreyLight {
    color: var(--BW_SecondaryColor_GraniteGrey_Light)
}

.has-secondary-color-granite-grey-color,
.BW-Font__SecondaryColor--GraniteGreyStandard {
    color: var(--BW_SecondaryColor_GraniteGrey_Standard)
}

.BW-Font__SecondaryColor--GraniteGreyDark {
    color: var(--BW_SecondaryColor_GraniteGrey_Dark)
}

.BW-Font__SecondaryColor--GraniteGreyDarker {
    color: var(--BW_SecondaryColor_GraniteGrey_Darker)
}

/*
------------------------------------------------------------
accent colors
------------------------------------------------------------
*/

body {
    --BW_AccentColor_LightBlue: deepskyblue;
    --BW_AccentColor_Blue: royalblue;
    --BW_AccentColor_DarkBlue: darkblue;
    --BW_AccentColor_LightTurquoise: cyan;
    --BW_AccentColor_Turquoise: turquoise;
    --BW_AccentColor_DarkTurquoise: darkcyan;
    --BW_AccentColor_LightGreen: limegreen;
    --BW_AccentColor_Green: seagreen;
    --BW_AccentColor_DarkGreen: darkgreen;
    --BW_AccentColor_LightRed: salmon;
    --BW_AccentColor_Red: orangered;
    --BW_AccentColor_DarkRed: firebrick;
    --BW_AccentColor_Orange: orange;
    --BW_AccentColor_Yellow: yellow;
}

.BW-Background__AccentColor--LightBlue {
    background-color: var(--BW_AccentColor_LightBlue);
}

.has-accent-color-blue-background-color,
.BW-Background__AccentColor--Blue {
    background-color: var(--BW_AccentColor_Blue);
}

.BW-Background__AccentColor--DarkBlue {
    background-color: var(--BW_AccentColor_DarkBlue);
}

.BW-Background__AccentColor--LightTurquoise {
    background-color: var(--BW_AccentColor_LightTurquoise);
}

.has-accent-color-turquoise-background-color,
.BW-Background__AccentColor--Turquoise {
    background-color: var(--BW_AccentColor_Turquoise);
}

.BW-Background__AccentColor--DarkTurquoise {
    background-color: var(--BW_AccentColor_DarkTurquoise);
}

.BW-Background__AccentColor--LightGreen {
    background-color: var(--BW_AccentColor_LightGreen);
}

.has-accent-color-green-background-color,
.BW-Background__AccentColor--Green {
    background-color: var(--BW_AccentColor_Green);
}

.BW-Background__AccentColor--DarkGreen {
    background-color: var(--BW_AccentColor_DarkGreen);
}

.BW-Background__AccentColor--LightRed {
    background-color: var(--BW_AccentColor_LightRed);
}

.has-accent-color-red-background-color,
.BW-Background__AccentColor--Red {
    background-color: var(--BW_AccentColor_Red);
}

.BW-Background__AccentColor--DarkRed {
    background-color: var(--BW_AccentColor_DarkRed);
}

.has-accent-color-orange-background-color,
.BW-Background__AccentColor--Orange {
    background-color: var(--BW_AccentColor_Orange);
}

.has-accent-color-yellow-background-color,
.BW-Background__AccentColor--Yellow {
    background-color: var(--BW_AccentColor_Yellow);
}

.BW-Font__AccentColor--LightBlue {
    color: var(--BW_AccentColor_LightBlue);
}

.has-accent-color-blue-color,
.BW-Font__AccentColor--Blue {
    color: var(--BW_AccentColor_Blue);
}

.BW-Font__AccentColor--DarkBlue {
    color: var(--BW_AccentColor_DarkBlue);
}

.BW-Font__AccentColor--LightTurquoise {
    color: var(--BW_AccentColor_LightTurquoise);
}

.has-accent-color-turquoise-color,
.BW-Font__AccentColor--Turquoise {
    color: var(--BW_AccentColor_Turquoise);
}

.BW-Font__AccentColor--DarkTurquoise {
    color: var(--BW_AccentColor_DarkTurquoise);
}

.BW-Font__AccentColor--LightGreen {
    color: var(--BW_AccentColor_LightGreen);
}

.has-accent-color-green-color,
.BW-Font__AccentColor--Green {
    color: var(--BW_AccentColor_Green);
}

.BW-Font__AccentColor--DarkGreen {
    color: var(--BW_AccentColor_DarkGreen);
}

.BW-Font__AccentColor--LightRed {
    color: var(--BW_AccentColor_LightRed);
}

.has-accent-color-red-color,
.BW-Font__AccentColor--Red {
    color: var(--BW_AccentColor_Red);
}

.BW-Font__AccentColor--DarkRed {
    color: var(--BW_AccentColor_DarkRed);
}

.has-accent-color-orange-color,
.BW-Font__AccentColor--Orange {
    color:  var(--BW_AccentColor_Orange);
}

.has-accent-color-yellow-color,
.BW-Font__AccentColor--Yellow {
    color: var(--BW_AccentColor_Yellow);
}

/*
------------------------------------------------------------
resets
------------------------------------------------------------
*/

* {
    /* Bootstrap - reset border radius */
    border-radius: 0 !important;
}

.btn {
    /* Bootstrap - reset border width */
    border-width: 0 !important;
}

.nav-link:focus-visible,
.form-control:focus,
.accordion-button:focus {
    /* Bootstrap - reset box shadow */
    box-shadow: none !important;
}

/*
------------------------------------------------------------
default settings
------------------------------------------------------------
*/

html {
    font-size: 16px;
    width: 100%;
}

body {
    position: relative;
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1rem;
    background-color: var(--BW_PrimaryColor_White);
    color: var(--BW_SecondaryColor_GraniteGrey_Standard);
    scrollbar-gutter: auto;
    overflow-y: auto;
}

.BW-Font__SansSerif {
    font-family: 'Libre Franklin', sans-serif;
}

.BW-Font__Serif {
    font-family: 'Taviraj', serif;
}

.material-symbols-sharp {
    font-family: 'Material Symbols Sharp';
    font-weight: 200;
}

*::-webkit-scrollbar,
*::-webkit-scrollbar-corner {
    width: 16px;
    height: 16px;
    background-color: transparent;
}

body::-webkit-scrollbar,
body::-webkit-scrollbar-corner {
    background-color: var(--BW_SecondaryColor_GraniteGrey_Light);
}

*::-webkit-scrollbar-track {
    box-shadow: inset 0 0 16px 16px transparent;
    border: 6px solid transparent;
}

*::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 16px 16px var(--BW_SecondaryColor_GraniteGrey_Standard);
    border: 6px solid transparent;
    border-radius: 16px;
    cursor: pointer;
}

/*
------------------------------------------------------------
text selection color
------------------------------------------------------------
*/

::selection {
    background-color: var(--BW_SecondaryColor_CasualBlue_Lighter);
    color: var(--BW_PrimaryColor_White);
}