/* 
CBN - STYLE GUIDE V1.0
Created by : Aslan Consulting (aslanweb.co)
*********************************************
*/


/* ********************************************* */
/* Color Palette */

/* Primary Colors */
.green {
    color: #2BB158;
}

.green_1 {
    color: #509F59;
}

.green_2 {
    color: #86C07C;
}

.white {
    color: #FFFFFF;
}

.alert_green {
    color: #86C07C;
}

.alert_red {
    color: #E31414;
}

.alert_amber {
    color: #FFBE2E;
}

.green_bg {
    background-color: #2BB158;
}

.green_1_bg {
    background-color: #509F59;
}

.green_2_bg {
    background-color: #86C07C;
}

.white_bg {
    background-color: #FFFFFF;
}

.alert_green_bg {
    background-color: #86C07C;
}       

.alert_red_bg {
    background-color: #E31414;
}

.alert_amber_bg {
    background-color: #FFBE2E;
}


/* Secondary Colors */

.gold {
    color: #D3AE05;
}

.gold_1 {
    color: #D9B848;
}

.gold_2 {
    color: #B99D34;
}

.blue {
    color: #45A6DD;
}

.blue_1 {
    color: #5898C6;
}

.blue_2 {
    color: #68B2DC;
}


.gold_bg {
    background-color: #D3AE05;
}

.gold_1_bg {
    background-color: #D9B848;
}

.gold_2_bg {
    background-color: #B99D34;
}

.blue_bg {
    background-color: #45A6DD;
}

.blue_1_bg {
    background-color: #5898C6;
}

.blue_2_bg {
    background-color: #68B2DC;
}

/* Dark Neutrals */
.dark {
    color: #000000;
}

.dark_1 {
    color: #0A0A0A;
}

.dark_2 {
    color: #141414;
}

.dark_3 {
    color: #333333;
}

.dark_bg {
    background-color: #000000;
}

.dark_1_bg {
    background-color: #0A0A0A;
}

.dark_2_bg {
    background-color: #141414;
}

.dark_3_bg {
    background-color: #333333;
}

/* Light Neutrals */
.light {
    color: #FFFFFF;
}

.light_1 {
    color: #EBEBEB;
}

.light_2 {
    color: #D6D6D6;
}

.light_2 {
    color: #CCCCCC;
}

.light_bg {
    background-color: #FFFFFF;
}

.light_1_bg {
    background-color: #EBEBEB;
}

.light_2_bg {
    background-color: #D6D6D6;
}

.light_3_bg {
    background-color: #CCCCCC;
}

.light_4_bg {
    background-color: #F7F7F7;
}


/* Global backgrounds */

.global_bg_light {
    background-color: #FFFFFF;
    color: #000000;
}

.global_bg_light_1 {
    background-color: #F4F4F4;
    color: #000000;
}

.global_bg_dark {
    background-color: #262626;
    color: #FFFFFF;
}

.global_bg_dark_1 {
    background-color: #161616;
    color: #FFFFFF;
}


.code_bg {
    background-color: #F7F7F7;
    border: 4px solid #E5E5E5;
    border-style: dotted;
}

.dotted_bg {
    background-color: #FFFFFF;
    border: 4px solid #E5E5E5;
    border-style: dotted;
}

/* ********************************************* */

/* Typography */

/* Import fonts */
/* Avenir */

@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 300;
    src: url(../assets/fonts/woff/Avenir-Light.woff) format('woff'),
}

@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: normal;
    src: url(../assets/fonts/woff/Avenir-Book.woff ) format('woff'),
}

@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 400;
    src: url(../assets/fonts/woff/Avenir-Roman.woff ) format('woff'),
}

@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 500;
    src: url(../assets/fonts/woff/Avenir-Medium.woff ) format('woff'),
}

@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 800;
    src: url(../assets/fonts/woff/Avenir-Heavy.woff ) format('woff'),
}

@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 900;
    src: url(../assets/fonts/woff/Avenir-Black.woff ) format('woff'),
}

