:root {
    --accent: #2b2b71;
    /* Colors */        
    --color00: #F2F2F2;  
    --color01: #FEFEFE;  
    --color02: #292c34;   /* Gray */
    --color03: #27ae60;   /* Green */
    --colorBG01: #050505;
    --colorBG02: #121025;
        
    /* Overlays */ 
    --overlay: rgba(0, 40, 70, .65);    
    --gradient01: -webkit-linear-gradient(left, rgba(38, 43, 50, 1) 0%, rgba(38, 43, 50,.4) 80%, rgba(33, 35, 38,1) 100%);    
    --gradient02:    -moz-linear-gradient(left, rgba(38, 43, 50, 1) 0%, rgba(38, 43, 50, .4) 80%, rgba(38, 43, 50, 1) 100%);
}



/* NO Scrollbar */
::-webkit-scrollbar { 
    display: none;
    scroll-behavior: smooth; 
}


/*  Sizes   */
.fullheight{height: 100vh; min-height: 100%; }
.ct120{position: relative; width: 120%;}
.ct100{position: relative; width: 100%;}
.ct80{position: relative; width: 80%;}
.ct75{position: relative; width: 75%;}
.ct70{position: relative; width: 70%;}
.ct65{position: relative; width: 65%;}
.ct60{position: relative; width: 60%;}
.ct55{position: relative; width: 55%;}
.ct50{position: relative; width: 50%;}
.ct48{position: relative; width: 48%;}
.ct45{position: relative; width: 45%;}
.ct40{position: relative; width: 40%;}
.ct38{position: relative; width: 38%;}
.ct35{position: relative; width: 35%;}
.ct32{position: relative; width: 32%;}
.ct30{position: relative; width: 30%;}
.ct28{position: relative; width: 28%;}
.ct25{position: relative; width: 25%;}
.ct20{position: relative; width: 20%;}

.ctBoxed{position: relative; width: 100%;}
.ctBoxed > .container {position: relative; width: 100%; clear: both; margin-left: auto; margin-right: auto; max-width: 1200px;}

/*  Heights   */
.h360px{height:360px !important;}
.h420px{height:420px !important;}
.h500px{height:500px !important;}


