/*
	HTML5 Reset :: style.css - Ismael Salamano
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
 
  Sections to search:
  - ACCORDION
  - GENERICS
  - BUTTONS
  - CARDS
  - DROPDOWN MENU
  - FORMS
  - LATERAL BOX
  - LOADER MODAL
  - LOGIN
  - MODAL
  - NOTE
  - TABLE
 

-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {
    max-width: 100%;
}

/* force a vertical scrollbar to prevent a jumpy page */
html {
    /*overflow-y: scroll;*/
}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 1em;
    vertical-align: baseline;
    background: transparent;
}

del {
    text-decoration: line-through;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted #000;
    cursor: help;
}

/* tables still need cellspacing="0" in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

th {
    font-weight: bold;
    vertical-align: bottom;
}

td {
    font-weight: normal;
    vertical-align: top;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

input,
select {
    vertical-align: middle;
}

pre {
    white-space: pre;
    /* CSS2 */
    white-space: pre-wrap;
    /* CSS 2.1 */
    white-space: pre-line;
    /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word;
    /* IE */
}

input[type='radio'] {
    vertical-align: text-bottom;
}

input[type='checkbox'] {
    vertical-align: bottom;
    *vertical-align: baseline;
}

.ie6 input {
    vertical-align: text-bottom;
}

select,
input,
textarea {
    font: 1em sans-serif;
}

table {
    font-size: inherit;
    font: 1em;
}

/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover,
a:active {
    outline: none;
}

small {
    font-size: 85%;
}

strong,
th {
    font-weight: bold;
}

td,
td img {
    vertical-align: top;
}

p,
span {
    -webkit-text-size-adjust: none;
}

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* standardize any monospaced elements */
pre,
code,
kbd,
samp {
    font-family: monospace, sans-serif;
}

/* hand cursor on clickable elements */
.clickable,
input[type='button'],
input[type='submit'],
button {
    cursor: pointer;
}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,
input,
select,
textarea {
    margin: 0;
}

/* make buttons play nice in IE */
button {
    width: auto;
    overflow: visible;
}

/* scale images in IE7 more attractively */
.ie7 img {
    -ms-interpolation-mode: bicubic;
}

/* prevent BG image flicker upon hover */
.ie6 html {
    filter: expression(
        document.execCommand('BackgroundImageCache', false, true)
    );
}

