@import url("/OutSystemsUIWeb/Theme.BaseTheme.css?3767");

/* ===================================================================== */

/*  The following CSS was created using Theme Editor.                    */

/*  To modify this CSS, click "Open Theme Editor".                       */

/* ===================================================================== */



/* ===================================================================== */

/*  Root - CSS Variables                                                 */

/* ===================================================================== */



:root {

    /* Color - Brand */

    --color-primary: #f17420;

    --color-secondary: #f17420;



    --color-primary-hover: #b55718;

    --color-primary-selected: #914613;

    --color-primary-lightest: #ffa22d;



    /* Color - Extended */

    --color-red-lightest: #faeaea;

    --color-red-lighter: #e9aaaa;

    --color-red-light: #d96a6a;

    --color-red: #c92a2a;

    --color-red-dark: #ab2424;

    --color-red-darker: #8d1d1d;

    --color-red-darkest: #6f1717;



    --color-pink-lightest: #fbebf0;

    --color-pink-lighter: #efadc4;

    --color-pink-light: #e27098;

    --color-pink: #d6336c;

    --color-pink-dark: #b62b5c;

    --color-pink-darker: #96244c;

    --color-pink-darkest: #761c3b;



    --color-grape-lightest: #f7ecfa;

    --color-grape-lighter: #dfb2e9;

    --color-grape-light: #c678d9;

    --color-grape: #ae3ec9;

    --color-grape-dark: #9435ab;

    --color-grape-darker: #7a2b8d;

    --color-grape-darkest: #60226f;



    --color-violet-lightest: #f1edfd;

    --color-violet-lighter: #c6b6f6;

    --color-violet-light: #9b7fef;

    --color-violet: #7048e8;

    --color-violet-dark: #5f3dc5;

    --color-violet-darker: #4e32a2;

    --color-violet-darkest: #3e2880;



    --color-indigo-lightest: #eceffd;

    --color-indigo-lighter: #b3c1f7;

    --color-indigo-light: #7b92f1;

    --color-indigo: #4263eb;

    --color-indigo-dark: #3854c8;

    --color-indigo-darker: #2e45a5;

    --color-indigo-darkest: #243681;



    --color-blue-lightest: #e8f2fa;

    --color-blue-lighter: #a3c9ea;

    --color-blue-light: #5fa1db;

    --color-blue: #1a79cb;

    --color-blue-dark: #1667ad;

    --color-blue-darker: #12558e;

    --color-blue-darkest: #0e4370;



    --color-cyan-lightest: #e7f2f4;

    --color-cyan-lighter: #9eccd3;

    --color-cyan-light: #56a6b2;

    --color-cyan: #0d8091;

    --color-cyan-dark: #0b6d7b;

    --color-cyan-darker: #095a66;

    --color-cyan-darkest: #074650;



    --color-teal-lightest: #e6f2ef;

    --color-teal-lighter: #9cccbd;

    --color-teal-light: #52a58c;

    --color-teal: #087f5b;

    --color-teal-dark: #076c4d;

    --color-teal-darker: #065940;

    --color-teal-darkest: #044632;



    --color-green-lightest: #ebf7ed;

    --color-green-lighter: #afe0b8;

    --color-green-light: #73c982;

    --color-green: #37b24d;

    --color-green-dark: #2f9741;

    --color-green-darker: #267d36;

    --color-green-darkest: #1e622a;



    --color-lime-lightest: #f1f8e8;

    --color-lime-lighter: #c7e3a2;

    --color-lime-light: #9ecd5c;

    --color-lime: #74b816;

    --color-lime-dark: #639c13;

    --color-lime-darker: #51810f;

    --color-lime-darkest: #40650c;



    --color-orange-lightest: #fef0e6;

    --color-orange-lighter: #fcc29c;

    --color-orange-light: #f99551;

    --color-orange: #f76707;

    --color-orange-dark: #d25806;

    --color-orange-darker: #ad4805;

    --color-orange-darkest: #883904;



    --color-yellow-lightest: #fef5e5;

    --color-yellow-lighter: #fbd999;

    --color-yellow-light: #f8bc4c;

    --color-yellow: #f59f00;

    --color-yellow-dark: #d08700;

    --color-yellow-darker: #ac6f00;

    --color-yellow-darkest: #875700;



    /* Color - Neutral */

    --color-neutral-0: #ffffff;

    --color-neutral-1: #f8f9fa;

    --color-neutral-2: #f1f3f5;

    --color-neutral-3: #e9ecef;

    --color-neutral-4: #dee2e6;

    --color-neutral-5: #ced4da;

    --color-neutral-6: #adb5bd;

    --color-neutral-7: #868e96;

    --color-neutral-8: #5c656d;

    --color-neutral-9: #343a40;

    --color-neutral-10: #15181a;



    /* Color - Semantic */

    --color-error-light: #fceaea;

    --color-error: #e03131;



    --color-warning-light: #fdf6e5;

    --color-warning: #e9a100;



    --color-success-light: #eaf3eb;

    --color-success: #2a843c;



    --color-info-light: #e5f5fc;

    --color-info: #009dde;



    /* Elevation / Shadow */

    --shadow-none: none;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .1);

    --shadow-s: 0 2px 4px rgba(0, 0, 0, .1);

    --shadow-m: 0 4px 6px rgba(0, 0, 0, .1);

    --shadow-l: 0 6px 8px rgba(0, 0, 0, .1);

    --shadow-xl: 0 8px 10px rgba(0, 0, 0, .1);



    /* App Settings */

    --side-menu-size: 300px;

}



