@import "../font/GothamRounded.css";

:root
{
	--foreground: #2c3238;
	--foreground-alt: #2c3238;
	--foreground-high: #f8f9fa;

	--background: #f8f9fa;
	--background-alt: #f7f7f7;
	--background-high: #2c3238;
	--background-primary: #2c3238;

	--link-primary: #007bff;
	--link-secondary: #dc3545;
	--link-primary-hover: #00a2ff;
	--link-secondary-hover: #8a1d28;

	--button-primary-text: #f8f9fa;
	--button-secondary-text: #f8f9fa;

	--button-primary: #007bff;
	--button-secondary: #dc3545;
	--button-primary-hover: #00a2ff;
	--button-secondary-hover: #8a1d28;
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html, body
{
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'GothamRounded', sans-serif;
	font-size: 12pt;
	color: var(--foreground);
}

hr
{
    display: block;
    height: 2px;
    background: transparent;
    width: 100%;
    border: none;
    border-top: solid 1px #000000;
}

.navbar
{
    min-height: 70px;
}

.navbar-toggler
{
	color: white;
	border: 0px solid transparent;
	outline: 0px auto transparent;
}

.navbar-toggler:focus
{
	color: white;
	border: 0px solid transparent;
	outline: 0px auto transparent;
}

#container
{
    min-height: calc(100vh - 80px);
}

.login
{
    width: 600px;
    max-width: 100%;
    height: 400px;
    margin: 0 auto;
}

.no-submit { display: none; }
.matrix { display: none; }

.margin-top-1
{
    margin-top: 10px;
}

.margin-top-2
{
    margin-top: 20px;
}

.margin-top-3
{
    margin-top: 40px;
}

.full-width
{
    width: 100%;
}

.no-border
{
    border: none;
}

.d-hide
{
    display: none;
}

.logo
{
    font-size: 18pt !important;
    font-weight: 900 !important;
}

.mirror
{
    display: inline-block;
    transform:scaleX(-1);
}

.bg-primary
{
    background-color: var(--background-primary) !important;
}

.bg-special
{
    background-color: var(--background-alt) !important;
}

.bg-special a
{
    color: var(--foreground);
    text-decoration: none;
    background-color: transparent;
}

.bg-special a:hover
{
    color: var(--foreground);
    text-decoration: underline;
    background-color: transparent;
}

.text-primary
{
    color: var(--background) !important;
}

a
{
    color: var(--link-primary);
    text-decoration: none;
    background-color: transparent;
}

nav a
{
    color: var(--background);	
}

.orange { color: rgb(255, 102, 0) !important; }
.cyan { color: rgb(0, 204, 255) !important; }
.bg-rasna { background-color: rgb(255, 102, 0) !important; }
.bg-coder { background-color: rgb(0, 204, 255) !important; }

.form-control.view-data[readonly], .form-control.view-data:disabled
{
    background-color: transparent !important;
    border: 0px solid transparent !important;
}

.header
{
    background-color: black;
}

.navbar .logo
{
    height: 3rem;
    width: auto;
}

.content
{
	overflow-x: hidden;
	padding-top: 1rem;
	padding-bottom: 1rem;
	background-color: var(--background);
}

.print-title
{
    font-size: 24pt;
}

.print-sub-title
{
    font-size: 18pt;
}

.bold
{
    font-weight: 700;
}

.clear
{
    clear: both;
}

.card-title
{
    font-size: 1.25rem;
    line-height: 40px;
}

.modal-note
{
    font-size: .75rem;
}

.btn-fa
{
    width: 2rem;
    height: 2rem;
    font-size: 1.2rem;
    line-height: 1.2rem;
    padding: 0 !important;
    overflow: hidden;
}

.btn-fa img
{
    width: 2.75rem;
    height: 2.75rem;
    padding: 0 !important;
}

.btn-medium
{
	min-width: 100px !important;
}

.rounded-circle
{
	border-radius: 50%!important;
}

.btn-primary
{
	background: var(--button-primary) !important;
    color: var(--button-primary-text);
}

.btn-primary:hover
{
	background: var(--button-primary-hover) !important;
    color: var(--button-primary-text);
}

.btn-secondary
{
	background: var(--button-secondary) !important;
    color: var(--button-primary-text);
}

.btn-secondary:hover
{
	background: var(--button-secondary-hover) !important;
    color: var(--button-primary-text);
}

.btn-special
{
	background: var(--background) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--background-high) !important;
}

.btn-special:hover
{
    background-color: var(--background-high) !important;
	color: var(--foreground-high) !important;
    border: 1px solid var(--background-high) !important;
}


.pl-25, .px-25
{
	padding-left: .75rem !important;
}

.pr-25, .px-25
{
	padding-right: .75rem !important;
}

.text-primary
{
    color: var(--foreground) !important;
}

.cursor-pointer
{
    cursor: pointer !important;
}

.table-tool
{
    width: 32px;
}

footer
{
	height: 50px;
	width: 100%;
}

.password { -webkit-text-security: disc; }

.signature
{
	width: 100vw;
	max-width: 600px;
	height: calc(100vw * .3);
	max-height: 300px;
	background: white;
	border: 1px solid #000000;
}

.signature-container
{
	height: 150px;
	max-height: 150px;
}

.form-sign
{
	max-height: 150px;
}

.sign-label
{
	display: inline-block;
	width: 100%;
	border: 0px solid black;
	border-top: 1px solid black;
}

.fullsize-modal, .fullsize-modal .modal-dialog
{
	padding: 1rem;
	min-width: 100vw;
    margin: 0;
}

.fullsize-modal .modal-content 
{
    min-height: calc(100vh - 2rem);
}

.table.table-details td, .table.table-details th 
{
    padding: .5rem;
    vertical-align: middle;
}
.table.table-details td:first, .table.table-details th:first 
{
    padding: .5rem 0;
    vertical-align: middle;
}

.page
{
    width: 210mm;
    min-height: 297mm;
    padding: 20mm;
    margin: 10mm auto;
    border: 1px var(--background-alt) solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage
{
    padding: .5cm;
    border: none;
    height: 257mm;
    /* outline: 2cm #EAEAEA solid; */
}

.font-75
{
    font-size: .75rem;
}

@media (min-width: 576px)
{
	.modal-dialog.modal-xl
	{
		max-width: unset !important; 
		margin: 1.75rem auto;
	}
}

@page {
    size: A4;
    margin: 0;
}

@media print
{
    html, body
    {
        width: 210mm;
        height: 297mm;
    }

    .page
    {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
        background-color: white;
    }

    .subpage
    {
        border: none;
        outline: none;
    }

    .no-print, .no-print *
    {
        display: none !important;
    }
}