/* let's clear some floats */
.clearfix:before,
.clearfix:after {
    content: '\0020';
    display: block;
    height: 0;
    overflow: hidden;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/
/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body {
    font: 16px Arial, Helvetica, sans-serif;
}

/* using local fonts? make sure to read up on Paul Irish's 
	Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */
/* we like off-black for text */
body,
select,
input,
textarea {
    color: #333;
    -webkit-appearance: none;
    border-radius: 0px;
}

a {
    color: #03f;
}

a:hover {
    color: #999;
}

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection {
    background: #e59c52;
    color: #ffffff;
    text-shadow: none;
}

::selection {
    background: #e59c52;
    color: #ffffff;
    text-shadow: none;
}

/*	j.mp/webkit-tap-highlight-color */
a:link {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
}

ins {
    background-color: #fcd700;
    color: #000;
    text-decoration: none;
}

mark {
    background-color: #fcd700;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

/* Print styles!
-------------------------------------------------------------------------------*/
/* Media queries!
-------------------------------------------------------------------------------*/
/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */

/************************************************************/
/****************        GENERICS       *********************/
/************************************************************/

html {
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    height: 100%;
    background: #fff;
    font-size: 1em;
    font-family: 'robotoregular', sans-serif;
    font-weight: 400;
    color: #292e33;
    -webkit-font-smoothing: antialiased;
    /*-webkit-transform: translate3d(0,0,0);  -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0);*/
}

body.non_scroll {
    overflow: hidden;
}

*:focus {
    outline: none;
}

a {
    color: #83c6b9;
    text-decoration: underline;
    -webkit-transition: all 0.35s ease-out;
    -moz-transition: all 0.35s ease-out;
    transition: all 0.35s ease-out;
    cursor: pointer;
}

header,
section,
article,
aside,
footer,
nav,
figure,
div {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}

/*FONTS*/
@font-face {
    font-family: 'robotobold';
    src: url('fonts/roboto-bold-webfont.woff2') format('woff2'),
        url('fonts/roboto-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotoitalic';
    src: url('fonts/roboto-italic-webfont.woff2') format('woff2'),
        url('fonts/roboto-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotolight';
    src: url('fonts/roboto-light-webfont.woff2') format('woff2'),
        url('fonts/roboto-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotomedium';
    src: url('fonts/roboto-medium-webfont.woff2') format('woff2'),
        url('fonts/roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotoregular';
    src: url('fonts/roboto-regular-webfont.woff2') format('woff2'),
        url('fonts/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*ELLIPSIS TEXT*/
.truncate {
    max-width: 200px;
    height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*HEADINGS*/
h1,
h2 {
    padding: 0 150px;
    font-weight: normal;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

h1 {
    font-family: 'robotobold', sans-serif;
    font-size: 2.5em;
    margin: 0 0 10px;
}

h2 {
    font-size: 2em;
    color: #7f7f7f;
}

h3 {
    font-family: 'robotomedium', sans-serif;
    font-size: 1.75em;
}

/*DISABLE*/
.disable {
    pointer-events: none;
    -webkit-pointer-events: none;
}

/*LAYOUT*/
/*Row*/
.row {
    width: 100%;
    float: left;
}

/*Center Content*/
.center_content {
    width: 800px;
    margin: 0 auto;
}

/*Margin*/
/*10px*/
.margin_10_0 {
    margin: 10px 0;
}

.margin_10_0_0 {
    margin: 10px 0 0;
}

.margin_0_0_10 {
    margin: 0 0 10px;
}

.margin_0_10 {
    margin: 0 10px;
}

.margin_0_10_0_0 {
    margin: 0 10px 0 0;
}

.margin_0_0_0_10 {
    margin: 0 0 0 10px;
}

.margin_0_10_10_0 {
    margin: 0 10px 10px 0;
}

.margin_0_10_20_0 {
    margin: 0 10px 20px 0;
}

/*20px*/
.margin_20_0 {
    margin: 20px 0;
}

.margin_20_0_0 {
    margin: 20px 0 0;
}

.margin_0_0_20 {
    margin: 0 0 20px;
}

.margin_0_20 {
    margin: 0 20px;
}

.margin_0_20_0_0 {
    margin: 0 20px 0 0;
}

.margin_0_0_0_20 {
    margin: 0 0 0 20px;
}

/*Columns*/
.col {
    float: left;
    padding: 0 20px 0 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: relative;
}

.col:last-child {
    padding: 0;
}

/*Logic*/
.col_1 .col {
    width: 100%;
}

.col_2 .col {
    width: 50%;
}

.col_3 .col {
    width: 33.3333%;
}

.col_4 .col {
    width: 25%;
}

.col_5 .col {
    width: 20%;
}

/*Exceptions*/
.content_steps .col {
    padding: 0;
}

/*HEADER*/
header {
    min-height: 160px;
    border-bottom: #ced3d9 1px solid;
    padding: 40px;
    text-align: center;
}

/*Logo*/
header .logo_apartment {
    width: 55px;
    height: 40px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto 0;
    font-size: 0;
    background: url(../img/logo.svg) no-repeat;
}

/*CONTENT*/
.content {
    display: flex;
    min-height: calc(100% - 160px);
    overflow-y: hidden;
}

/*Hamburguer Button Mobile*/
.btn_open {
    display: none;
}

/*Legends*/
.content_legends ul {
    text-align: left;
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 6px;
    box-shadow: 0 10px 20px 0 rgba(44, 62, 80, 0.2);
}

.content_legends ul li {
    display: inline-flex;
    margin: 0 20px 20px 0;
    padding: 0 20px 0 0;
    align-items: center;
}

.content_legends ul li:last-child {
    margin: 0;
    padding: 0;
    border: none;
}

/*Icons*/
.content_legends ul li img {
    display: inline-block;
    margin: 0 10px 0 0;
}

.legend_icon {
    width: 30px;
}

/*Texts*/
.content_legends ul li span {
    display: inline-block;
    font-size: 0.875em;
    font-family: 'robotomedium', sans-serif;
    font-weight: normal;
    color: #666666;
}

/*Navigation*/
nav {
    width: 250px;
    background: #ffffff;
    padding: 30px 20px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

/*Close Mobile*/
nav .btn_close {
    display: none;
}

/*User*/
nav .content_user {
    margin: 0 0 40px;
}

/*Image*/
nav .content_user figure {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50%;
}

nav .content_user figure img {
    position: absolute;
    top: 0;
    left: 0;
}

/*Name*/
nav .content_user .name,
nav .content_user .company {
    color: #7f7f7f;
    text-align: center;
}

nav .content_user .name {
    padding: 10px 0 0;
}

nav .content_user .company {
    font-family: 'robotobold', sans-serif;
    padding: 5px 0 20px;
}

/*Links*/
nav ul li {
    border-top: #ced3d9 1px solid;
    padding: 15px 0;
}

nav ul li:first-child {
    border: none;
}

nav ul li a {
    color: #1a1a1a;
    display: block;
    text-decoration: none;
}

nav ul li a:hover {
    transform: translateX(5px);
    -webkit-transform: translateX(5px);
}

nav ul li.active a {
    font-family: 'robotobold', sans-serif;
    pointer-events: none;
}

/*Logout*/
nav ul li.logout a {
    margin: 40px 0 0;
}

/*Dynamic Content*/
.dynamic_content {
    background: #f1f3f5;
    padding: 30px 20px;
}

.dynamic_content_second_level {
    background: #ffffff;
    padding: 30px 20px;
    width: 0;
    position: absolute;
    right: 0;
    top: 0;
}

/*Details Page Exceptions*/
.details_date {
    text-align: right;
    font-family: 'robotomedium', sans-serif;
    font-size: 1.25em;
}

.details_title {
    min-width: 150px;
    display: inline-block;
    font-family: 'robotomedium', sans-serif;
}

.details_note {
    font-family: 'robotoitalic', sans-serif;
}

/*FOOTER*/
footer {
    min-height: 100px;
    padding: 40px;
    background: #83c6b9;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

footer span {
    float: left;
    font-weight: normal;
    font-size: 0.85em;
    color: #ffffff;
    text-transform: uppercase;
}

/*Media Query Mobile General*/
@media (max-width: 1000px) {
    body {
        -webkit-text-size-adjust: none;
    }

    /*LAYOUT*/
    /*Row*/
    .row {
        width: 100%;
        float: left;
    }

    /*Center Content*/
    .center_content {
        width: 100%;
        margin: auto;
    }

    /*Columns*/
    .col {
        padding: 0;
    }

    /*Logic*/
    .col_1 .col,
    .col_2 .col,
    .col_3 .col,
    .col_4 .col,
    .col_5 .col {
        width: 100%;
        margin: 0 0 15px;
    }

    /*HEADER*/
    header {
        min-height: 160px;
        padding: 20px;
    }

    /*Logo*/
    header .logo_apartment {
        left: 0;
        position: relative;
        display: block;
        margin: 0 auto 15px;
    }

    /*Titles*/
    header h1,
    header h2 {
        padding: 0 35px;
    }

    header h1 {
        font-size: 1.125em;
        margin: 0 0 10px;
    }

    header h2 {
        font-size: 0.875em;
        padding: 0;
    }

    /*CONTENT*/
    /*Hamburguer Button Mobile*/
    .btn_open {
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        z-index: 5;
        top: 20px;
        right: 20px;
        font-size: 0;
        background: url(../img/menu.svg) no-repeat;
        background-size: 100%;
    }

    /*Legends*/
    .content_legends ul li {
        display: flex;
        margin: 0 0 10px;
        padding: 0 0 10px;
        align-items: center;
        border-bottom: #666666 1px solid;
    }

    /*Icons*/
    .content_legends ul li img {
        display: inline-block;
        margin: 0 10px 0 0;
    }

    .legend_icon {
        width: 30px;
    }

    /*Texts*/
    .content_legends ul li span {
        display: inline-block;
        font-size: 0.875em;
        font-family: 'robotomedium', sans-serif;
        font-weight: normal;
        color: #666666;
    }

    /*Navigation*/
    nav {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: -100%;
        z-index: 10;
        padding: 30px 20px;
        transition: all 0.35s ease-out;
        -webkit-transition: all 0.35s ease-out;
    }

    nav.show {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        padding: 30px 20px;
    }

    /*Close Mobile*/
    nav .btn_close {
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 2;
        background: url(../img/close.svg) no-repeat;
        background-size: 100% auto;
        font-size: 0;
    }

    /*User*/
    nav .content_user {
        margin: 0 0 20px;
    }

    /*Image*/
    nav .content_user figure {
        width: 50px;
        height: 50px;
        margin: 0 auto;
    }

    /*Name*/
    nav .content_user .name {
        color: #7f7f7f;
        text-align: center;
        padding: 10px 0 0;
    }

    /*Links*/
    nav ul li a:hover {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }

    /*Logout*/
    nav ul li.logout a {
        margin: 20px 0 0;
    }

    /*Dynamic Content*/
    .dynamic_content {
        background: #f1f3f5;
        padding: 25px 15px;
    }

    /*Details Page Exceptions*/
    .details_date {
        text-align: left;
        font-size: 1.25em;
    }

    .details_title {
        min-width: none;
        width: 100%;
    }

    /*FOOTER*/
    footer {
        padding: 20px;
    }
}

/************************************************************/
/****************         BUTTONS       *********************/
/************************************************************/

.button {
    width: 100%;
    display: block;
    padding: 10px 20px;
    text-align: center;
    border-radius: 25px;
    text-decoration: none;
    font-family: 'robotomedium', sans-serif;
    font-weight: normal;
    color: #999999;
    font-size: 1em;
    background: #ffffff;
    border: #ced3d9 2px solid;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.button:hover {
    transform: none;
    -webkit-transform: none;
    box-shadow: 0 10px 20px 0 rgba(44, 62, 80, 0.2);
}

/*Action*/
.button.action {
    border: none;
    background: #e59c52;
    color: #ffffff;
}

/*Green*/
.button.green {
    border: none;
    background: #83c6b9;
    color: #ffffff;
}

/*Reds*/
.button.red {
    border: none;
    background: #f52f41;
    color: #ffffff;
}

/*Exceptions*/
/*Center*/
.button.center {
    margin: 0 auto;
    width: 200px;
}

/*Small Button*/
.button.small {
    width: 50px;
    border-radius: 5px;
    font-size: 1.25em;
    float: right;
}

/*Small Button*/
.button.medium {
    width: 150px;
    float: left;
}

/*Big Button*/
.button.big {
    border-radius: 3px 0 0 3px;
    margin: 0 30px 0 0;
    position: relative;
    width: 100%;
    background: #ced3d9;
    border: none;
    color: #333333;
    padding: 13px 20px;
}

/*Backgrounds and Colors*/
.button.action.big {
    border: none;
    background: #e59c52;
    color: #ffffff;
}

.button.green.big {
    border: none;
    background: #83c6b9;
    color: #ffffff;
}

.button.red.big {
    border: none;
    background: #f52f41;
    color: #ffffff;
}

/*Accordion Button*/
.active .button.big {
    border: none;
    background: #83c6b9;
    color: #ffffff;
}

/*Badge*/
.button.big .badge {
    float: right;
    position: relative;
    top: -2px;
    margin: 0 40px 0 0;
}

@media (max-width: 1000px) {
    /*Button Arrow*/
    .content_steps .button.arrow {
        padding: 13px 0;
    }
}

/************************************************************/
/****************          FORMS        *********************/
/************************************************************/

/*LABEL*/
label {
    width: 100%;
    float: left;
    font-family: 'robotomedium', sans-serif;
    font-weight: normal;
    margin: 0 0 10px;
}

/*INPUTS-TEXTAREAS-SELECTS*/
input,
textarea,
select {
    width: 100%;
    height: 40px;
    float: left;
    padding: 0 10px;
    border: #ced3d9 1px solid;
    background: #ffffff;
    font-size: 0.875em;
    border-radius: 6px;
    font-weight: normal;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transition: all 0.35s ease-out;
    -webkit-transition: all 0.35s ease-out;
}

textarea {
    height: 200px;
    resize: none;
    padding: 15px 10px;
}

select {
    -webkit-appearance: menulist;
}

/*Sizes*/
/*Width*/
/*Small*/
input.small,
textarea.small,
select.small {
    width: 120px;
}

/*Medium*/
input.medium,
textarea.medium,
select.medium {
    width: 250px;
}

/*Height*/
/*Small*/
textarea.small_height {
    height: 120px;
}

/*Medium*/
textarea.medium_height {
    height: 240px;
}

/*Big*/
textarea.big_height {
    height: 300px;
}

/*Warning*/
.warning input,
.warning textarea,
.warning select {
    border: #f52f41 1px solid;
}

/*CHECKBOX*/
.label-check {
    width: auto;
    position: relative;
    cursor: pointer;
}

.label-check input[type='checkbox'] {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 7px;
    margin: 0;
    z-index: 1;
    cursor: pointer;
    width: 15px;
    height: 15px;
}

.label-check span {
    position: relative;
    top: -2px;
    background: #fff;
    border: 1px solid #dadada;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 5px;
    width: 15px;
    height: 15px;
}

.label-check input[type='checkbox']:checked + span:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 15px;
    height: 15px;
    background: url('../img/check.svg') no-repeat;
    background-size: 15px 15px;
}

/*RADIOS*/
.label-radio {
    width: auto;
    position: relative;
    cursor: pointer;
}

.label-radio input[type='radio'] {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 7px;
    margin: 0;
    z-index: 1;
    cursor: pointer;
    width: 15px;
    height: 15px;
}

.label-radio span {
    position: relative;
    top: -2px;
    background: #fff;
    border: 1px solid #dadada;
    border-radius: 50%;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 5px;
    width: 15px;
    height: 15px;
}

.label-radio input[type='radio']:checked + span:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 15px;
    height: 15px;
    background: url('../img/radio.svg') no-repeat;
    background-size: 15px 15px;
}

/*Exceptions*/
/*Header Table*/
.hd_table label {
    width: auto;
    margin: 10px 10px 0 0;
    float: none;
}

.hd_table select {
    width: 80px;
    margin: 0 0 10px;
    float: none;
}

/*Search*/
.hd_table .content_search {
    text-align: right;
}

.hd_table .content_search input[type='search'] {
    width: 300px;
    float: none;
    padding: 0 40px 0 10px;
}

.hd_table .content_search .btn_search {
    width: 20px;
    height: 20px;
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto 0;
    font-size: 0;
    background: url(../img/btn_search.svg) no-repeat;
    background-size: 100% auto;
}

/*Footer Table*/
.ft_table .content_paginator {
    text-align: right;
}

@media (max-width: 1000px) {
    /*Small*/
    input.small,
    textarea.small,
    select.small {
        width: 100%;
    }

    /*Medium*/
    input.medium,
    textarea.medium,
    select.medium {
        width: 100%;
    }

    /*Exceptions*/
    /*Header Table*/
    .hd_table label {
        width: 100%;
        float: left;
        margin: 0 0 10px;
    }

    .hd_table select {
        width: 100%;
        margin: 0;
        float: left;
    }

    /*Search*/
    .hd_table .content_search {
        text-align: left;
    }

    .hd_table .content_search input[type='search'] {
        width: 100%;
        float: left;
    }

    .hd_table .content_search .btn_search {
        width: 20px;
        height: 20px;
        z-index: 2;
        position: absolute;
        top: auto;
        bottom: 10px;
        right: 10px;
        margin: auto;
    }

    /*Footer Table*/
    .ft_table .content_paginator {
        text-align: left;
    }
}

/************************************************************/
/****************           NOTE        *********************/
/************************************************************/

.note {
    position: fixed;
    top: -50%;
    left: 0;
    z-index: 10;
    padding: 30px 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background: #83c6b9;
    box-shadow: 0 10px 20px 0 rgba(44, 62, 80, 0.2);
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
}

.note.show {
    top: 0;
}

/*Text*/
.note span {
    font-family: 'robotomedium';
    font-size: 1.125em;
    font-weight: normal;
    color: #ffffff;
}

/*Close button*/
.note .btn_close {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.note .btn_close img {
    width: 100%;
}

/*Warning*/
.note.warning {
    background: #f52f41;
}

/*TAGS*/
.content_tags .tags {
    display: inline-block;
    margin: 0 10px 10px 0;
}

.content_tags .tags a {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
}

/*Colors*/
.content_tags .tags.red a {
    background: #f52f41;
}

.content_tags .tags.red a:hover {
    background: #f85464;
}

.content_tags .tags.green a {
    background: #83c6b9;
}

.content_tags .tags.green a:hover {
    background: #b5e3da;
}

.content_tags .tags.orange a {
    background: #e59c52;
}

.content_tags .tags.orange a:hover {
    background: #ffbf7e;
}

.content_tags .tags.blue a {
    background: #3d5f8d;
}

.content_tags .tags.blue a:hover {
    background: #8ca4c9;
}

/*Text*/
.content_tags .tags a .text {
    font-family: 'robotolight', sans-serif;
    font-size: 0.875em;
    color: #ffffff;
}

/*BADGE*/
.badge {
    padding: 5px 10px;
    display: inline-block;
    margin: 0 5px;
    background: #999999;
    font-family: 'robotolight', sans-serif;
    font-size: 0.813em;
    color: #1a1a1a;
    border-radius: 3px;
    color: #ffffff;
}

/*Colors*/
.badge.red {
    background: #f52f41;
}

.badge.green {
    background: #83c6b9;
}

.badge.orange {
    background: #e59c52;
}

.badge.light_blue {
    background: #e6edf7;
    color: #1a1a1a;
}

@media (max-width: 1000px) {
    /*NOTE*/
    .note {
        padding: 20px 50px;
    }

    .note .btn_close {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 20px;
        top: 20px;
        bottom: auto;
    }

    /*TAGS*/
    .content_tags .tags {
        display: block;
        margin: 0 0 10px 0;
        width: 100%;
        float: left;
    }

    .content_tags .tags a {
        display: block;
        width: 100%;
        float: left;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .content_tags .tags a .text {
        position: relative;
        top: 2px;
    }

    .content_tags .tags a .badge {
        float: right;
    }
}

/************************************************************/
/****************     LOADER MODAL      *********************/
/************************************************************/

.loader {
    height: 100%;
    position: fixed;
    top: -101%;
    opacity: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.8);
    text-align: center;
    transition: opacity 0.2s ease-out;
    -webkit-transition: opacity 0.2s ease-out;
}

.loader.show {
    top: 0;
    opacity: 1;
}

/*LOADER VIEW MORE*/
.loader_view_more {
    padding: 30px 0 0;
    text-align: center;
}

/*Animation*/
.loader_content {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    border: 4px solid #e59c52;
    top: 50%;
    animation: loader 2s infinite ease;
}

.loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #e59c52;
    animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes loader-inner {
    0% {
        height: 0%;
    }
    25% {
        height: 0%;
    }
    50% {
        height: 100%;
    }
    75% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}

/************************************************************/
/****************          MODAL        *********************/
/************************************************************/

.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: -101%;
    left: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
}

.modal.show {
    top: 0;
}

/*Box*/
.modal .box {
    min-width: 350px;
    max-width: 700px;
    margin: 0 auto;
    padding: 20px 20px 30px;
    background: #ffffff;
    border-radius: 6px;
    opacity: 0;
    transition: all 0.35s ease-out;
    -webkit-transition: all 0.35s ease-out;
    transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
}

.modal.show .box {
    opacity: 1;
    transition-delay: 0;
    -webkit-transition-delay: 0;
}

/*Close button*/
.modal .btn_close {
    width: 30px;
    height: 30px;
    float: right;
    position: relative;
    opacity: 0;
    transition: all 0.35s ease-out;
    -webkit-transition: all 0.35s ease-out;
    transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
}

.modal.show .btn_close {
    opacity: 1;
    transition-delay: 0;
    -webkit-transition-delay: 0;
}

.modal .btn_close img {
    width: 100%;
}

@media (max-width: 1000px) {
    .modal .box {
        min-width: auto;
        max-width: auto;
        width: calc(100% - 40px);
    }
}

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

.content_table {
    width: 100%;
    float: left;
    overflow-x: auto;
}

.content_table table {
    width: 100%;
}

.content_table th,
.content_table td {
    text-align: left;
    padding: 5px 15px;
    font-family: 'robotolight', sans-serif;
    font-weight: normal;
    border-bottom: #cccccc 1px solid;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.content_table tr.active td {
    border: none;
    background: #ffffff !important;
}

.active .content_table th {
    font-family: 'robotolight', sans-serif;
}

/*Th*/
.content_table th {
    background: #ced3d9;
    font-family: 'robomedium', sans-serif;
    font-weight: bold;
    vertical-align: middle;
}

/*Td*/
.content_table td {
    font-size: 0.875em;
    background: #ffffff;
    vertical-align: middle;
    transition: all 0.35s ease-out;
    -webkit-transition: all 0.35s ease-out;
}

.content_table tr:hover td {
    background: #e5e1e1;
}

/*Links*/
.content_table th a,
.content_table td a {
    color: #333333;
    text-decoration: none;
    display: block;
}

.content_table th a:hover,
.content_table td a:hover {
    text-decoration: underline;
}

.content_table th a {
    padding: 0 25px 0 0;
    position: relative;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline;
}

.content_table th a::before {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
    background: url(../img/arrow.svg);
    background-size: 100% auto;
    content: '';
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transition: all 0.35s ease-out;
    -webkit-transition: all 0.35s ease-out;
}

.content_table th a.active::before {
    transform: rotate(0deg);
    -webktit-transform: rotate(0deg);
}

.content_table td a {
    color: #0093d8;
}

/*Button*/
.content_table td .button {
    color: #333333;
}

.content_table td .button.action {
    color: #ffffff;
}

.content_table td .button:hover {
    text-decoration: none;
}

/*Ordered header*/
.content_table .ordered_table {
    user-select: none;
}

.content_table .ordered_table img {
    position: relative;
    top: 3px;
}

/*Paginator*/
ul.paginator {
    color: #666666;
}

ul.paginator li {
    display: inline-block;
    margin: 0 20px 0 0;
}

ul.paginator li:last-child {
    margin: 0;
}

ul.paginator li a {
    text-decoration: none;
    color: #666666;
}

ul.paginator li a.number {
    padding: 5px 10px;
    background: #ced3d9;
    border-radius: 3px;
}

ul.paginator li a.number.active,
ul.paginator li a.number:hover {
    background: #83c6b9;
    color: #ffffff;
}

/*Exceptions*/
.content_lateral_box ul.paginator {
    text-align: right;
}

@media (max-width: 800px) {
    /*Paginator*/
    ul.paginator {
        text-align: center !important;
        margin: 10px 0;
    }

    ul.paginator li {
        margin: 0 8px 8px 0;
    }

    ul.paginator li a {
        display: none;
    }

    ul.paginator li a.number {
        display: block;
    }
}

/************************************************************/
/****************       ACCORDION       *********************/
/************************************************************/

/*Btn Open*/
.content_accordion .btn_accordion {
    color: #333333;
    position: relative;
    text-decoration: none;
    padding: 0 0 20px;
    border-bottom: #ced3d9 1px solid;
}

.content_accordion .btn_accordion::before {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
    background: url(../img/arrow.svg) no-repeat;
    background-size: 100% auto;
    content: '';
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
}

.content_accordion.active .btn_accordion::before {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

/*Content Animation*/
.content_accordion .content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.35s ease-out;
    -webkit-transition: all 0.35s ease-out;
}

.content_accordion.active .content {
    max-height: 7500px;
}

/*BIG ACCORDION*/
/*Button*/
.content_big_accordion .button.big {
    position: relative;
    margin: 0;
}

.content_big_accordion .button.big::after {
    width: 20px;
    height: 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto 0;
    background: url(../img/arrow.svg) no-repeat 0px -6px;
    background-size: 100% auto;
    content: '';
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
}

.content_big_accordion.active .button.big::after {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    background-position: 0px -30px;
}

/*Content Animation*/
.content_big_accordion .accordion_content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.35s ease-out;
    -webkit-transition: all 0.35s ease-out;
}

.content_big_accordion.active .accordion_content {
    max-height: 7500px;
    padding: 20px 0;
}

/************************************************************/
/****************          CARDS        *********************/
/************************************************************/

/*Card*/
.content_cards .card {
    padding: 30px 40px;
    background: #ffffff;
    margin: 0 0 30px;
    border-radius: 6px;
    box-shadow: 0 10px 20px 0 rgba(44, 62, 80, 0.2);
}

.content_cards .card:first-child {
    margin: 30px 0;
}

/*Col*/
.content_cards .card .col_3 {
    display: flex;
}

.content_cards .card .col_3 .col:last-child {
    border-left: #cccccc 1px solid;
    padding: 0 10px 0 30px;
}

/*Row*/
.content_cards .card ul li.row {
    margin: 0 0 15px;
}

/*Texts*/
.content_cards .card h3 {
    font-family: 'robomedium', sans-serif;
    font-weight: normal;
    font-size: 2em;
    color: #1a1a1a;
    margin: 0 0 40px;
}

.content_cards .card .label {
    min-width: 150px;
    display: inline-block;
    font-family: 'robotobold', sans-serif;
    font-weight: normal;
    font-size: 0.913em;
    margin: 0 15px 0 0;
    color: #666666;
}

.content_cards .card .information {
    display: inline-block;
    font-size: 0.875em;
    color: #1a1a1a;
}

/*Input*/
.content_cards .card input[type='number'] {
    width: 60px;
    float: none;
}

/*Select and Input*/
.content_cards .card select,
.content_cards .card input {
    width: 100%;
    float: none;
}

@media (max-width: 1000px) {
    /*Card*/
    .content_cards .card {
        padding: 20px 15px;
    }

    .content_cards .card:first-child {
        margin: 0 0 30px;
    }

    /*Col*/
    .content_cards .card .col_3 {
        flex-wrap: wrap;
    }

    .content_cards .card .col_3 .col:last-child {
        border-top: #cccccc 1px solid;
        border-left: none;
        padding: 30px 0 0;
    }

    /*Texts*/
    .content_cards .card h3 {
        font-size: 1.5em;
        margin: 0 0 20px;
    }

    .content_cards .card .label {
        min-width: none;
        width: 100%;
        margin: 0 0 5px;
    }

    /*Select and Input*/
    .content_cards .card select,
    .content_cards .card input,
    .content_cards .card input[type='number'] {
        width: 100%;
        float: left;
    }
}

/************************************************************/
/****************       LATERAL BOX     *********************/
/************************************************************/

.content_lateral_box {
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform-origin: right;
    -webkit-transform-origin: right;
    transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    -webkit-transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    transition-delay: 1s;
}

.content_lateral_box.show {
    opacity: 1;
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
}

/*Title*/
.content_lateral_box h3 {
    font-size: 1.25em;
    color: #1a1a1a;
    margin: 0 0 20px;
    font-weight: normal;
}

/*Close button*/
.content_lateral_box .btn_close {
    width: 40px;
    height: 40px;
    position: absolute;
    left: -100px;
    top: 0;
    opacity: 0;
    transition: all 0.35s ease-out;
    -webkit-transition: all 0.35s ease-out;
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
}

.content_lateral_box.show .btn_close {
    opacity: 1;
    transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
}

.content_lateral_box .btn_close img {
    width: 100%;
}

.content_lateral_box .btn_close .mobile {
    display: none;
}

/*Box*/
.content_lateral_box .box {
    width: calc(100% - 160px);
    height: calc(100% - 100px);
    padding: 60px 40px 0;
    background: #ffffff;
    align-self: flex-end;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform-origin: right;
    -webkit-transform-origin: right;
    transition: transform 1s cubic-bezier(0.2, 1, 0.3, 1);
    -webkit-transition: transform 1s cubic-bezier(0.2, 1, 0.3, 1);
    transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
}

.content_lateral_box.show .box {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
}

/*Content*/
.content_lateral_box .box .dyn_content {
    opacity: 0;
    transition: all 0.35s ease-out;
    -webkit-transition: all 0.35s ease-out;
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
}

.content_lateral_box.show .box .dyn_content {
    opacity: 1;
    transition-delay: 1.3s;
    -webkit-transition-delay: 1.3s;
}

/*Media Query Mobile General*/
@media (max-width: 1100px) {
    /*Close button*/
    .content_lateral_box .btn_close {
        top: 20px;
        right: 20px;
        left: auto;
        z-index: 2;
        position: absolute;
    }

    /*Box*/
    .content_lateral_box .box {
        width: 100%;
        height: 100%;
        min-height: 100%;
        overflow-y: auto;
        padding: 70px 20px 20px;
    }

    .content_lateral_box .btn_close .desktop {
        display: none;
    }

    .content_lateral_box .btn_close .mobile {
        display: block;
    }
}

/************************************************************/
/****************      DROPDOWN MENU    *********************/
/************************************************************/

.content_dropdown {
    width: 200px;
}

/*Hidden Box*/
.content_dropdown .hidden_box {
    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 10;
    background: #ffffff;
    border: #cccccc 1px solid;
    border-radius: 10px;
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform-origin: top;
    -webkit-transform-origin: top;
    pointer-events: none;
    transition: all 0.35s ease-out;
    -webkit-transition: all 0.35s ease-out;
}

.content_dropdown.show .hidden_box {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
    pointer-events: all;
}

.content_dropdown .hidden_box li {
    padding: 8px 12px;
    border-bottom: #cccccc 1px solid;
}

.content_dropdown .hidden_box li:last-child {
    border: none;
}

.content_dropdown .hidden_box li a {
    display: block;
    text-decoration: none;
}

/************************************************************/
/****************     CONTENT LOGIN     *********************/
/************************************************************/

.content_login {
    height: 100%;
    background: #333333;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

/*Box*/
.content_login .box {
    width: 400px;
    background: #ffffff;
    border-radius: 6px;
    padding: 30px 20px;
    margin: 0 auto;
}

/*Logo*/
.content_login .box img {
    margin: 0 auto 30px;
    display: block;
    width: 100px;
}

/*List*/
.content_login .box li {
    margin: 0 0 20px;
}
.content_login .box li:last-child {
    margin: 0;
}

/*Warnign Msg*/
.warning_msg {
    height: 0;
    overflow: hidden;
    background: #f52f41;
    font-size: 0.875em;
    color: #ffffff;
    padding: 0 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0 0 10px;
    border-radius: 3px;
    transition: all 0.35s ease;
    -webkit-transition: all 0.35s ease;
}
.warning_msg.show {
    height: 29px;
    padding: 5px 10px;
}

/*Media Query Mobile General*/
@media (max-width: 1000px) {
    .content_login .box {
        width: calc(100% - 40px);
    }
}