.btn,

.Button {

    color: var(--color-primary);

}



.tag,

.badge,

.btn.Is_Default, 

.Button.Is_Default {

    color: #fff;

}

@font-face {    
    font-family: 'Helvetica Neue';
    src: url('/CHAMA/HelveticaNeue.ttf') format('truetype');
    font-weight: normal;    
    font-style: normal;
}

@font-face {    
    font-family: 'Helvetica Neue';
    src: url('/CHAMA/HelveticaNeueBd.ttf') format('truetype');
    font-weight: bold;    
    font-style: normal;
}

:root {
  --color-primary: #F07520;
  --color-primary-hover: #F07520;
  --color-orange: #F07520;
  --color-neutral-5: #F5F4F4;
  --color-neutral-9: #383838;
  --font-size-h1: 104px;
  --font-size-h2: 40px;
  --font-size-h3: 35px;
  --font-size-base: 20px;
  
}

body{
    font-family: 'Helvetica Neue';
    background: white;
    font-size: var(--font-size-base);
}

a, a:visited{
    color: white;
}

.background-orange,
.background-orange .heading2{
    color: white;
}

.layout .main{
    padding-top: 0;
}

/* CHAMA HEADER */
.chama-header{
    background: rgba(240, 117, 32);
    background: linear-gradient(rgba(240, 117, 32,.7), rgba(240, 117, 32, .7)),
     url('/CHAMA/CHAMA_site_bg.jpg?2973');
    background-blend-mode: normal;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: table;
    height: 100vh;
}
div[class*="ThemeGrid_Width"].chama-title{
    vertical-align: bottom;
}

div[class*="ThemeGrid_Width"].chama-section-image{
    vertical-align: middle;
}

.chama-header .heading1,
.chama-header .heading5{
    color: white;
}

.chama-stores{
    margin-bottom: 50px;
    margin-top: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*Stores icons*/

.ios-icon{
    background-image: url('/CHAMA/apple-store-badge.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 50px;
    width: 160px;
    display: inline-block;
}

.android-icon{
    background-image: url('/CHAMA/google-play-badge.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 50px;
    width: 160px;
    display: inline-block;
}
    
    
/* CHAMA Section */
.chama-section{
    max-width: 1024px;
    padding: 0 10px;
    margin: auto;
    height: 100%;
}
.chama-section-info{
    padding: 100px 0;
}

.chama-section-info .heading2:empty{
    display: none;
}

.chama-section-info .heading2{
    margin-bottom: 50px;
}

 
.chama-container .heading2{
     color: white;
 }
 
 img{
     display: block;
 }
 
 .chama-logo{
     margin-left: 100px;
 }
 
 
 /*** PHONE ***/
 .phone .center-align{
        display: block;
}

.phone [class*="ThemeGrid_Width"]:not(.no-responsive){
    margin: 0;
}
 
 .phone .chama-title{
     padding: 50px 0;
     text-align: center;
}
 
 .phone .chama-stores{
    margin-top: 30px;
    margin-bottom: 0;
}
.phone .ios-icon,
.phone .android-icon{
    height: 40px;
    width: 130px;
}

.phone .chama-section{
    padding: 30px;
}
.phone .chama-section-info{
    padding: 0;
    text-align: center;
}

.phone .chama-logo{
    margin: 0;
}

.phone img{
    max-width: 60%;
    padding: 20px;
}


.phone .chama-section-info .heading2{
    margin-bottom: 20px;
}
.phone .chama-section-image,
.phone .chama-screen{
    text-align: -webkit-center;
}