@font-face {
    font-family: 'beluga';
    src: url('../fonts/beluga.eot');
    src: url('../fonts/beluga.eot?#iefix') format('embedded-opentype'), url('../fonts/beluga.woff') format('woff'), url('../fonts/beluga.ttf') format('truetype'), url('../fonts/beluga.svg#glyphicons_halflingsregular') format('svg');
}

html, body {
    height: 100%;
}

body {
    border: 0 none;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #FFFFFF;
}

footer {
    font-weight: bold;
    color: #a1a1a1;
}

body.modal-open, body.modal-open .modal {
    padding-right: 0 !important; /* fix visual glitch with bootstrap modals */
}

body > .container-fluid {
    display: flex;
    flex-direction: column;
}

body > .container-fluid > #content-row {
    flex-grow: 1;
}

legend {
    border: 0 none;
    padding: 0;
    white-space: normal;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

a {
    color: #000000;
    text-decoration: none;
    outline: none;
    margin: 0;
    padding: 0;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

h1, h2, h3, h4, h5 {
    font-family: "Rationale", sans-serif;
}

img {
    border: none;
    margin: 0;
    padding: 0;
}

span {
    margin: 0;
    padding: 0;
}

.input {
    outline: none;
}

.errors {
    color: red;
}

.success {
    color: #0fac4b;
}

.hide {
    display: none;
}

.box_shadow {
    -webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
    box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
}

.box_shadow_y {
    -webkit-box-shadow: 0 3px 7px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0 3px 7px rgba(50, 50, 50, 0.75);
    box-shadow: 0 3px 7px rgba(50, 50, 50, 0.75);

}

/***********************************Footer***********************/

footer {
    flex-shrink: 0;
    width: 100%;
    color: #666;
    text-align: center;
    padding-top: 30px;
}

footer a {
    color: #666;
}

/**************************************Logos*********************/
.logos {
    display: block;
    text-indent: -10000px;
    font-size: 1px;
    width: 100%;
    height: 80px;
    margin: 0 0 10px 0;
}

.med_logo {
    display: block;
    height: 128px;
    margin: 2.5rem 0 !important;
    background: transparent url('/images/logo.svg') center top no-repeat;
}

/**************************************Top menu********************/
.topmenu {
    position: fixed;
    width: 100%;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid #6aa7ea;
}

.topmenu_title {
    display: table;
    text-align: left;
    padding-bottom: 10px;
    padding-top: 10px;
}

.topmenu_title .center-valign {
    width: 100%;
}

.topmenu_title span {
    float: left;
    width: 60%;
    color: #444444;
    font-family: "Rationale", sans-serif;
}

.topmenu_title img {
    float: left;
    width: 65px;
}

.topmenu_title .small {
    font-size: 20px;
    line-height: 20px;
}

.topmenu_title .large {
    font-size: 28px;
    line-height: 28px;
}

/*********************************Menu Pages***********************/
#menu_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/*********************************Side menu***********************/
.sidemenu_container {
    background-color: #6aa7ea;
}

/*********************************Sub header**********************/
.subheader_container {
    background-color: #f2f2f2;
    border-bottom: 1px solid #9f9f9f;
}

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

/***************************************Titles********************/
.title_f1 {
    font-size: 44px;
    font-family: "Rationale", sans-serif;
    color: #444444;
}

.title_f2 {
    font-family: "Rationale", sans-serif;
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 22px;
}

.title_elements {
    font-size: 22px;
    font-family: "Rationale", sans-serif;
    color: #444444;
}

.counter {
    font-size: 22px;
    font-family: "Rationale", sans-serif;
    color: #4278BC;
}

/*****************************Textes*****************************/
.txt_14_g {
    font-size: 14px;
    color: #a0a0a0;
}

/******************************Icons*****************************/
.icon_img {
    font-family: beluga;
}

.bordered {
    border: 1px solid #e0e0e0;
}

.icon-calendar {
    text-align: center;
    color: #a1a1a1;
    float: left;
    width: 100%;
    font-size: 18px;
    padding: 4px 0;
    margin-bottom: 10px;
    font-family: "beluga";
}

.icon-calendar-group-addon {
    font-family: "beluga";
}

/******************************Top bar***************************/
#top_bar {
    margin-top: 10px;
    padding: 0;
}

.containers_topbar {
    float: left;
    width: 100%;
    background-color: #a1a1a1;
    color: #ffffff;
    margin-bottom: 10px;
}

.title_topbar {
    font-size: 16px;
    margin: 10px;
}

/******************************Buttons***************************/
btn {
    border-radius: 0;
}

.btn_a {
    border: none;
    border-radius: 0;
}

.g_button_c {
    background-color: #a1a1a1;
    color: #ffffff;
    border: none;
    text-align: center;
    padding: 10px 5px;
    font-size: 16px;
}

.g_button_c:hover {
    background-color: #6AA7EA;
}

.btn_square {
    clear: both;
    display: block;
    width: 100%;
    border: 0;
    padding: 10px 5px;
    font-size: 16px;
    text-align: center;
    outline: none;
}

.btn-medium {
    max-height: 100px;
    padding: 50px;
}

.btn_g {
    background-color: #0fac4b;
    color: #ffffff;
}

.btn_g:hover {
    background-color: #0E7C35;
}

.btn_b {
    background-color: #6AA7EA;
    color: #ffffff;
}

.btn_b:hover {
    background-color: #4278BC;
}

.btn_r {
    background-color: #ce2027;
    color: #ffffff;
}

.btn_r:hover {
    background-color: #ac1a20;
}

.btn_gr {
    background-color: #a1a1a1;
    color: #ffffff;
}

.btn_gr:hover {
    background-color: #838484;
}

.btn_f1 {
    float: right;
    text-align: center;
}

.btn_f1 span {
    float: left;
    text-align: center;
}

.btn_f1 .icon_text {
    font-family: "Rationale";
    font-size: 14px;
    color: #333;
    width: 100%;
}

.btn_f1 .icon_img {
    position: relative;
    display: block;
    width: 65px;
    height: 65px;
    color: #555;
}

.btn_f1:hover .icon_img {
    border-color: #6AA7EA;
    color: #6AA7EA;
}

.btn_f1:hover span {
    color: #6AA7EA;
}

.btn_f1 .icon_img span {
    position: absolute;
}

.btn_f1 .icon_img img {
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.btn_f2 {
    text-align: center;
    width: 35px;
    height: 35px;
    color: #A1A1A1;
    border: 1px solid #A1A1A1;
    border-radius: 10px;
    -moz-border-radius: 10px;
}

.btn_f2:hover {
    color: #828282;
    border: 1px solid #828282;
}

.btn_f3 {
    float: left;
    font-family: "beluga";
    text-align: center;
    font-size: 35px;
    width: 100%;
    padding: 0 2px;
    color: #a1a1a1;
}

.btn_f3:hover {
    color: #0fac4b;
}

.btn_f3_c {
    float: left;
    font-family: "beluga";
    text-align: center;
    font-size: 35px;
    width: 100%;
    padding: 0 2px;
    color: #a1a1a1;
}

.btn_f3_c:hover {
    color: #0fac4b;
}

.btn_f3_l {
    float: left;
    font-family: "beluga";
    text-align: left;
    font-size: 35px;
    width: 100%;
    padding: 10px 2px;
    color: #a1a1a1;
}

.btn_f3_l:hover {
    color: #0fac4b;
}

.btn_f4 {
    background-color: #a1a1a1;
    border: 1px solid #a1a1a1;
    color: #FFFFFF;
    float: left;
    font-family: "beluga";
    font-size: 35px;
    padding: 5px 0;
    text-align: center;
    width: 100%;
}

.btn_f4:hover {
    background-color: #6AA7EA;
    border-color: #6AA7EA;
}

.btn_f5 {
    color: #a1a1a1;
    float: right;
    font-family: "beluga";
    font-size: 18px;
    text-align: center;
}

.btn_f5:hover {
    color: #4278bc;
}

.btn_f6 {
    background-color: #6AA7EA;
    color: #FFFFFF;
    float: left;
    font-family: "beluga";
    font-size: 35px;
    padding: 5px 0;
    text-align: center;
    width: 100%;
}

.btn_f6:hover {
    background-color: #4278BC;
}

.btn_f7 {
    background-color: #a1a1a1;
    color: #cccccc;
    float: left;
    font-family: "beluga";
    font-size: 30px;
    padding: 5px 0;
    text-align: center;
    width: 100%;
}

.btn_f7:hover {
    background-color: #838484;
}

.btn_f8 {
    background-color: #a1a1a1;
    color: #FFFFFF;
    float: left;
    font-family: "beluga";
    font-size: 30px;
    padding: 5px 0;
    text-align: center;
    width: 100%;
}

.btn_f8:hover {
    background-color: #838484;
}

.btn_f9 {
    float: left;
    font-family: "beluga";
    text-align: center;
    font-size: 24px;
    width: 100%;
    padding: 0;
    color: #a1a1a1;
}

.btn_f9:hover {
    color: #0fac4b;
}

.btn_selectbox {
    float: right;
    font-family: "beluga";
    text-align: center;
    font-size: 14px;
    margin-right: 15px;
    padding: 0;
    color: #a1a1a1;
}

.btn_selectbox:hover {
    color: #0fac4b;
}

.btn_searchlectbox {
    float: right;
    font-family: "beluga";
    text-align: center;
    font-size: 14px;
    margin-right: 15px;
    padding: 0;
    color: #a1a1a1;
}

.btn_searchlectbox:hover {
    color: #0fac4b;
}

.btn_topmenu_container {
    float: right;
    padding-top: 10px;
    padding-bottom: 10px;
}

.btn_topmenu_container .btn_f1 {
    padding-right: 10px;
}

.btn_topmenu_container .btn_f1 .glyphicon {
    top: 15px;
    left: 15px;
}

.btn_topmenu_container button {
    background-color: #ffffff;
}

.btn_add .icon_img {
    font-size: 32px;
    line-height: 37px;
    padding: 2px;
}

.btn_add .icon_img span {
    left: 15px;
    top: 13px;
}

#btn_search {
    font-size: 36px;
    line-height: 37px;
    padding: 2px;
}

#btn_search span {
    left: 13px;
    top: 13px;
}

