html {
    height: 100%;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    position: relative;
    margin: 0;
    padding-bottom: 6rem;
    min-height: 100%;
    font-size:14px;
    background-image: url("../../images/frontend/background2.png");
}

.div_top_right_corner {
    position: absolute;
    top: 25px;
    right: 10%;
    font-family: 'Raleway', serif;
}

hr.style-three { 
    height: 12px; 
    border: 0; 
    box-shadow: inset 0 12px 12px -12px #0000ff; 
}

.section_divider {
    background-color: #fff;
    border-left: solid 1px  #000;
    border-right: solid 1px  #000;
    border-top: solid 1px  #000;
}

.section_divider_title {
    font-weight: bold;
    border-bottom: solid 2px #000;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.section_divider_content {
    padding-bottom: 15px;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.content-center {
    text-align: center;
}

.content-left {
    text-align: left;
}

.content-right {
    text-align: right;
}

table {
    margin: 0 auto;
}

.form_container {
    margin:0 auto;
    width:400px;
    border-radius: 10px;
    background-color: #ffffff;
    padding: 20px;
    border-top-style: inset;
    border-top-color: blue;
    border-left: solid 1px blue;
    border-right: solid 1px blue;
    border-bottom: solid 1px blue;
}

.bar_navigation, .main_content {
    margin:0 auto;
    padding: 10px;
    font-family: 'Raleway', serif;
    font-size:18px;
}

.bar_navigation {
    background-color: #ffffff;
    box-shadow:5px 5px 5px grey;
    width:1000px;
    border-top-style: inset;
    border-top-color: blue;
    border-left: solid 1px blue;
    border-right: solid 1px blue;
    border-bottom: solid 1px blue;
}

.bar_navigation a {
    text-decoration: none;
    font-weight: bold;
}

.main_content {
    width: 1050px;
    padding: 20px;
    border-top-style: inset;
    border-top-color: blue;
    border-left: solid 1px blue;
    box-shadow:5px 5px 5px grey;
    background-color: #fff;
}

.input_style {
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: 'Raleway', serif;
    font-size: 14px;
}

.input_style:focus {
    background: rgb(225, 225, 235);
}

textarea {
    min-height:120px;
    resize:vertical;
}

.format-font-size {
    font-size: 16px;
}

.btn-property {
    padding: 12px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.5s;
    font-family: 'Raleway', serif;
    font-size: 16px;
}

.color-blue {
    color: #fff;
    background-color: rgb(113, 163, 242);
}

.color-green {
    color: #fff;
    background-color: rgb(0, 128, 0);
}

.color-red {
    color: #fff;
    background-color: rgb(226, 26, 26);
}

.color-yellow {
    background-color: rgb(255, 255, 0);
    color: #000;
}

.color-blue:hover {
    color: #fff;
    background-color: rgb(76, 90, 113);
}

.color-green:hover {
    color: #fff;
    background-color: rgb(100, 216, 100);
}

.color-red:hover {
    color: #fff;
    background-color: rgb(255, 90, 90);
}

.color-yellow:hover {
    background-color: rgb(132, 144, 27);
    color: #fff;
}

.tbl-cell-color-orange {
    background-color: rgb(255, 183, 49);
    color: #000;
}

.text-bold {
    font-weight: bold;
}

.width-full {
    width: 100%;
}

.width-half {
    width: 50%;
}

.content-header {
    background-color: #ffffff;
    padding-bottom: 5px;
}

.content-header-alignment {
    text-align: center;
    padding-left: 0px;
}

.body_footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background: rgb(114,105,255);
    background: linear-gradient(163deg, rgba(114,105,255,1) 0%, rgba(255,254,143,1) 50%, rgba(114,105,255,1) 100%);
    text-align: center;
    border-top: inset;
    border-top-color: #9898f8;
    font-size:12px;
    /*font-weight: bold;*/
    font-style: italic;
}

.logo_main {
    width: 150px;
    height: 150px;
}

.profile_picture {
    border:dotted;
    border-radius:50%;
    width:200px;
    max-height: auto;
}

i.fa-bars {
    position: fixed;
}

i.fa-bars {
    font-size: 40px;
    top:50px;
    left:210px;
}

i.fa-bars:hover {
    cursor:pointer;
}

i.fa-check, i.fa-close {
    font-size:30px;
}

.caption {
    font-size: 24px;
    text-align: center;
    font-weight:bold;

}

span.title {
    font-size: 33px;
}

span.brochureTitle {
    font-size: 28px;
}