@font-face {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    src: url(../assets/fonts/woff/Arial-Regular.woff ) format('woff'),
}

@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 700;
    src: url(../assets/fonts/woff/Arial-Bold.woff ) format('woff'),
}


.fw_300 {
    font-weight: 300;
}

.fw_normal {
    font-weight: normal;
}

.fw_400 {
    font-weight: 400;
}

.fw_500 {
    font-weight: 500;
}

.fw_800 {
    font-weight: 800;
}

.fw_900 {
    font-weight: 900;
}

.fw_bold {
    font-weight: bold;
}




body {
    color: #141414;
    font-family: Avenir, "Century Gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
}

.arial {
    font-family: Arial, Helvetica, sans-serif, "Century Gothic", sans-serif;
}


.xxxx_large {
    font-weight: 500;
    font-size: 3.75rem;
}

.xxx_large {
    font-weight: 500;
    font-size: 3.375rem;
}

.xx_large {
    font-weight: 500;
    font-size: 3rem;
}

.x_large {
    font-weight: 500;
    font-size: 2.625rem;
}

.large {
    font-weight: 500;
    font-size: 2.25rem;
}

h1 {
    font-weight: 500;
    font-size: 2rem;
}

h2 {
    font-weight: 500;
    font-size: 1.75rem;
}

h3 {
    font-weight: 500;
    font-size: 1.5rem;
}

h4 {
    font-weight: 500;
    font-size: 1.25rem;
}

h5 {
    font-weight: 500;
    font-size: 1.125rem;
}

h5 {
    font-weight: 500;
    font-size: 1.125rem;
}


/* logos */

.logo_square {
    width: 80px;
    height: 80px;
    background-color: #E5E5E5;
    padding: 10px;
    border-radius: 0px;
}

.logo_border_3px {
    width: 80px;
    height: 80px;
    background-color: #E5E5E5;
    padding: 10px;
    border-radius: 3px;
}

.logo_border_10px {
    width: 80px;
    height: 80px;
    background-color: #E5E5E5;
    padding: 10px;
    border-radius: 10px;
}

.logo_border_rounded {
    width: 80px;
    height: 80px;
    background-color: #E5E5E5;
    padding: 10px;
    border-radius: 50px;
}



/* Accordion */

.accordion-item {
    border-top-left-radius: 0rem !important;
    border-top-right-radius: 0rem !important;
}

.accordion-button:not(.collapsed) {
    color: #008837;
    border-top-left-radius: 0rem !important;
    border-top-right-radius: 0rem !important;
    background-color: rgba(134, 192, 124, 0.3);
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns=http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%008837'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 0, 0, .125);
}


/* Alerts */
.alert {
    color: #484848;
    border-radius: 0px;
    border: none;
}

.alert-success {
    background: rgba(134, 192, 124, 0.15);
}

.alert-error {
    background: rgba(227, 20, 20, 0.15);
}

.alert-warning {
    background: rgba(255, 190, 46, 0.15);
}

.alert-success svg {
    color: #008837;
}

.alert-warning svg {
    color: #FFBE2E;
}

.alert-error svg {
    color: #E31414;
}


/* Avatar */

.avatar_square {
    width: 90px;
    height: 90px;
    background-color: #C4C4C4;
    border-radius: 0px;
    border: 3px solid #E5E5E5;
    vertical-align: middle;
    object-fit: cover;


}

.avatar_rounded_10px {
    width: 90px;
    height: 90px;
    background-color: #C4C4C4;
    border-radius: 10px;
    border: 3px solid #E5E5E5;
    vertical-align: middle;
    object-fit: cover;

}

.avatar_rounded {
    width: 90px;
    height: 90px;
    background-color: #C4C4C4;
    border-radius: 50px;
    border: 3px solid #E5E5E5;
    vertical-align: middle;
    object-fit: cover;

}

.avatar_large {
    width: 60px;
    height: 60px;

}