#btn_menu {
    font-size: 32px;
    line-height: 37px;
    padding: 2px;
}

#btn_menu span {
    left: 15px;
    top: 13px;
}

.btn_logout .icon_img, .btn_config .icon_img {
    font-size: 35px;
    padding: 5px;
}

.btn_logout .icon_img span {
    left: 14px;
    top: 5px;
}

/****************************Btn/Custom*****************************/
.btn_promo_container .btn_f9 {
    font-size: 55px;
    line-height: 70px;
    text-align: right;
    margin-top: 7px;
}

#menu_container {
    margin: 40px auto;
    padding: 0;
}

/*****************************Form**********************************/
.form_panel_row {
    float: left;
    width: 100%;
}

.form_panel_row_mini {
    float: left;
    width: 100%;
}

.form_panel_row_mini .expandable_topbar,
.form_panel_row_mini .expandable_content {
    float: left;
    width: 100%;
}

.form_panel .element_container,
.form_panel_row_mini .element_container {
    float: left;
    width: 100%;
    margin-bottom: 10px;

}

.produit_type_form_name_container,
.produit_type_btns_container {
    float: left;
    width: 100%;
    margin-bottom: 10px;

}

.form_panel_row_mini .title_expand {
    float: left;
    margin-left: 10px;
}