/*  Boxes   */
.top-boxed{position: relative; box-shadow: 0 8px 8px 6px rgba(0, 0, 0, .1); margin-top: -80px; background: #fff; margin-bottom: 80px;}


.boxed-150-tb{padding: 150px 0; box-sizing: border-box;}
.boxed-150-t{padding: 150px 0 0 0; box-sizing: border-box;}
.boxed-150-b{padding: 0 0 150px 0; box-sizing: border-box;}

.boxed-trbl{padding: 100px 14%; box-sizing: border-box;}
.boxed-r{padding: 0 14% 0 0; box-sizing: border-box;}
.boxed-l{padding: 0 0 0 14%; box-sizing: border-box;}
.boxed-rl{padding: 0 14%; box-sizing: border-box;}

.boxed-100-tb{padding: 100px 0; box-sizing: border-box;}
.boxed-100-t{padding: 100px 0 0 0; box-sizing: border-box;}
.boxed-100-b{padding: 0 0 100px 0; box-sizing: border-box;}

/*  Padding-Flex  */
.padding-2-trbl{padding: 2%; box-sizing: border-box;}
.padding-2-tb{padding: 2% 0; box-sizing: border-box;}
.padding-2-t{padding: 2% 0 0 0; box-sizing: border-box;}
.padding-2-r{padding: 0 2% 0 0; box-sizing: border-box;}
.padding-2-l{padding: 0 0 0 2%; box-sizing: border-box;}
.padding-2-rl{padding: 0 2%; box-sizing: border-box;}

.padding-3-trbl{padding: 3%; box-sizing: border-box;}
.padding-3-tb{padding: 3% 0; box-sizing: border-box;}
.padding-3-t{padding: 3% 0 0 0; box-sizing: border-box;}
.padding-3-r{padding: 0 3% 0 0; box-sizing: border-box;}
.padding-3-l{padding: 0 0 0 3%; box-sizing: border-box;}
.padding-3-rl{padding: 0 3%; box-sizing: border-box;}

.padding-4-trbl{padding: 4%; box-sizing: border-box;}
.padding-4-tb{padding: 4% 0; box-sizing: border-box;}
.padding-4-r{padding: 0 4% 0 0; box-sizing: border-box;}
.padding-4-l{padding: 0 0 0 4%; box-sizing: border-box;}
.padding-4-rl{padding: 0 4%; box-sizing: border-box;}

.padding-6-trbl{padding: 6%; box-sizing: border-box;}
.padding-6-tb{padding: 6% 0; box-sizing: border-box;}
.padding-6-r{padding: 0 6% 0 0; box-sizing: border-box;}
.padding-6-l{padding: 0 0 0 6%; box-sizing: border-box;}
.padding-6-rl{padding: 0 6%; box-sizing: border-box;}

.padding-8-trbl{padding: 8%; box-sizing: border-box;}
.padding-8-tb{padding: 8% 0; box-sizing: border-box;}
.padding-8-r{padding: 0 8% 0 0; box-sizing: border-box;}
.padding-8-l{padding: 0 0 0 8%; box-sizing: border-box;}
.padding-8-rl{padding: 0 8%; box-sizing: border-box;}

/*  Margin  */
.margin-10px-trbl{margin: 10px;}
.margin-10px-r{margin: 0 10px 0 0;}
.margin-10px-l{margin: 0 0 0 10px;}
.margin-10px-tb{margin: 10px 0;}
.margin-10px-b{margin: 0 0 10px;}
.margin-10px-rl{margin: 0 10px;}

.margin-20px-trbl{margin: 20px;}
.margin-20px-r{margin: 0 20px 0 0;}
.margin-20px-l{margin: 0 0 0 20px;}
.margin-20px-tb{margin: 20px 0;}
.margin-20px-t{margin: 20px 0 0 0;}
.margin-20px-b{margin: 0 0 20px;}
.margin-20px-rl{margin: 0 20px;}

.margin-40px-trbl{margin: 40px;}
.margin-40px-r{margin: 0 40px 0 0;}
.margin-40px-l{margin: 0 0 0 40px;}
.margin-40px-tb{margin: 40px 0;}
.margin-40px-t{margin: 40px 0 0 0;}
.margin-40px-b{margin: 0 0 40px;}
.margin-40px-rl{margin: 0 40px;}

.margin-60px-trbl{margin: 60px;}
.margin-60px-r{margin: 0 60px 0 0;}
.margin-60px-l{margin: 0 0 0 60px;}
.margin-60px-tb{margin: 60px 0;}
.margin-60px-b{margin: 0 0 160px;}
.margin-60px-rl{margin: 0 60px;}

.margin-80px-trbl{margin: 80px;}
.margin-80px-r{margin: 0 80px 0 0;}
.margin-80px-l{margin: 0 0 0 80px;}
.margin-80px-tb{margin: 80px 0;}
.margin-80px-b{margin: 0 0 80px;}
.margin-80px-rl{margin: 0 80px;}

.margin-100px-trbl{margin: 100px;}
.margin-100px-r{margin: 0 100px 0 0;}
.margin-100px-l{margin: 0 0 0 100px;}
.margin-100px-tb{margin: 100px 0;}
.margin-100px-b{margin: 0 0 100px;}
.margin-100px-rl{margin: 0 100px;}

.margin-120px-trbl{margin: 120px;}
.margin-120px-r{margin: 0 120px 0 0;}
.margin-120px-l{margin: 0 0 0 120px;}
.margin-120px-tb{margin: 120px 0;}
.margin-120px-b{margin: 0 0 120px;}
.margin-120px-rl{margin: 0 120px;}

/*  FlexBox    */
.ease{transition: all .4s ease;}
.clfx{box-sizing: border-box;}
.flex{display: flex;}
.flex_wrap{flex-wrap: wrap;}
.flex_nowrap{flex-wrap: nowrap;}
    .flex_col{ flex-flow: column wrap; flex-direction: column;}
    .flex_row{ flex-flow: row wrap; flex-direction: row;}
    .flex_col_rev{ flex-flow: column-reverse wrap; flex-direction: column-reverse;}
    .flex_row_rev{ flex-flow: row-reverse wrap; flex-direction: row-reverse;}

    .ai-start{align-items: flex-start;}
    .ai-end{align-items: flex-end;}
    .ac-start{align-content: flex-start;}
    .ac-end{align-content: flex-end;}

    .ai-mid{align-items: center;}
    .ac-mid{align-content: center;}

    .jc-start{justify-content: flex-start;}
    .jc-end{justify-content: flex-end;}


.f_center_std{justify-content: center;}
.f_center_mid{justify-content: center; align-items: center;}
.f_between_std{justify-content: space-between;}
.f_between_mid{justify-content: space-between; align-items: center;}

/*  Gaps    */
.g12{gap:12px;}
.g20{gap:20px;}
.g24{gap:24px;}

.nolinkstyle{text-decoration: none; cursor: pointer;}
.hide{opacity: 0; display: none;}
.hidden{display: none;}
label{user-select: none !important;}


/*  Text-Content    */
.title{position: relative; width: 100%; margin-bottom: 35px; user-select: none; overflow: hidden;}
    .title h2{font-weight: 800;}
    .text{margin-bottom: 35px;}

/*  Text-Align    */
.text-j{text-align: justify;}
.text-c{text-align: center;}
.text-r{text-align: right;}
.text-l{text-align: left;}

.oh{overflow: hidden;}
.ox{overflow-x: scroll;}
.oy{overflow-y: scroll;}


.sticky{
    position: sticky;
    top: 0;
}


/* Notifications */

.note{position: fixed; top: 0; left: 4%; right: 0; padding: 20px 8em; box-sizing: border-box; border-radius: 0 0 5px 5px; z-index: 98; transition: all .5s ease;}
.note-inline{position: relative; padding: 20px 8em; box-sizing: border-box; border-radius: 0 0 5px 5px;}
    .not-yellow{color: #977308; background-color: #fff3cd; border-color: #ffeeba;}
    .not-green{color: #195828; background-color: #d4edda; border-color: #c3e6cb;}
    .not-blue{ color: #0e525e; background-color: #d1ecf1; border-color: #bee5eb;}
    .not-red{color: #831520; background-color: #f8d7da; border-color: #f5c6cb;}


/*  Toast    */
.noteWrap {
    position: fixed; bottom: 120px; right: 40px; max-width: 400px; overflow: hidden; 
    display: flex; flex-direction: column; align-items: flex-end; z-index: 99;
}

.toast {
    position: relative;
    width: 20rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
    border-radius: .25rem;
    user-select: none;
    padding: 1rem;
    box-sizing: border-box;
    font-size: 1.125rem;
    font-weight: 700;
    margin: .25rem 0;
    background: #48bb78;
    color: #fff;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.toast.success {
    background: #48bb78;
    color: #fff;
}
.toast.error {
    background: #f56565; 
    color: #fff;
}
.toast.info {
    background: #4299e1; 
    color: #fff;
}    
.toast.warning {
    background: #ed8936;
    color: #fff;
}