/* ************************************************************************************************* */
/* COLOR - #000000: Black
/* COLOR - #FFFFFF: White
/* COLOR - #C4CCD4: Gray        Placeholder 
/* COLOR - #DCE0E5: Gray Light  Background 
/* COLOR - #0EA5E9: Blue
/* COLOR - #2F9D52: Green
/* COLOR - #FF0000: Red
/* ************************************************************************************************* */


/* ************************************************************************************************* */
/* **************************************** GENERAL ************************************************ */
/* ************************************************************************************************* */

*
{
	margin: 0;
        
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

html, body
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
        
	line-height: 20px;
        letter-spacing: 1.4px;
        
	color: #000000;
	background-color: #FFFFFF;
}

p 
{
	font-size: 16px; 
}

.hr
{
        margin: 0;
        
        border: 1px solid rgb(220, 224, 229);
}

.content-shadow
{
	box-shadow: 2px 2px 18px 5px rgba(14,165,233,0.18);
        -webkit-box-shadow: 2px 2px 18px 5px rgba(14,165,233,0.18);
        -moz-box-shadow: 2px 2px 18px 5px rgba(14,165,233,0.18);
}

/* ************************************************************************************************* */
/* ****************************************  SPACE  ************************************************ */
/* ************************************************************************************************* */

.mr-2
{
        margin-right: 8px;
}

.fw-300
{
        width: 300px;
}

.w-5
{
        width: 5%;
}

.w-10
{
        width: 10%;
}

.w-20
{
        width: 20%;
}

.w-30
{
        width: 30%;
}

.w-40
{
        width: 40%;
}

.w-50
{
        width: 50%;
}

.w-60
{
        width: 60%;
}

/* ************************************************************************************************* */
/* ****************************************    BG   ************************************************ */
/* ************************************************************************************************* */

.bg-gray
{
        background-color: #DCE0E5;
}

.bg-grad-primary
{
        background: rgb(214,255,252);
        background: linear-gradient(90deg, rgba(214,255,252,1) 0%, rgba(182,250,252,1) 100%);
}

/* ************************************************************************************************* */
/* ****************************************   TEXT  ************************************************ */
/* ************************************************************************************************* */

h1
{
	font-size: 40px; 
        letter-spacing: 1px;
}

.bold
{
	font-weight: 700;
}

.left
{
	text-align: left;
}

.right
{
	text-align: right;
}

.text-xs
{
	font-size: 12px; 
}

.text-sm
{
	font-size: 13px; 
}

.text-md
{
	font-size: 14px; 
}

.text-white
{
	color: #FFFFFF; 
}

.text-gray
{
	color: rgba(0, 0, 0, 0.6); 
}

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

.letter-spacing
{
        letter-spacing: 0.8px;
}

.required_field
{
        border-color: #FF0000;
}

/* ************************************************************************************************* */
/* ****************************************   NAV   ************************************************ */
/* ************************************************************************************************* */

.nav-logo
{
        width: 32px;
        height: 32px;
}

.badge 
{
	font-size: 14px;
}

.btn-link
{
        text-decoration: none;
}

.btn-link:hover 
{
        background-color: #DCE0E5;
}

.no-arrow .dropdown-toggle::after 
{
	display: none;
}

/* ************************************************************************************************* */
/* *************************************** BREADCRUMB ********************************************** */
/* ************************************************************************************************* */

.breadcrumb
{
        padding: 8px;
}

.breadcrumb-item
{
        margin-right: 8px;
        
        text-decoration: none;
}

/* ************************************************************************************************* */
/* **************************************** BUTTON  ************************************************ */
/* ************************************************************************************************* */

.btn-login
{
	font-size: 16px;
        font-weight: 700;
        
        letter-spacing: 0.8px;
        
        color: #FFFFFF;
}

.btn-login:hover,
.btn-login:focus,
.btn-login:active
{
        color: #FFFFFF;
}

.btn-light
{
        letter-spacing: 1px;
}

/* ************************************************************************************************* */
/* ****************************************  INPUT  ************************************************ */
/* ************************************************************************************************* */

::placeholder 
{
        color: #C4CCD4;
        opacity: 1; /* Firefox */
}

::-ms-input-placeholder /* Edge 12 -18 */
{ 
        color: #C4CCD4;
}

.form-input-password
{
	font-size: 16px;
        font-weight: 700;
        
        letter-spacing: 0.8px;
        
        width: 80%;
        padding: 8px;
        
        outline: none;
        
        border-width: 1px;
        border-color: #000000;
        border-top: none;
        border-left: none;
        border-right: none;
}

.form-input-login
{
	font-size: 16px;
        font-weight: 700;
        
        letter-spacing: 0.8px;
        
        width: 100%;
        padding: 8px;
        
        outline: none;
        
        border-width: 1px;
        border-color: #000000;
        border-top: none;
        border-left: none;
        border-right: none;
}

.form-input-checkbox
{
        width: 18px;
        height: 18px;
}

/* ************************************************************************************************* */
/* *****************************************  CARD  ************************************************ */
/* ************************************************************************************************* */

.card
{
        overflow-x: scroll;
}

.card-shadow
{
        border-width: 0.5px;
        border-radius: 16px;
        border-color: rgba(220, 224, 229, 0.4);
        
        box-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
}


/* ************************************************************************************************* */
/* *****************************************  WORKFLOW  ******************************************** */
/* ************************************************************************************************* */


/* ************************************************************************************************* */
/* *****************************************  TABLE  *********************************************** */
/* ************************************************************************************************* */

.table_modern
{
        border-radius: 5px;
        border-collapse: collapse;
        
        overflow: hidden;
}

.table_modern > thead,
.table_modern > tfoot
{
        font-size: 14px;
        
        text-transform: uppercase;
    
        color: #000000;
        
        background: rgb(214,255,252);
        background: linear-gradient(90deg, rgba(214,255,252,1) 0%, rgba(182,250,252,1) 100%);
}

.table_modern > tbody > tr:nth-child(odd) > td
{
        background-color: rgba(220, 224, 229, 0.3);
}

.table_modern > tbody > tr:hover > td
{
        background-color: rgba(255, 255, 0, 0.2);
}

.table_modern > thead > tr > th,
.table_modern > tfoot > tr > th,
.table_modern > tbody > tr > td
{
        border: 1px solid #FFFFFF;
        padding: 10px 15px;
        font-weight: 700;
        letter-spacing: 1.3px;
        vertical-align: top;
}

.table-link
{
        text-decoration: none;
}