@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*** COLORS ***/
:root{
    --gray-100: #F1F1F3;
    --gray-200: #E3E3E8;
    --gray-300: #C8C8D0;
    --gray-400: #ADADB8;
    --gray-500: #787887;
    --gray-600: #464653;
    --gray-700: #2F2F37;
    --gray-800: #18181B;
    --gray-900: #0F0F10;
    --blue: #3572F9;
    --blue-50: #3572F988;
    --teal: #1ED4E1;
    --teal-50: #1ED4E180;
    --green: #1ECB2C;
    --green-50: #1ECB2C88;
    --yellow: #F7E439;
    --yellow-50: #F7E43988;
    --orange: #FF9709;
    --orange-50: #FF970988;
    --red: #FF4624;
    --red-50: #FF462488;
    /*** THEME ***/
    --primary: #F7931D;
    --primary-50: #F7931D88;
    --secondary: #727DBD;
    --secondary-50: #727DBD88;
    --accent: #;
    --accent-50: #;
}

html {
    box-sizing: border-box;
    font-size: 14px;
}

*,
*:before,
*:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

img {
    max-width: 100%;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

table.table-striped thead tr{
    background:var(--gray-100);
}

table.table-striped tbody tr:nth-child(even){
    background:var(--gray-100);
}

strong{
    font-weight:900;
}

a,
a:link,
a:hover,
a:visited {
    text-decoration: none;
    color: var(--secondary);
    outline:none;
}

body {
    line-height: 1.7;
    font-family: 'Roboto', sans-serif;
    color:var(--gray-700)
}

/** SELECTION **/
::-moz-selection { /* Code for Firefox */
    color: var(--gray-800);
    background: var(--primary-50);
}
  
::selection {
    color: var(--gray-800);
    background: var(--primary-50);
}

/** GRID **/
.container{
    width:85%;
    margin:auto;
}

@media only screen and (max-width: 600px) {
    .container{ width:100%; padding: 0 15px;}
}

.row { 
    display:flex; 
    flex-wrap:wrap;
    /* padding:15px; */
}

.row > * {
    flex: 1 0 100%;
    transition:all 0.2s;
}

.col    { flex: 1 0 0%; }
.col-1  { flex: 0 0 8.33%; }
.col-2  { flex: 0 0 16.66%; }
.col-3  { flex: 0 0 25%; }
.col-4  { flex: 0 0 33.33%; }
.col-5  { flex: 0 0 41.66%; }
.col-6  { flex: 0 0 50%; }
.col-7  { flex: 0 0 58.33%; }
.col-8  { flex: 0 0 66.66%; }
.col-9  { flex: 0 0 75%; }
.col-10 { flex: 0 0 83.33%; }
.col-11 { flex: 0 0 91.66%; }
.col-12 { flex: 0 0 100%; }

/*** SM ***/
@media only screen and (min-width: 600px) {
    .col-sm    { flex: 1 0 0%; }
    .col-sm-1  { flex: 0 0 8.33%; }
    .col-sm-2  { flex: 0 0 16.66%; }
    .col-sm-3  { flex: 0 0 25%; }
    .col-sm-4  { flex: 0 0 33.33%; }
    .col-sm-5  { flex: 0 0 41.66%; }
    .col-sm-6  { flex: 0 0 50%; }
    .col-sm-7  { flex: 0 0 58.33%; }
    .col-sm-8  { flex: 0 0 66.66%; }
    .col-sm-9  { flex: 0 0 75%; }
    .col-sm-10 { flex: 0 0 83.33%; }
    .col-sm-11 { flex: 0 0 91.66%; }
    .col-sm-12 { flex: 0 0 100%; }
}

/*** MD ***/
@media only screen and (min-width: 768px) {
    .col-md    { flex: 1 0 0%; }
    .col-md-1  { flex: 0 0 8.33%; }
    .col-md-2  { flex: 0 0 16.66%; }
    .col-md-3  { flex: 0 0 25%; }
    .col-md-4  { flex: 0 0 33.33%; }
    .col-md-5  { flex: 0 0 41.66%; }
    .col-md-6  { flex: 0 0 50%; }
    .col-md-7  { flex: 0 0 58.33%; }
    .col-md-8  { flex: 0 0 66.66%; }
    .col-md-9  { flex: 0 0 75%; }
    .col-md-10 { flex: 0 0 83.33%; }
    .col-md-11 { flex: 0 0 91.66%; }
    .col-md-12 { flex: 0 0 100%; }
}
 
 /*** LG ***/
@media only screen and (min-width: 992px) {
    .col-lg    { flex: 1 0 0%; }
    .col-lg-1  { flex: 0 0 8.33%; }
    .col-lg-2  { flex: 0 0 16.66%; }
    .col-lg-3  { flex: 0 0 25%; }
    .col-lg-4  { flex: 0 0 33.33%; }
    .col-lg-5  { flex: 0 0 41.66%; }
    .col-lg-6  { flex: 0 0 50%; }
    .col-lg-7  { flex: 0 0 58.33%; }
    .col-lg-8  { flex: 0 0 66.66%; }
    .col-lg-9  { flex: 0 0 75%; }
    .col-lg-10 { flex: 0 0 83.33%; }
    .col-lg-11 { flex: 0 0 91.66%; }
    .col-lg-12 { flex: 0 0 100%; }
}

 /*** XL ***/
 @media only screen and (min-width: 1200px) {
    .col-xl    { flex: 1 0 0%; }
    .col-xl-1  { flex: 0 0 8.33%; }
    .col-xl-2  { flex: 0 0 16.66%; }
    .col-xl-3  { flex: 0 0 25%; }
    .col-xl-4  { flex: 0 0 33.33%; }
    .col-xl-5  { flex: 0 0 41.66%; }
    .col-xl-6  { flex: 0 0 50%; }
    .col-xl-7  { flex: 0 0 58.33%; }
    .col-xl-8  { flex: 0 0 66.66%; }
    .col-xl-9  { flex: 0 0 75%; }
    .col-xl-10 { flex: 0 0 83.33%; }
    .col-xl-11 { flex: 0 0 91.66%; }
    .col-xl-12 { flex: 0 0 100%; }
}

/*** FORM ***/
label{
    display:flex;
    align-items:center;
}

.form-control {
    width: 100%;
    background:#fff;
    padding: 12px 15px;
    border: 1px solid var(--gray-300);
    border-radius: 5px;
    outline: none;
    transition: all 0.2s;
    font-size:14px;
}

.form-control:focus{
    box-shadow: 0 0 0 4px var(--primary-50);
}

input.form-control:read-only:not([type="submit"]),
input.form-control:disabled{
    box-shadow: none;
    background: var(--gray-100);
    color: var(--gray-500);
    font-style: italic;
}

input[type=checkbox],
input[type=radio]{
    accent-color: #D97703;
    width: 22px;
    height: 22px;
    margin-right: 15px;
    outline: none;
    transition: all 0.2s;
}

/* input[type=text],
input[type=password]{
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--gray-300);
    border-radius: 5px;
    outline: none;
    transition: all 0.2s;
    font-size:14px;
}

input[type=text]:focus,
input[type=password]:focus{
    box-shadow: 0 0 0 4px var(--primary-50);
}

input[type=checkbox],
input[type=radio]{
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
    margin-right: 15px;
    outline: none;
    transition: all 0.2s;
}

input[type=submit]{
    padding: 12px 15px;
    border: none;
    border-radius: 5px;
    outline: none;
    transition: all 0.2s;
    font-size:16px;
}

input[type=submit]:focus{
    box-shadow: 0 0 0 4px var(--primary-50);
}

select{
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--gray-300);
    border-radius: 5px;
    outline: none;
    transition: all 0.2s;
    font-size:14px;
    background:#fff;
} */



.btn{
    display:inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 25px;
    border-radius: 5px;
    outline: none;
    cursor:pointer;
    transition: all 0.2s;
}

.btn-sm{
    padding: 8px 25px;
}

.btn:not(.btn-light){ color:#fff; }

.btn-dark{ background:var(--gray-700); }
.btn-dark:active{ box-shadow: 0 0 0 4px var(--gray-400); }

.btn-light{ background:var(--gray-200); }
.btn-light:active{ box-shadow: 0 0 0 4px var(--gray-100); }

.btn-primary{ background:var(--primary); }
.btn-primary:active{ box-shadow: 0 0 0 4px var(--primary-50); }

.btn-secondary{ background:var(--secondary); }
.btn-secondary:active{ box-shadow: 0 0 0 4px var(--secondary-50); }

.tooltip{
    position:relative;
}

.tooltip-text {
    position:absolute;
    width:320px;
    padding:5px 12px;
    background:var(--gray-600);
    color:#fff;
    font-size:12px;
    top:-30px;
    z-index:1;
}

.tooltip-text.visible {
    display:inline-flex;
}