.form_panel_row_mini .btn_expandable {
    margin-right: 10px;
}

.editors {

    background-color: #FFFFFF;
    border: 1px solid #a0a0a0;
    border-collapse: separate;
    border-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.075) inset;
    box-sizing: content-box;
    outline: medium none;
    overflow: scroll;
    padding: 4px;
}

.description_lg_container,
.description_md_container {
    float: left;
    margin-bottom: 10px;
    width: 100%;
}

.description_lg_container .textarea {
    height: 185px;
    max-height: 185px;
}

.description_md_container .textarea {
    height: 95px;
    max-height: 95px;
}

.description_lg_container textarea {
    height: 173px;
    max-height: 185px;
    border: 1px solid #A1A1A1;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 5px;
    width: 100%;
}

.description_md_container textarea {
    height: 95px;
    max-height: 95px;
    border: 1px solid #A1A1A1;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 5px;
    width: 100%;
}

.step_container h4,
.step_container span,
.step_container p {
    float: left;
}

.step_container h4 {
    width: 80%;
}

.step_index {
    font-family: Arial, sans-serif;
    font-size: 40px;
    line-height: 28px;
    background-color: #000000;
    color: #ffffff;
    margin-right: 10px;
    padding: 10px;
}

.step_container p {
    width: 80%;
}