.underline--double {
    box-shadow: inset 0 -0.0175em orange, inset 0 -0.1em orange, inset 0 -0.20em orange, inset 0 -0.175em orange;
}

.text_title {
    font-family: 'Libre Baskerville', serif;
}

.text_content {
    font-family: 'Raleway', serif;
}

.warning_errors {
    color: rgb(255, 0, 0);
    display: none;
}

.span-error {
    background-color: rgb(255, 97, 97);
    color: #000;
    transition: all 0.5s;
    padding: 10px 10px;
    text-align: center;
    cursor: no-drop;
}

.span-error:hover {
    background-color: rgb(255, 0, 0);
    color: #fff;
}

.table-striped, .table-custom-bordered  {
    cursor: default;
    border-collapse: collapse;
    margin: 0 auto;
}

.table-striped th {
    padding: 4px;
    border-bottom: 1px solid #ddd;
}

.table-striped td {
    padding: 4px;
    border-bottom: 1px solid #ddd;
}

.table-striped tr:hover {
    background-color:#f5f5f5;
}

.table-custom-bordered th, .table-custom-bordered td, .table-striped th, .table-striped td  {
    vertical-align: top;
}

.table-custom-bordered th {
    background-color:rgb(103, 103, 255);
    color: #fff;
    padding: 5px;
}

.table-custom-bordered td {
    border-bottom: solid 1px #bfc0e7;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 5px;
}

.table-custom-bordered tr:hover {
    background-color:#f5f5f5;
}

.th-content-right th {
    text-align: right;
}

.th-content-left th {
    text-align: left;
}

.icon-property {
    color: #0000ff;
    transition: all 0.4s;
}

.icon-property:hover {
    color: #9e9efc;
}

.icon-property-navigation {
    color: #ffa500;
}

a {
    color: #0000ff;
    transition: all 0.4s;
}

a:hover {
    color: #9e9efc;
}

.tooltip-tbl-icon {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    cursor: pointer;
    text-decoration: none;
}

.tooltip-tbl-icon .tooltip-tbl-icon-text {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip-tbl-icon:hover .tooltip-tbl-icon-text {
    visibility: visible;
    opacity: 1;
}

.tooltip-tbl-icon .tooltip-tbl-icon-text::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

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

.icon-review {
    font-size: 25px;
    transition: all 0.5s;
}

.icon-color-green {
    color: rgb(0, 128, 0);
    cursor: pointer;
}

.icon-color-red {
    color: rgb(255, 0, 0);
    cursor: pointer;
}

.icon-color-green:hover {
    color: rgb(75, 228, 75);
}

.icon-color-red:hover {
    color: rgb(233, 132, 132);
}

/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px){
    .format-font-size {
        font-size: 14px;
    }

    .btn-property {
        font-size: 14px;
    }

    .input_style {
        font-size: 14px;
    }
}

/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
    .format-font-size {
        font-size: 13px;
    }

    .input_style {
        font-size: 13px;
    }

    .btn-property {
        font-size: 13px;
    }

    .form_container, .bar_navigation, .main_content {
       width:90%;
    }

    .form_container, .bar_navigation{
       padding-left: 15px;
       padding-right: 15px;
    }

    .main_content {
       padding: 15px;
    }

    .icon-review {
        font-size: 21px;
    }
}

/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
    body {
        font-size: 12px;
    }

    .content-header-alignment {
        text-align: left;
        padding-left: 80px;
    }

    .div_top_right_corner {
        position: absolute;
        top: 25px;
        right: 0;
        font-family: Arial, Helvetica, sans-serif;
    }

    .form_container, .bar_navigation, .main_content {
       width:95%;
    }

    .form_container, .bar_navigation {
       padding-left: 10px;
       padding-right: 10px;
    }


    .main_content {
       padding: 10px;
    }

    .logo_main {
         width: 100px;
         height: 100px;
    }
    
    .profile_picture {
         width:125px;
    }

    .caption {
         font-size:18px;
    }
    
    .footer {
         font-size:10px;
    }

    i.fa-bars {
         top:40px;
         left:30px;
         font-size: 30px;
    }

    i.fa-check, i.fa-close {
         font-size:20px;
    }

    span.title {
        font-size: 18px;
    }

    span.brochureTitle {
        font-size: 16px;
    }

    .format-font-size {
        font-size: 12px;
    }

    .btn-property {
        font-size: 12px;
    }

    .input_style {
        font-size: 12px;
    }

    .tooltip-tbl-icon .tooltip-tbl-icon-text {
        width: 120px;
    }

    .icon-review {
        font-size: 18px;
    }
}