.avatar_medium {
    width: 40px;
    height: 40px;

}

.avatar_small {
    width: 24px;
    height: 24px;

}

.avatar_group img {
    margin-left: -20px;
}

.avatar_group img.avatar_first {
    margin-left: 0px
}

/* Breadcrumb */

.breadcrumb li a {
    color: #2BB158;
    text-decoration: none;
}

.breadcrumb_arrow {
    --bs-breadcrumb-divider: '>';
}


/* Button */

.btn {
    border-radius: 0px;
    font-weight: 500;
}

.btn-primary {
    background-color: #2BB158;
    color: #FFFFFF;
    border: none;
}

.btn-primary:hover {
    background-color: #0A5F27;
    box-shadow: none;
}

.btn-primary:focus {
    background-color: #0A5F27;
    box-shadow: none;
}

.btn-secondary {
    background-color: #D3AE05;
    color: #FFFFFF;
    border: none;
}

.btn-secondary:hover {
    background-color: #856E04;
    box-shadow: none;
}

.btn-secondary:focus {
    background-color: #856E04;
    box-shadow: none;
}

.btn-tetiary {
    background-color: #45A6DD;
    color: #FFFFFF;
    border: none;
}

.btn-tetiary:hover {
    background-color: #064C74;
    box-shadow: none;
    color: #FFFFFF;
}

.btn-tetiary:focus {
    background-color: #064C74;
    box-shadow: none;
    color: #FFFFFF;
}

.btn-danger {
    background-color: #E31414;
    color: #FFFFFF;
    border: none;
}

.btn-danger:hover {
    background-color: #920606;
    box-shadow: none;
}

.btn-danger:focus {
    background-color: #920606;
    box-shadow: none;
}

.btn-warning {
    background-color: #FFBE2E;
    color: #000000;
    border: none;
}

.btn-warning:hover {
    background-color: #D59A18;
    box-shadow: none;
}

.btn-warning:focus {
    background-color: #D59A18;
    box-shadow: none;
}

.btn-ghost {
    background-color: transparent;
    color: #2BB158;
    border: none;
}

.btn-ghost:hover {
    background-color: #2BB158;
    box-shadow: none;
    color: #FFFFFF;
}

.btn-ghost:focus {
    background-color: #2BB158;
    box-shadow: none;
    color: #FFFFFF;
}

.selected-btn {
    background-color: #0A5F27;
    color: #FFFFFF;

}


.btn-outline-primary {
    color: #2BB158;
    border: 1px solid #2BB158;
}

.btn-outline-primary:hover {
    background-color: #2BB158;
    box-shadow: none;
    border: 1px solid #2BB158;
    color: #FFFFFF;

}

.btn-outline-primary:focus {
    background-color: #2BB158;
    box-shadow: none;
    border: 1px solid #2BB158;
    color: #FFFFFF;
}

.btn-outline-secondary {
    color: #D3AE05;
    border: 1px solid #D3AE05;
}

.btn-outline-secondary:hover {
    background-color: #D3AE05;
    box-shadow: none;
    border: 1px solid #D3AE05;
    color: #FFFFFF;

}

.btn-outline-secondary:focus {
    background-color: #D3AE05;
    box-shadow: none;
    border: 1px solid #D3AE05;
    color: #FFFFFF;
}

/* Badge */

.badge {
    border-radius: 0px;
}

/* Card */

.card {
    border-radius: 0px;
}

.card img {
    border-radius: 0px;
}

.card_flag_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Collection */

.collection_month {
    background-color: #2BB158;
    color: #FFFFFF;
    text-align: center;
    padding: 10px 5px;
    margin: 0;
}

.collection_date {
    /* border-color: #2BB158; */
    border: 2px solid #2BB158;
    color: #2BB158;
    text-align: center;
    padding: 10px 5px;
    margin: 0;
}

/* Checkbox */
.form-check-input[type=checkbox] {
    box-shadow: none;
    border-radius: 0px;
}