.example {
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-style: italic;
    color: #a1a1a1;
}

/*****************************Labels**********************************/
label {
    color: #838484;
}

.sm_lbl_f1 {
    float: left;
    width: 100%;
    font-size: 14px;
    color: #838484;
}

.input_label {
    float: left;
    width: 100%;
    font-size: 14px;
    color: #231f20;
    margin-bottom: 5px;
    font-weight: normal;
}

.textarea_label {
    width: 100%;
    font-size: 14px;
    color: #231f20;
    margin-bottom: 5px;
    font-weight: normal;
}

.lbl_center {
    text-align: center;
}

.mini_search_container .checkbox_label,
.mini_selectbox_container .checkbox_label {
    margin-bottom: 10px;
}

.grid_square_label {
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: normal;
    text-align: right;
    color: #A1A1A1;
    margin-bottom: 0;
    margin-top: 2px;
    padding-right: 5px;
}

.selected .grid_square_label {
    color: #ffffff
}

/*****************************Inputs**********************************/
.med_input_f1 {
    width: 100%;
    height: 35px;
    padding: 5px;
    border: 1px solid #A1A1A1;
    font-family: Arial, sans-serif;
    font-size: 14px;
    border-radius: 0;
}

.fix_square_input {
    width: 100%;
    height: 35px;
    padding: 5px;
    border: 1px solid #A1A1A1;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.fix_square_textarea {
    width: 100%;
    height: 185px;
    max-height: 185px;
    padding: 5px;
    border: 1px solid #A1A1A1;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.input_form_container {
    margin-bottom: 10px;
}

.input-group .input-group-addon {
    border-radius: 0;
    border-color: #A1A1A1;
}

input.invalid,
textarea.invalid,
select.invalid {
    border: 1px solid #CC181E;
}

.grid_square_input {
    width: 100%;
    height: 24px;
    padding: 5px;
    border: 1px solid #A1A1A1;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #A1A1A1;
    text-align: right;
}

.selected .grid_square_input {
    border-color: #4278bc
}

/******************************Select boxes*********************************/
.brd_g {
    border: 1px solid #A1A1A1;
    border-radius: 10px;
}

/********************************Check boxes**************************************/
.checkbox_label {
    float: left;
    font-size: 18px;
    color: #838484;
    margin: 0 5px;
    font-weight: normal;
}

.checkbox_label.med {
    font-size: 14px;
}

.checkbox_element {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    text-indent: -10000px;
    font-size: 1px;
    border: 1px solid #A1A1A1;
}

.checkbox_unchecked {
    background-color: #FFFFFF;
}

.checkbox_checked {
    background-color: #6aa7ea;
}

/***********************************Tabs*****************************************/
.tab-content {
    padding-top: 20px;
    border: 1px solid #ddd;
    border-width: 0 1px 1px 1px;
}

.nav-tabs.nav > li > a,
.nav-tabs.nav > li > a {
    color: #444444;
}

.nav-tabs.nav > li.disabled > a,
.nav-tabs.nav > li.disabled > a {
    color: #a0a0a0;
}

.nav-tabs.nav > li > a:hover,
.nav-tabs.nav > li > a:focus {
    text-decoration: none;
    background-color: #ffffff;
    color: #6aa7ea;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #6aa7ea;
}

.nav-tabs .icon_img {
    font-size: 30px;
}

/********************************Containers**************************************/
.selectbox_container {
    border: 1px solid #a1a1a1;
    margin-bottom: 15px;
    padding-bottom: 10px;
    padding-top: 10px;
}

/*********************************Content****************************************/
#content-row {
    padding-top: 86px;
    min-height: 800px;
}

.fullheight {
    height: 100%;
}

