html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins,
kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot,
thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark,
audio, video {	
	margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}
header, main, footer, section {
    position:relative;
}
html *, body * {
    box-sizing:border-box;
}
body {
	line-height:1;
}
ol, ul {
	list-style:none;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,q:before, q:after {
	content:''; content:none;
}
table {
	border-collapse:collapse; border-spacing:0;
}
a, ul, li {
	text-decoration:none; list-style:none;
}
a, a:active, a:hover, a:link, a:visited {
    color:#444;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
i {
    vertical-align:middle;
}
strong {
    font-weight:bold;
}
sup {
    vertical-align:middle; font-size:smaller;   
}
.clear {
    clear:both;   
}
.bspace {
    margin:0 0 2% 0;
}
.laqua {
    background:#DBFCFF;
}
.aqua {
    background:#09A6B4;
}
.gray {
    background:#F0F0F0;
}
.yellow {
    background:#F4D14B;
}
.black {
    color:#444;
}
/* CARS */
i.ciaz {
    color:#23344E;
}
i.versa {
    color:#2AF4C6;
}
i.caravan {
    color:#FF8C00;
}

@mixin vertical-align() {
    position:absolute; top:50%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
}


@font-face {
    font-family: 'montserrathairline';
    src: url('fonts/montserrat-hairline-webfont.eot');
    src: url('fonts/montserrat-hairline-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-hairline-webfont.woff2') format('woff2'),
         url('fonts/montserrat-hairline-webfont.woff') format('woff'),
         url('fonts/montserrat-hairline-webfont.ttf') format('truetype'),
         url('fonts/montserrat-hairline-webfont.svg#montserrathairline') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratlight';
    src: url('fonts/montserrat-light-webfont.eot');
    src: url('fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-light-webfont.woff2') format('woff2'),
         url('fonts/montserrat-light-webfont.woff') format('woff'),
         url('fonts/montserrat-light-webfont.ttf') format('truetype'),
         url('fonts/montserrat-light-webfont.svg#montserratlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratregular';
    src: url('fonts/montserrat-regular-webfont.eot');
    src: url('fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-regular-webfont.woff2') format('woff2'),
         url('fonts/montserrat-regular-webfont.woff') format('woff'),
         url('fonts/montserrat-regular-webfont.ttf') format('truetype'),
         url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratbold';
    src: url('fonts/montserrat-bold-webfont.eot');
    src: url('fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-bold-webfont.woff2') format('woff2'),
         url('fonts/montserrat-bold-webfont.woff') format('woff'),
         url('fonts/montserrat-bold-webfont.ttf') format('truetype'),
         url('fonts/montserrat-bold-webfont.svg#montserratbold') format('svg');
    font-weight: normal;
    font-style: normal;
}


html, body {
    font-family:'montserratregular'; font-weight:200; letter-spacing:1px; font-size:13px; width:100%; height:100%; color:#444;
    
    font-smoothing:antialiased;
    -o-font-smoothing:antialiased;
    -ms-font-smoothing:antialiased;
    -moz-font-smoothing:antialiased;
    -webkit-font-smoothing:antialiased;
}



/*
---------------------------
    HAMBURGER ICON
---------------------------
*/
.container {
    display:inline-block; cursor:pointer; left:16.66%; position:relative;
}
.bar1, .bar2, .bar3 {
    width:35px; height:5px; background-color:#444; margin:6px 0; transition:0.4s;
}
.change .bar1 {
    -webkit-transform:rotate(-45deg) translate(-9px, 6px);
    transform:rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
    opacity:0;
}
.change .bar3 {
    -webkit-transform:rotate(45deg) translate(-8px, -8px);
    transform:rotate(45deg) translate(-8px, -8px);
}
/*
---------------------------
    END HAMBURGER ICON
---------------------------
*/


/*
---------------------------
    LOGIN
---------------------------
*/

/*
---------------------------
    END LOGIN
---------------------------
*/



/*
---------------------------
    RENTAL PORTAL
---------------------------
*/
.dashboard {
    background:#eeeff1;
}
main, footer {
    width:81.34%; left:16.66%;
}
main {
    margin:0 2%;
}
/*
---------------------------
    ROW AND COLUMNS
---------------------------
*/
.row {
    display:grid; grid-column-gap:2em; grid-row-gap:2em; grid-template-columns:1fr 1fr; margin:0 2% 0 0;
}
.row:nth-child(1) {
    grid-template-columns:1fr 1fr 1fr 1fr; margin:2em 2% 0 0;
}
.row:nth-child(2) {
    grid-template-columns:1.5fr 2fr;
}
.row:nth-child(3), .row_full {
    grid-template-columns:1fr; margin:0 2% 0 0;
}
.row::after {
    content:""; clear:both;
}
.col {
    position:relative;
}
/*
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 100%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float:left; position:relative;
}*/
/*
---------------------------
    END COLUMNS
---------------------------
*/


/*
---------------------------
    DASHBOARD CARDS
---------------------------
*/
.cards {
    display:block; background:#fff; padding:2em; height:100%; position:relative; border-top:4px solid #0f1a40;
}
.cards_dif {
    height:auto;
}
.cards_dif:nth-child(-n+2) {
    margin:0 0 2em 0;
}
.cards h1 {
    font-family:'montserratbold'; font-size:15px; line-height:16px; margin:0 0 10px 0;
}
.cards h2 {
    font-family:'montserratbold'; font-size:13px; margin:2em 0 10px 0; color:#444; letter-spacing:1px; display:inline-block;
}
.cards h3 {
    font-family:'montserratbold'; font-size:13px; margin:0 0 10px 0; color:#444; letter-spacing:1px; display:inline-block; text-transform:uppercase;
}
.cards p {
    
}
.cards span {
    font-size:1.4em; vertical-align:middle; margin:0 6px 0 0;
}
.cards span i {
    font-size:0.8em; margin:0 6px 0 0; vertical-align:middle;
}
.cards span:nth-child(2) {
    font-size:12px; vertical-align:middle;
}


/*
---------------------------
    ACCORDION
---------------------------
*/
.accordion {
    cursor:pointer; text-align:left; border:none; outline:none; padding:0; margin:0; border-bottom:1px solid #eee; width:100%; margin:0 0 4px 0;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.accordion:after {
    content:'\02795'; font-size:13px; color:#777; margin:0 0 0 10px;
}
.onshow:after {
    content:"\2796";
}
.onshow, .accordion:hover {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.panel {
    display:none; overflow:hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


/*
---------------------------
    NAV SIDE
---------------------------
*/
.hide {
    display:none; visibility:hidden;
}
.navside {
    background:#cecece; height:100%; padding:1% 2%; float:left; top:0; position:fixed; width:16.66%;
}
.navside::after {
    content:""; clear:both;
}
.navside .logo {
    text-align:center; margin:0 auto; position:relative;
}
.navside .logo a {
    
}
.navside .logo img {
    text-align:center; margin:0 auto; width:160px;
}
.navside nav {
    position:relative; margin:2.6em 0 0 0; width:100%;
}
.navside nav ul, .navside nav li {
    
}
.navside nav ul li {
    color:#000;
}
.navside nav ul .lihead {
    color:#000; font-size:15px; padding:8px 0;
}
.navside nav .username {
    text-transform:capitalize; margin:0 0 1em 0; font-size:1.2rem;
}
.navside nav ul li a {
    position:relative; display:block; font-size:15px; color:#000; text-transform:capitalize; padding:8px 0; 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.navside nav ul li a:hover {
    color:#444;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.navside nav ul li .current {
    border-bottom:2px solid #444; width:115.7%; color:#444;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.navside nav ul li .current:hover {
    border-bottom:2px solid red; color:red;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.navside nav ul li .logout {
    margin:32px 0 0 0; color:#444; font-weight:bold; text-transform:uppercase;
}
.navside nav ul li .logout:hover {
    color:red;
}
.navside nav ul li i {
    font-size:24px; margin:0 10px;
}
.navside nav ul li span {
    vertical-align:middle;
}
.navside nav ul .indent {
    
}
.navside nav ul .indent li {
    
}
.navside nav ul .indent li a {
    font-size:12px; margin:0 0 0 10px; width:110.7%;
}
/*
---------------------------
    END NAV SIDE
---------------------------
*/


/*
---------------------------
    NAV SIDE
---------------------------
*/
.navtop {
    background:#F4D14B; height:80px; padding:20px 40px; left:240px; display:none;
}
.navtop nav {
    text-align:right; float:right; position:relative; height:100%;
}
.navtop nav ul, .navtop nav li {
    display:inline-block;
}
.navtop nav li {
    color:#444; line-height:40px; background:#F4D14B;
}
.navtop nav ul li a {
    font-size:15px; vertical-align:bottom; color:#444; margin:0 10px; text-transform:uppercase; display:inline-block;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.navtop nav ul li a:hover {
    color:#09A6B4;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.navtop nav ul li i {
    font-size:24px; margin:0 10px;
}
.navtop nav ul li span {
    vertical-align:middle; margin:0 20px 0 0;
}

/*
---------------------------
    Table: Calendar
---------------------------
*/
main .calendar {
    margin:2em auto 0 auto;
}
.calendar table {
    table-layout:fixed; width:100%;
}
.calendar table thead tr.cal_head th {
    background-color:#2877d6; height:100px; text-align:center; vertical-align:middle; border:none; font-size:26px; color:#fff;
}
.calendar table thead tr th a.arrow {
    color:#fff;
}
.calendar table thead tr th a.arrow:hover {
    color:#0f1a40; text-decoration:none;
}
.calendar table thead tr.week_head th {
    height:40px; text-align:center; vertical-align:middle; border:1px solid #dee2e6;
}


/* Body */
.calendar table tbody tr td {
    height:70px; width:100%; border:1px solid #dee2e6; vertical-align:top; padding:1em;
}
.calendar table tbody tr td a {
    text-decoration:none; color:#444; display:block; height:100%; width:100%;
}
/* Tip */
div.tips {
    margin-top:40px;
}
div.tip {
    padding:0 0 0 2px; font-size:40px; width:50%; background:#123abc; display:inline-table; color:#444;
}
div.ciaz {
    background:#23344E;
}
div.versa {
    background:#2AF4C6;
}
div.caravan {
    background:#FF8C00;
}
/* Today */
td.today {
    background-color:#fdb430; color:#444;
}
td.today > a > div.tips > div.tip {
    color:#fff;
}

/* Tooltip text */
.tip .tooltiptext {
    visibility:hidden; background-color:#0f1a40; color:#fff; text-align:center; padding:8px; font-size:12px; display:block; margin:1em 0 0 0;
    /* Position the tooltip text - see examples below! */
    position:absolute; z-index:1;
}
.tip:hover .tooltiptext {
    visibility:visible;
}
.tip .tooltiptext::after {
    content:" "; position:absolute; bottom:100%; right:90%; margin-left:-5px; border-width:5px; border-style:solid; border-color:transparent transparent #0f1a40 transparent;
}
/*
---------------------------
    Table: Detail/Stripped
---------------------------
*/
main .detail {
    margin:2em auto 0 auto; width:60%;
}
.detail_container {
    table-layout:fixed; width:100%;
}
.detail_container h3 {
    font-size:26px; color:#fff; background:#A4BDBF; text-transform:uppercase; font-family:'montserratbold'; text-align:center; padding:.5em;
}
.detail_container h3 span {
    font-size:20px; color:#fff; text-transform:lowercase; font-family:'montserratbold'; text-align:center; line-height:60px; margin:0 8px;
}
/* Table Stripped */
table.stripped {
    width:100%; border-collapse:collapse;
}
table.stripped thead {
    
}
table.stripped thead tr {
    
}
table.stripped thead tr th {
    font-size:14px; height:40px; text-align:left; vertical-align:middle; border:none; color:#444; padding:0 0 0 1em;
}
/* Body */
table.panel tbody {
    margin:0 0 10px 0; display:inline-block; 
}
table.panel tbody tr td {
    width:100%;
}
table.stripped tbody tr:nth-child(even) {
    background:#f2f2f2;
}
table.stripped tbody tr:nth-child(uneven) {
    background:#ffffff;
}
table.stripped tbody tr th {
    border:1px solid #dee2e6; vertical-align:top; padding:1em; font-family:'montserratbold'; text-align:left; width:20em;
}
table.stripped tbody tr td {
    border:1px solid #dee2e6; vertical-align:top; padding:1em;
}
table.stripped tbody tr td a {
    text-decoration:none; color:#444; display:inline;
}
table.stripped tbody tr td a:hover {
    color:#eeeff1;
}
table.stripped tbody tr td .btn {
    text-decoration:none; color:#fff; display:inline-block; box-sizing:border-box; width:auto; padding:6px 4px; background:#2877d6; text-align:center; margin:-10px 0;
}
table.stripped tbody tr td .btn:hover {
    color:#F4D14B;
}


/*
---------------------------
    Form: Edit
---------------------------
*/
main .edit {
    margin:2em auto 0 auto; width:60%;
}
.edit_container {
    width:100%;
}
.edit_container h2 {
    font-size:30px; color:#444; background:#DBFCFF; text-transform:lowercase; text-align:center; padding:.5em;
}
.edit_container h3 {
    font-size:26px; color:#fff; background:#A4BDBF; text-transform:uppercase; font-family:'montserratbold'; text-align:center; padding:.5em;
}
.edit_container h3 span {
    font-size:20px; color:#fff; text-transform:lowercase; font-family:'montserratbold'; text-align:center; line-height:60px; margin:0 8px;
}


.form-group input {
    font-family:'montserratregular'; font-size:13px; color:#444;
    border:1px solid #cecece; background-image:none; background-color:transparent;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
}
.form-group input:active, .form-group input:focus, .form-group select:active, .form-group select:focus {
    border:none; outline:none;
}
.form-group select {
    font-family:'montserratregular'; font-size:13px; color:#444;
    border:none; background-image:none; background-color:transparent;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
}
.form-group select option {
    border:none; background-image:none; background-color:transparent;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
}
.form-group .submit {
    text-transform:uppercase; font-size:24px; font-family:'montserratbold';
}


/*
---------------------------
    Buttons
---------------------------
*/
.btngroup {
    position:relative; display:block; height:4em;
}
.btngroup .btn {
    position:relative; margin:2em 0 0 0;
}
.btngroup .btn .btn-main {
    display:inline-block; outline:2px solid #2877d6; outline-offset:-2px; background:#fff; padding:14px 0; color:#2877d6; font-weight:bold; cursor:pointer; font-size:1rem; margin:0 0 0 2em; width:140px; text-align:center; z-index:999; float:right;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    -o-appearance:none;
    appearance:none;
}/*
.btngroup .btn .btn-back {
    background:#09A6B4; 
}
.btngroup .btn .btn-edit {
    background:#1646CC;
}
.btngroup .btn .btn-delete {
    background:#BF1327;
}*/
.btngroup .btn .btn-main:hover, .btngroup .btn .btn-main:focus {
    outline:2px solid #fdb430; color:#fdb430;
}



footer .last {
    padding:3% 4%; color:#444; position:relative;
}
footer .last .gridfull {
    width:98%; margin:0 1%; text-align:center;
}
footer .last .gridfull span {
    color:#8c8c8c; font-size:12px; font-weight:normal;
}
footer .last .gridfull a {
    color:#cecece;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
footer .last .gridfull a:hover {
    color:#09A6B4;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

footer .last .gridfull .made {
    position:absolute; left:0; right:0; bottom:0; display:block;
}
footer .last .gridfull .made p {
    font-size:11px; color:#fff; position:absolute; bottom:0; left:0; right:0;
}
footer .last .gridfull .made a {
    font-size:11px; color:#fff; padding:5px; background:#0f1a3f;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
footer .last .gridfull .made a, footer .last .gridfull .made a:active, footer .last .gridfull .made a:link, footer .last .gridfull .made a:visited {
    color:#fff;
}
footer .last .gridfull .made a:hover {
    background:#fdb430;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}





/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {    
}


@media only screen and (min-width:960px) and (max-width:1200px) {
   
}


@media only screen and (min-width: 1024px) {    
}


@media only screen and (min-width:1241px) and (max-width:1400px) {
    
}

@media only screen and (min-width:1141px) and (max-width:1240px) {
    
}


@media only screen and (min-width:960px) and (max-width:1140px) {
    
}



/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    
}
    

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
}


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    
}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px)  {
    
}