@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700");


:root {
    --bg-color: #F0F2F5;
    --white: #FFFFFF;
    --red-dark: #7E3B53;
    --text-color: #68758F;
    --hint-color: #A3B1C8;
    --text-color-dark: #28325A;
    --line-color: #DDE3EF;
    --blue: #074BB2
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 100;
}
h1 {
    font-size: 30px;
}
h2 {
    font-size: 24px;
}
h3 {
    font-size: 16px;
}
h4 {
    font-size: 14px;
}
h5 {
    font-size: 12px;
}
h6 {
    font-size: 10px;
}
h3,
h4,
h5 {
    margin-top: 5px;
    font-weight: 600;
}


/*

.btn {
    border-radius: 3px;
}

.btn.btn-default {
    background-color: #ffffff;
    border: 1px solid var(--hint-color);
    color: inherit;
}

.btn-default:hover {
    background-color: #dddddd;
}
.btn-default-focus {
    background-color: #bbbbbb;
}


.color-font-hint-color {
    color: var(--hint-color) !important;
}

.color-font-text-color {
    color: var(--text-color) !important;
}

.color-font-text-color-dark {
    color: var(--text-color-dark) !important;
}



.margin-left-0 {
    margin-left: 0px !important;
}

.margin-left-5 {
    margin-left: 5px !important;
}

.margin-left-15 {
    margin-left: 15px !important;
}

.margin-left-20 {
    margin-left: 20px !important;
}

.margin-left-25 {
    margin-left: 25px !important;
}

.display-inline {
    display: inline;
}

.margin-top-2 {
    margin-top: 2px;
}

.margin-top-5 {
    margin-top: 5px;
}
.margin-bottom-5 {
    margin-bottom: 5px;
}


.padding-20 {
    padding: 20px;
}

.margin-right-5 {
    margin-right: 5px;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.float-right {
    float: right;
}

.page-selected {
    background-color: var(--line-color) !important;
}


.div-page {
    margin-left: 3px;
    margin-right: 3px;
}

.btn-pagination {
    /*border: 1px solid var(--hint-color);*/
/*
    padding: 6px 6px;
    background-color: var(--white);
    vertical-align: middle;
}

.pagination-number {
    color: var(--text-color) !important;
    padding: 5px;
}

.pagination-arrow {
    color: var(--text-color-dark) !important;
    font-size: 14px;
}

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


.icon-in-button {
    font-size:18px !important;
    vertical-align: top !important;
    margin-right:5px !important;
}

.order-column {
    cursor: pointer;
}

.width-inherit {
    width: inherit !important;
}

@media screen and (max-width: 1160px) {
    .overflow-x {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 300px) {
    .overflow-x-300 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 3400px) {
    .overflow-x-400 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 500px) {
    .overflow-x-500 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 600px) {
    .overflow-x-600 {
        overflow-x: scroll;
    }
}
@media screen and (max-width: 700px) {
    .overflow-x-700 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 800px) {
    .overflow-x-800 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 900px) {
    .overflow-x-900 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1000px) {
    .overflow-x-1000 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1100px) {
    .overflow-x-1100 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1200px) {
    .overflow-x-1200 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1300px) {
    .overflow-x-1300 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1400px) {
    .overflow-x-1400 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1500px) {
    .overflow-x-1500 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1600px) {
    .overflow-x-1600 {
        overflow-x: scroll;
    }
}

*/

.btn {
    border-radius: 3px;
}

.btn.btn-default {
    background-color: #ffffff;
    border: 1px solid var(--hint-color);
    color: inherit;
}

.btn-default:hover {
    background-color: #dddddd;
}
.btn-default-focus {
    background-color: #bbbbbb;
}


.color-font-hint-color {
    color: var(--hint-color) !important;
}

.color-font-text-color {
    color: var(--text-color) !important;
}

.color-font-text-color-dark {
    color: var(--text-color-dark) !important;
}



.margin-left-0 {
    margin-left: 0px !important;
}

.margin-left-5 {
    margin-left: 5px !important;
}

.margin-left-15 {
    margin-left: 15px !important;
}

.margin-left-20 {
    margin-left: 20px !important;
}

.margin-left-25 {
    margin-left: 25px !important;
}

.display-inline {
    display: inline;
}

.margin-top-2 {
    margin-top: 2px;
}

.margin-top-5 {
    margin-top: 5px;
}
.margin-bottom-5 {
    margin-bottom: 5px;
}


.padding-20 {
    padding: 20px;
}

.margin-right-5 {
    margin-right: 5px;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.float-right {
    float: right;
}

.page-selected {
    background-color: var(--line-color) !important;
}


.div-page {
    margin-left: 0px;
    margin-right: 0px;
}

.btn-pagination {
    /*border: 1px solid var(--hint-color);*/
    padding: 6px 6px;
    background-color: var(--white);
    vertical-align: middle;
    border: 1px solid #99ADC7;
}

.pagination-number {
    color: var(--text-color) !important;
    padding: 5px;
}

.pagination-arrow {
    color: var(--text-color-dark) !important;
    font-size: 14px;
}

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


.icon-in-button {
    font-size:18px !important;
    vertical-align: top !important;
    margin-right:5px !important;
}

.order-column {
    cursor: pointer;
}

.width-inherit {
    width: inherit !important;
}

@media screen and (max-width: 300px) {
    .overflow-x-300 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 3400px) {
    .overflow-x-400 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 500px) {
    .overflow-x-500 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 600px) {
    .overflow-x-600 {
        overflow-x: scroll;
    }
}
@media screen and (max-width: 700px) {
    .overflow-x-700 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 800px) {
    .overflow-x-800 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 900px) {
    .overflow-x-900 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1000px) {
    .overflow-x-1000 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1100px) {
    .overflow-x-1100 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1160px) {
    .overflow-x {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1200px) {
    .overflow-x-1200 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1300px) {
    .overflow-x-1300 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1400px) {
    .overflow-x-1400 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1500px) {
    .overflow-x-1500 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1600px) {
    .overflow-x-1600 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1700px) {
    .overflow-x-1700 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1800px) {
    .overflow-x-1800 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 1900px) {
    .overflow-x-1900 {
        overflow-x: scroll;
    }
}

@media screen and (max-width: 2500px) {
    .overflow-x-2500 {
        overflow-x: scroll;
    }
}