.fullscreen_wrapper {
    display: block;
    height: 100%;
    min-height: 400px;
}

.fullscreen_container {
    position: relative;
    display: block;
    min-height: 400px;
    width: 100%;
    height: 100%;
}

.fullscreen {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.fullscreen_container:after,
.fullscreen:after {
    clear: both;
    content: "";
    display: table;
}

.fullscreen_content {
    position: relative;
    height: 100%;
}

.fullscreen_content:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

.center-valign {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

.center-align {
    display: table;
    margin-right: auto;
    margin-left: auto;
}

.centered label,
.centered input {
    text-align: center;
}

/*********************************Rows****************************************/
/*********************************Cols****************************************/
.col-right {
    float: right;
}

.col-no-marged {
    margin: 0;
}

.col-no-marged-top {
    margin-top: 0;
}

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

.col-md-marged-top {
    margin-top: 30px;
}

.col-lg-marged-top {
    margin-top: 45px;
}

.col-xl-marged-top {
    margin-top: 60px;
}

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

.col-md-marged-bottom {
    margin-bottom: 30px;
}

.col-bordered-left {
    border-left: 1px solid #ddd;
}

.col-bordered-right {
    border-right: 1px solid #ddd;
}

/********************************Search******************************************/
.mini_search {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

/**********************************Grid*****************************************/
.loading_grid_container {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding-top: 240px;
}

.loading_grid_container img {
    width: 100%;
    max-width: 250px;
}

.grid-top-bar {
    background-color: #EBEBEB;
}

.clickable {
    cursor: pointer;
}

.selected li {
    background-color: rgba(106, 167, 234, 0.3);
}

.grid .selected a,
.grid .selected span {
    color: #111;
}

.grid .grid_title {
    text-align: right;
    margin: 10px 0;
    line-height: 25px;
}

.sortable {
    float: left;
    width: 100%;
    padding: 10px 0;
}

.grid_row {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 1px solid #a1a1a1;
}

.grid_row:last-of-type {
    border-bottom: 1px solid #a1a1a1;
}

.grid_row.striped {
    opacity: 0.9;
    background: repeating-linear-gradient(
            135deg,
            #f4f4f4,
            #f4f4f4 5px,
            #fafafa 5px,
            #fafafa 10px
    );
}

.grid_row span {
    color: #444444;
}

.grid_row .elm_c {
    padding-top: 10px;
    padding-bottom: 10px;
}

.grid_row .elm_cx {
    padding-bottom: 31px;
    padding-top: 32px;
}

.grid_row .elm_ct span {
    float: left;
}

.grid_row .elm_ct .elm_t {
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    width: 100%;
}

.elm_st {
    font-size: 13px;
    line-height: 13px;
}

.grid_row .elm_img_counter {
    font-size: 16px;
    font-family: "Rationale", sans-serif;
    background-color: #4278bc;
    border: 1px solid #a1a1a1;
    margin-top: 5px;
    padding: 0 3px;
}

.grid_row .elm_medias {
    padding-bottom: 8px;
    padding-top: 8px;
}

.grid_row .elm_medias span {
    float: left;
}

.grid_row.nouveau {
    border-left-color: #5cb85c;
}

.grid_row.valerie, .grid_row.non-disponible-b-o {
    border-left-color: #EEC600;
}

.elm_medias_count {
    width: 70px;
}

.grid .elm_icons_sections {
    float: left;
    line-height: 42px;
    font-size: 24px;
    color: #a1a1a1;
}

.grid_row .elm_medias .elm_t {
    float: left;
    line-height: 22px;
    font-size: 34px;
    font-family: "beluga";
    margin-top: 7px;
    margin-right: 5px;
    color: #a1a1a1;
}

.grid_row .elm_icons_sections:hover {
    color: #4278bc;
}

.grid .selected .elm_icons_sections {
    color: #4278bc;
}

.grid .selected .elm_icons_sections:hover {
    color: #FFFFFF;
}

.grid_row .elm_medias .elm_t:hover {
    color: #4278bc;
}

.grid .selected .elm_medias .elm_t {
    color: #4278bc;
}

.grid .selected .elm_medias .elm_t:hover {
    color: #FFFFFF;
}

.grid_row .elm_prices span {
    float: left;
    width: 100%;
    text-align: right;
}

.grid_row .elm_icons .elm_icons_last {
    line-height: 20px;
    margin-top: 21px;
    margin-right: 10px;
}

.grid_row .elm_icons {
    font-family: "beluga";
    font-size: 34px;
}

.elm_grid_action .elm_icons_c,
.elm_grid_action span,
.elm_grid_action a {
    cursor: pointer;
    margin-left: 10px;
    padding: 0 5px;
}

.grid_row .elm_icons .elm_icons_c {
    float: right;
    font-size: 22px;
    line-height: 25px;
    color: #a1a1a1;
    margin-top: 2px;
}

.grid .selected .elm_icons_c {
    color: #4278bc;
}

.elm_icons .elm_icons_c:hover {
    color: #4278bc;
}

.grid .selected .elm_icons_c:hover {
    color: #FFFFFF;
}

.grid_row .elm_icons .elm_icons_r {
    float: right;
    font-size: 34px;
    line-height: 28px;
    margin-top: 13px;
}

.grid_row .elm_icons .elm_icons_g {
    color: #a1a1a1;
}

.elm_icons .elm_icons_g:hover {
    color: #4278bc;
}

.grid .selected .elm_icons_g {
    color: #4278bc;
}

.grid .selected .elm_icons_g:hover {
    color: #FFFFFF;
}

.grid .btns_order_container {
    float: right;
    width: 23px;
    margin-top: 4px;
    margin-left: 10px;
}

.grid .btns_order_container .btn_order.elm_icons_sp {
    margin: 0;
    line-height: 18px;
}

/****icon sous-produit******/
.grid_row .elm_icons .elm_icons_sp {
    color: #a1a1a1;
    float: right;
    font-size: 22px;
    line-height: 40px;
    margin-top: 2px;
}

.elm_icons .elm_icons_sp:hover {
    color: #4278bc;
}

.grid .selected .elm_icons_sp {
    color: #4278bc;
}

.grid .selected .elm_icons_sp:hover {
    color: #FFFFFF;
}

.empty_grid {
    color: #ccc;
    text-align: center;
    margin: 10px 0;
    margin: 50px;
    font-size: 50px;
    opacity: 0.7;
}

/*************************Custom************************/
.grid_row .elm_icons .elm_icons_sp.icon_view {
    margin-top: 0;
    font-size: 28px;
}

/**************************Modal************************/

.modal-header .close {
    font-size: 40px;
    line-height: 35px;
}

body .modal {
    overflow: auto;
}

.modal.slide-left .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -moz-transition: -moz-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(-25%, 0);
    -ms-transform: translate(-25%, 0);
    transform: translate(-25%, 0);
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal .modal-md.wide {
    width: 960px;
    max-width: 95%;
}

.modal .modal-lg {
    width: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.modal .modal-lg .modal-content {
    box-shadow: none;
    border-radius: 0;
    border: 0;
}

.modal_f1 .modal-header {
    border: none;
}

.modal_f1 .modal-body {
    padding: 0 20px 20px;
}

.modal_f1 h4 {
    font-family: "Rationale", sans-serif;
    font-size: 34px;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 30px;
}

.modal_title_g {
    color: #11aa4a;
    margin-right: 5px;
}

.modal_title_d {
    color: #444444;
}

.modal_subtitle_d {
    font-family: "Rationale", sans-serif;
    font-size: 14px;
    color: #a0a0a0;
}

.modal_f1 .modal-footer {
    border: none;
}

.modal_center .modal_title_d {
    text-align: center;
}

.modal_center .modal_subtitle_d {
    font-size: 21px;
    text-align: center;
}

/**************************Expendables******************/
.title_expand {
    font-size: 16px;
    color: #FFFFFF;
}

.expandable_topbar {
    margin-bottom: 1px;
}

.expandable_topbar h2 {
    margin: 10px 0;
}

.expandable_topbar .title_elements {
    color: #ffffff;
    margin: 0;
    text-align: center;
}

.expand {
    background-color: #444444;
}

.unexpand {
    background-color: #9f9f9f;
}

.btn_expandable {
    float: right;
    position: relative;
    color: #FFFFFF;
    font-family: "beluga";
    font-size: 20px;
    margin-top: 5px;
    cursor: pointer;
}

.btn_expandable span {
    position: absolute;
    right: 10px;
    top: 0;
}

.btn_expandable_close {
    float: right;
    position: relative;
    color: #FFFFFF;
    font-family: "beluga";
    font-size: 12px;
    margin: 10px;
}

/*************************Draggable*********************/
.ui-draggable {
    cursor: move;
}

/*************************Animation*********************/
.ease_3 {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.ease_5 {
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.ease_8 {
    -webkit-transition: all 0.8s ease 0s;
    -moz-transition: all 0.8s ease 0s;
    -ms-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
}

/**************************Screen***********************/
@media (max-width: 767px) {
    /*******************Title*************/
    .title_elements {
        font-size: 18px;
    }

    .counter {
        font-size: 18px;
    }

    /*******************Button*************/
    .btn_f1 .icon_img {
        height: 45px;
        width: 45px;
    }

    .btn_f1 .icon_text {
        display: none;
    }

    .btn_topmenu_container .btn_menu {
        margin-right: 0;
    }

    .btn_topmenu_container .btn_logout {
        margin-left: 0;
    }

    .btn_add .icon_img {
        font-size: 22px;
        line-height: 20px;
    }

    .btn_add .icon_img span {
        left: 11px;
        top: 12px;
    }

    #btn_search {
        font-size: 23px;
        line-height: 20px;
    }

    #btn_search span {
        left: 9px;
        top: 13px;
    }

    #btn_menu {
        font-size: 21px;
        line-height: 20px;
    }

    #btn_menu span {
        left: 11px;
        top: 13px;
    }

    .btn_logout .icon_img span {
        left: 9px;
        top: 11px;
    }

    .btn_config .icon_img span.glyphicon {
        left: 9px;
        top: 10px;
    }

    .btn_logout .icon_img, .btn_config .icon_img {
        font-size: 25px;
        line-height: 20px;
        padding: 2px;
    }

    .btn_f3 {
        text-align: center;
        font-size: 24px;
        padding-top: 0;
        padding-bottom: 10px;
    }

    .btn_f4 {
        padding: 0;
    }

    /*******************Select boxes*************/
    .mini_search .sbSelector {
        width: 87%;
    }

    .mini_search_container .sbSelector {
        width: 90%;
    }

    .mini_search .sbOptions {
        width: 100%;
    }

    /****************Top menu********************/
    .topmenu {
        height: 75px;
    }

    .topmenu_title {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .topmenu_title img {
        width: 45px;
    }

    .topmenu_title .small {
        font-size: 14px;
        line-height: 14px;
    }

    .topmenu_title .large {
        font-size: 20px;
        line-height: 20px;
    }

    .btn_topmenu_container {
        height: 65px;
    }

    /******************Content**************************/
    #content-row {
        padding-top: 75px;
        min-height: 340px;
    }

    /****************Grid************************/
    .grid_title {
        text-align: center;
        margin-top: 0;
    }

    .grid_row .elm_icons .elm_icons_r {
        font-size: 20px;
        line-height: 20px;
        margin-top: 13px;
    }

    .grid_row .elm_cx {
        padding-bottom: 15px;
        padding-top: 15px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Column clear fix */
    .col-lg-1:nth-child(12n+1),
    .col-lg-2:nth-child(6n+1),
    .col-lg-3:nth-child(4n+1),
    .col-lg-4:nth-child(3n+1),
    .col-lg-6:nth-child(2n+1),
    .col-sm-1:nth-child(12n+1),
    .col-sm-2:nth-child(6n+1),
    .col-sm-3:nth-child(4n+1),
    .col-sm-4:nth-child(3n+1),
    .col-sm-6:nth-child(2n+1) {
        clear: none;
    }

    .col-md-1:nth-child(12n+1),
    .col-md-2:nth-child(6n+1),
    .col-md-3:nth-child(4n+1),
    .col-md-4:nth-child(3n+1),
    .col-md-6:nth-child(2n+1) {
        clear: left;
    }

    /***************Button********************/
    #f1 .btn_topmenu_container div {
        display: block;
        float: left;
        width: 50px;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .btn_f1 .icon_img {
        height: 45px;
        width: 45px;
    }

    .btn_f1 .icon_text {
        display: none;
    }

    .btn_topmenu_container .btn_menu {
        margin-right: 0;
    }

    .btn_topmenu_container .btn_logout {
        margin-left: 0;
    }

    .btn_add .icon_img {
        font-size: 22px;
        line-height: 20px;
    }

    .btn_add .icon_img span {
        left: 11px;
        top: 12px;
    }

    #btn_search {
        font-size: 23px;
        line-height: 20px;
    }

    #btn_search span {
        left: 9px;
        top: 13px;
    }

    #btn_menu {
        font-size: 21px;
        line-height: 20px;
    }

    #btn_menu span {
        left: 9px;
        top: 13px;
    }

    .btn_config .icon_img span.glyphicon {
        left: 9px;
        top: 10px;
    }

    .btn_logout .icon_img span {
        left: 9px;
        top: 11px;
    }

    .btn_logout .icon_img, .btn_config .icon_img {
        font-size: 25px;
        line-height: 20px;
        padding: 2px;
    }

    .btn_f3 {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: center;
    }

    .btn_f4 {
        padding: 0;
    }

    /*******************Select boxes*************/
    .mini_search .sbSelector,
    .mini_search_container .sbSelector {
        width: 90%;
    }

    .mini_search .sbOptions {
        width: 100%;
    }

    /******************Content**************************/
    #content-row {
        padding-top: 75px;
    }

    /****************Grid************************/
    .grid_title {
        text-align: center;
    }

}