.form-check-input:checked {
    background-color: #2BB158;
    border-color: #2BB158;
}

.form-check-input:focus {
    border-color: #2BB158;
    box-shadow: none;
}

.form-check-input[type=checkbox]:indeterminate {
    background-color: #2BB158;
    border-color: #2BB158;
}


/* Form */

/*.form-control {
    border-radius: 0px;
    border: 1px solid #484848;*/ /*2px solid #484848;*/
    /*font-weight: 500;
}*/

.form-control:focus {
    box-shadow: none;
    border-color: #2BB158;
}

.form-primary {
    border: 2px solid #2BB158;
}

/* Link */

a {
    color: #141414;
}

.link-no-underline {
    text-decoration: none;
}

.link-primary {
    color: #2BB158;
}

.link-primary:hover {
    color: #0A5F27;
}

.link-secondary {
    color: #D3AE05;
}

.link-secondary:hover {
    color: #856E04;
}

.link-tetiary {
    color: #45A6DD;
}

.link-tetiary:hover {
    color: #064C74;
}


/* Modal */
.modal-content {
    border-radius: 0px;
    border: none;
}

.modal-header {
    border: none;
}

.modal-footer {
    border: none;
}

/* Pagination */
.page-item {
    border-radius: 0px;
}

.page-item:first-child .page-link {
    border-radius: 0px;
}

.page-item:last-child .page-link {
    border-radius: 0px;

}

.page-link {
    color: #2BB158;
}

.page-item.active .page-link {
    background-color: #2BB158;
    border-color: #2BB158;
}

/* Progress Bar */

.progress-small {
    height: 0.5rem;
}

.progress-bar {
    background-color: #2BB158;
}

/* Range slider */

.form-range {
    color: #2BB158;
}

input[type=range]::-webkit-slider-thumb {
    background: #2BB158;
}

input[type=range]::-moz-range-thumb {
    background: #2BB158;
}

input[type=range]::-ms-thumb {
    background: #2BB158;
}


/* Nav */

.navbar-dark .navbar-nav .nav-link {
    color: #FFFFFF;
}

.navbar-light .navbar-nav .nav-link {
    color: #000000;

}


/* Mobile */
.mobile-screen {
    width: 412px;
    height: 642px;
    background-color: #fafafa;
    /* margin: auto; */
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    /* overflow: hidden; */
}

.bottom-tab {
    position: absolute;
    margin: auto;
    bottom: 0;
}

.bottom-tab ul li a:hover {
    color: #FFFFFF;
}

.top-tab {
    position: absolute;
    margin: auto;
    top: 0;
}

.top-tab ul li a:hover {
    color: #FFFFFF;
}

.fap-btn {
    position: absolute;
    top: 80%;
    right: 10%;
    z-index: 1;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}


/* Data Table */

.badge-primary {
    background-color: #c7f5d9;
    color: #0b4121;
}

.badge-tetiary {
    background-color: #cfe0fc;
    color: #0a47a9;
}
.badge-warning {
    background-color: #ffebc2;
    color: #453008;
}
/* ********************************************* */

/* Others */
.section_bg {
    background: rgba(0, 136, 55, 0.6);
    padding: 6px 10px;
    color: #FFFFFF;
    text-decoration: none;
}

.section_bg:hover {
    color: #141414;
}

.font_spacing {
    letter-spacing: 1rem;
}

.xlarge_font {
    font-size: 5rem;
}


.btn_card {
    background-color: #F9FAFC;
    border-radius: 0px;
    border: 1px solid #008837;
    color: #008837;
    text-decoration: none;
    padding: 20px;
    font-weight: 500;
}

.btn_card p {
    color: #484848;
    font-size: 0.8rem;
}

.btn_card:hover {
    color: #B99D34;
}

.input-group-lg>.form-control {
    border-radius: 0px;
}

.input-group-lg>.btn {
    border-radius: 0px;
}


aside.navbar .navbar-brand img {
    object-fit: cover !important;
}