@media (min-width: 992px) and (max-width: 1199px) {
    /* Column clear fix */
    .col-md-1:nth-child(12n+1),
    .col-md-2:nth-child(6n+1),
    .col-md-3:nth-child(4n+1),
    .col-md-4:nth-child(3n+1),
    .col-md-6:nth-child(2n+1),
    .col-sm-1:nth-child(12n+1),
    .col-sm-2:nth-child(6n+1),
    .col-sm-3:nth-child(4n+1),
    .col-sm-4:nth-child(3n+1),
    .col-sm-6:nth-child(2n+1) {
        clear: none;
    }

    .col-lg-1:nth-child(12n+1),
    .col-lg-2:nth-child(6n+1),
    .col-lg-3:nth-child(4n+1),
    .col-lg-4:nth-child(3n+1),
    .col-lg-6:nth-child(2n+1) {
        clear: left;
    }

    /***************Button********************/
    .btn_f3 {
        padding: 20px 0;
    }

    .btn_f4 {
        padding: 0;
    }
}

@media (min-width: 1200px) {
    /* Column clear fix */
    .col-md-1:nth-child(12n+1),
    .col-md-2:nth-child(6n+1),
    .col-md-3:nth-child(4n+1),
    .col-md-4:nth-child(3n+1),
    .col-md-6:nth-child(2n+1),
    .col-sm-1:nth-child(12n+1),
    .col-sm-2:nth-child(6n+1),
    .col-sm-3:nth-child(4n+1),
    .col-sm-4:nth-child(3n+1),
    .col-sm-6:nth-child(2n+1) {
        clear: none;
    }

    .col-lg-1:nth-child(12n+1),
    .col-lg-2:nth-child(6n+1),
    .col-lg-3:nth-child(4n+1),
    .col-lg-4:nth-child(3n+1),
    .col-lg-6:nth-child(2n+1) {
        clear: left;
    }

    /***************Button********************/
    .btn_f3 {
        padding: 20px 2px;
    }
}

#loading_overlay {
    background: rgba(255, 255, 255, 0.4);
    background: radial-gradient(circle, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0.5) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99999;
}

#loading_overlay img {
    width: 100%;
    max-width: 300px;
}

/* flexbox */
.flex {
    display: flex;
}

.flex-vcenter {
    display: flex;
    align-items: center;
}

/** dd scale with text size **/
@media (min-width: 768px) {
    .dl-horizontal {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-column-gap: 0.5em;
        grid-row-gap: 0.25em;
    }

    .dl-horizontal dt {
        width: auto;
    }

    .dl-horizontal dd {
        margin-left: 0;
    }
}