#buttonIconeApp
{
    width: 138px;
    display: block;
    position: relative;
    left: 0;
    top: 0;
    background-image: url("../../img/logiciels/ObservTerre/logo-terre.png");
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
    height: 50px;
    border-style: none;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
    z-index: 1001;
    overflow: hidden;
    cursor: unset !important;
}

.right-side {
    position: relative !important;
    margin-top: 0px !important;
    min-height: inherit !important;
}

.infoGranuleBottom {
    font-size:1.1em;
}

.titreGranule{
    font-size: 14px;
    font-weight: 600;
    color: #676a6c;
    display: block;
    margin: 5px 0 0 0;
}

.granuleDescript{
    padding:7px 10px;
    min-height: 95px;
    font-size: 14px;
    font-weight: 600;
}

.imgGranule2Disabled{
    border:none;
}

.colRed .granuleDescript {
    background-color: #720304;
    color:white;
    text-align: center;
}

.colGreen .granuleDescript {
    background-color: #12423B;
    color:white;
    text-align: center;
}


.colBrown .granuleDescript {
    background-color:#551F06;
    color:white;
    text-align: center;
}

.colPurple .granuleDescript {
    background-color: #801030;
    color:white;
    text-align: center;
}

.colOrange .granuleDescript {
    background-color: #ff9800;
    color:white;
    text-align: center;
}

.colBlue .granuleDescript {
    background-color:#10253F;
    color:white;
    text-align: center;
}

.colBlueLight .granuleDescript {
    background-color:#0A657F;
    color:white;
    text-align: center;
}

body.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body.selectable {
    -webkit-user-select: normal;
    -moz-user-select: normal;
    -ms-user-select: normal;
    user-select: normal;
}

@media print {
    #Header, #Footer {
        display: none !important;
    }
}

#Header, #Footer {
    display: none !important;
}

.exao-toolbar {
    font-size: 12px;
}

.scale2 {
    -webkit-transform: scale(0.5, 0.5);
    -moz-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
}

.icon-exao-move {
    background-image: url("../../js/Exao/icons/icon-move.png");
}

.icon-exao-cursor {
    background-image: url("../../js/Exao/icons/icon-cursor.png");
}

.icon-exao-zoomanchor {
    background-image: url("../../js/Exao/icons/icon-origin.png");
}

.icon-exao-zoom {
    background-image: url("../../js/Exao/icons/icon-zoom.png");
}

.icon-exao-zoomout {
    background-image: url("../../js/Exao/icons/icon-dezoom.png");
}

.icon-exao-pencil {
    background-image: url("../../js/Exao/icons/icon-pencil.png");
}

.icon-exao-droite {
    background-image: url("../../js/Exao/icons/icon-droite.png");
}

.icon-exao-ruller {
    background-image: url("../../js/Exao/icons/icon-ruller.png");
}

.icon-ruller-inv {
    background-image: url("../../../css/glyphicons/png/glyphicons_068_ruller_inv.png");
}

.icon-exao-rullerx2 {
    background-image: url("../../js/Exao/icons/icon-rullerx2.png");
}

.icon-exao-grid {
    background-image: url("../../js/Exao/icons/icon-grid.png");
}

.icon-exao-grid2r {
    background-image: url("../../js/Exao/icons/icon-grid2r.png");
}

.icon-exao-grid3 {
    background-image: url("../../js/Exao/icons/icon-grid3.png");
}

.icon-exao-compas {
    background-image: url("../../js/Exao/icons/icon-compas.png");
}

.icon-exao-compas2 {
    background-image: url("../../js/Exao/icons/icon-compas2.png");
}

.icon-exao-compas3 {
    background-image: url("../../js/Exao/icons/icon-compas3.png");
}

.icon-exao-comparezoom-u {
    background-image: url("../../js/Exao/icons/icon-comp-zoom.png");
}

.icon-exao-comparezoom-d {
    background-image: url("../../js/Exao/icons/icon-comp-zoomlink.png");
}

.icon-exao-comparezoommove-u {
    background-image: url("../../js/Exao/icons/icon-comp-zoommove.png");
}

.icon-exao-comparezoommove-d {
    background-image: url("../../js/Exao/icons/icon-comp-zoommovelink.png");
}

.icon-path-square {
    background-image: url("../../../css/glyphicons/png/glyphicons_094_vector_path_square_inv.png");
}

.icon-path-circle {
    background-image: url("../../../css/glyphicons/png/glyphicons_095_vector_path_circle_inv.png");
}

.icon-path-polygon {
    background-image: url("../../../css/glyphicons/png/glyphicons_096_vector_path_polygon_inv.png");
}

.icon-path-line {
    background-image: url("../../../css/glyphicons/png/glyphicons_097_vector_path_line.png");
}

.icon-path-curve {
    background-image: url("../../../css/glyphicons/png/glyphicons_098_vector_path_curve.png");
}

.icon-path-all {
    background-image: url("../../../css/glyphicons/png/glyphicons_099_vector_path_all.png");
}

.icon-exao-tagresize {
    background-image: url("../../js/Exao/icons/icon-tagresize.png");
    background-size: 24px 24px !important;
}

.icon-text-underline {
    background-image: url("../../../css/glyphicons/png/glyphicons_103_text_underline.png");
}

.icon-direction {
    background-image: url("../../../css/glyphicons/png/glyphicons_233_direction_inv.png");
}

.icon-rotate {
    background-image: url("../../../css/glyphicons/png/glyphicons_240_rotation.png");
}

.icon-chevron-right {
    background-image: url("../../../css/glyphicons/png/glyphicons_223_chevron-right.png");
}

.icon-chevron-left {
    background-image: url("../../../css/glyphicons/png/glyphicons_224_chevron-left.png");
}

.btn-exao-menu {
    color: #ffffff;
    background-color: #303030;
    border-color: #357ebd;
    /*cursor			: move;*/
}

.btn-exao-menu > .glyphicon-th {
    cursor: pointer;
}

/* fa-chevron-up   fa-chevron-down    */
/**/
.btn-exao-menu > .fa-collapse-up,
.btn-exao-menu > .fa-collapse-down {
    font-size: 14px;
    color: rgba(78, 78, 78, 1);
}

.btn-exao-menu > .fa-collapse-up:before {
    content: "\f077";
}

.btn-exao-menu > .fa-collapse-down:before {
    content: "\f078";
}

.btn-exao-menu:hover,
.btn-exao-menu:focus,
.btn-exao-menu:active,
.btn-exao-menu.active,
.open .dropdown-toggle.btn-exao-menu {
    color: #ffffff;
    background-color: #3276b1;
    border-color: #aaaaaa;
}

.btn-exao-menu:active,
.btn-exao-menu.active,
.open .dropdown-toggle.btn-exao-menu {
    background-image: none;
}

.btn-exao-menu.disabled,
.btn-exao-menu[disabled],
fieldset[disabled] .btn-exao-menu,
.btn-exao-menu.disabled:hover,
.btn-exao-menu[disabled]:hover,
fieldset[disabled] .btn-exao-menu:hover,
.btn-exao-menu.disabled:focus,
.btn-exao-menu[disabled]:focus,
fieldset[disabled] .btn-exao-menu:focus,
.btn-exao-menu.disabled:active,
.btn-exao-menu[disabled]:active,
fieldset[disabled] .btn-exao-menu:active,
.btn-exao-menu.disabled.active,
.btn-exao-menu[disabled].active,
fieldset[disabled] .btn-exao-menu.active {
    background-color: #303030;
    border-color: #357ebd;
}

.btn-exao-menu .badge {
    color: #303030;
    background-color: #fff;
}

/*theme*/

.btn-exao-menu {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}

.btn-exao-menu:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-exao-menu {
    background-image: -webkit-linear-gradient(top, #303030 0%, #202020 100%);
    background-image: linear-gradient(to bottom, #303030 0%, #202020 100%);
    background-repeat: repeat-x;
    border-top: 1px solid #357ebd; /*4e4e4e*/
    border-bottom: 1px solid #357ebd;
    border-left: 2px solid #357ebd;
    border-right: 2px solid #357ebd;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff303030', endColorstr='#ff202020', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-exao-menu:hover,
.btn-exao-menu:focus {
    background-color: #202020;
    background-position: 0 -15px;
}

.btn-exao-menu:active,
.btn-exao-menu.active {
    background-color: #202020;
    border-color: #4e4e4e;
}

.btn-exao-menu-red {
    color: #ffffff;
    background-color: #ff0000;
    border-color: #357ebd;
    /*cursor			: move;*/
}

.btn-exao-menu-red > .glyphicon-th {
    cursor: pointer;
}

.btn-exao-menu-red:hover,
.btn-exao-menu-red:focus,
.btn-exao-menu-red:active,
.btn-exao-menu-red.active,
.open .dropdown-toggle.btn-exao-menu-red {
    color: #ffffff;
    background-color: #3276b1;
    border-color: #aaaaaa;
}

.btn-exao-menu-red:active,
.btn-exao-menu-red.active,
.open .dropdown-toggle.btn-exao-menu-red {
    background-image: none;
}

.btn-exao-menu-red.disabled,
.btn-exao-menu-red[disabled],
fieldset[disabled] .btn-exao-menu-red,
.btn-exao-menu-red.disabled:hover,
.btn-exao-menu-red[disabled]:hover,
fieldset[disabled] .btn-exao-menu-red:hover,
.btn-exao-menu-red.disabled:focus,
.btn-exao-menu-red[disabled]:focus,
fieldset[disabled] .btn-exao-menu-red:focus,
.btn-exao-menu-red.disabled:active,
.btn-exao-menu-red[disabled]:active,
fieldset[disabled] .btn-exao-menu-red:active,
.btn-exao-menu-red.disabled.active,
.btn-exao-menu-red[disabled].active,
fieldset[disabled] .btn-exao-menu-red.active {
    background-color: #ff0000;
    border-color: #357ebd;
}

.btn-exao-menu-red .badge {
    color: #ff0000;
    background-color: #fff;
}

/*theme*/

.btn-exao-menu-red {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}

.btn-exao-menu-red:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-exao-on {
    background-color: #007bff;
    color: #fff;
}

.btn-exao-menu-red.active {
    /*background-image		: -webkit-linear-gradient(top, #ffffff 50%, #202020 100%);
  background-image		: linear-gradient(to bottom, #ffffff 50%, #202020 100%);*/
    background-color: white;
    color: red;
}

.btn-exao-menu-red {
    /*background-image		: -webkit-linear-gradient(top, #ff0000 0%, #202020 100%);
  background-image		: linear-gradient(to bottom, #ff0000 0%, #202020 100%);*/
    background-repeat: repeat-x;
    border-top: 1px solid #357ebd; /*4e4e4e*/
    border-bottom: 1px solid #357ebd;
    border-left: 2px solid #357ebd;
    border-right: 2px solid #357ebd;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff303030', endColorstr='#ff202020', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.exao-toolbar {
    position: absolute;
    top: 0;
    left: 0;
}

/********************* Dialog box *******************************/

.exao-dialogBox {
    /*visibility: visible;*/
}

.exao-dialogBox .dialog-body {
    z-index: 1;
    background: #eaeaea;
    border: 1px solid #b2b2b2;
    border-bottom-color: #999;

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    box-shadow: 0 0 3px rgba(0, 0, 0, .15);
}

.exao-dialogBox .dialog-title {
    font-weight: bold;
    font-size: 20px;
    cursor: auto;
    position: relative;

    color: #cccccc;
    /*text-shadow				: 0 1px 0 rgba(255,255,255,.75);*/

    border-bottom: 1px solid #999;
    padding: 6px 10px;

    -moz-border-radius: 2px 2px 0 0;
    -webkit-border-radius: 2px 2px 0 0;
    border-radius: 2px 2px 0 0;

    -moz-box-shadow: 0 1px 0 #fff inset;
    -webkit-box-shadow: 0 1px 0 #fff inset;
    box-shadow: 0 1px 0 #fff inset;

    background: #1f1f1f !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1f1f1f)) !important;
    background-image: -moz-linear-gradient(top, #333, #1f1f1f) !important;
    background-image: -webkit-linear-gradient(top, #333, #1f1f1f) !important;
    background-image: -o-linear-gradient(top, #333, #1f1f1f) !important;
    background-image: -ms-linear-gradient(top, #333, #1f1f1f) !important;
    background-image: linear-gradient(top, #333, #1f1f1f) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr="#333333", endColorstr="#1f1f1f") !important;
}

.exao-dialogBox .dialog-contents {
    background-color: rgba(11, 11, 11, 0.7);
    overflow: auto;
    padding: 0 0 2px 0;
    color: #fff;
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}

.exao-dialogBox .dialog-footer {
    text-align: right;
    position: relative;

    -moz-box-shadow: 0 1px 0 #fff inset;
    -webkit-box-shadow: 0 1px 0 #fff inset;
    box-shadow: 0 1px 0 #fff inset;

    -moz-border-radius: 0 0 2px 2px;
    -webkit-border-radius: 0 0 2px 2px;
    border-radius: 0 0 2px 2px;

}

/*
Button
--------

The buttons used in the dialog footer or inside the contents.

+-- div.exao_dialog_button -----------+
|  +-- span.exao_dialog_button --+  |
|  |                               |  |
|  +-------------------------------+  |
+-------------------------------------+
*/

/* The outer part of the button. */
.exao-dialogBox div.dialog-button {
    display: inline-block;

    padding: 4px 0;
    margin: 0;

    text-align: center;
    color: #333;
    vertical-align: middle;
    cursor: pointer;

    border: 1px solid #b6b6b6;
    border-bottom-color: #999;

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 0 2px rgba(255, 255, 255, .15) inset, 0 1px 0 rgba(255, 255, 255, .15) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 0 2px rgba(255, 255, 255, .15) inset, 0 1px 0 rgba(255, 255, 255, .15) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 0 2px rgba(255, 255, 255, .15) inset, 0 1px 0 rgba(255, 255, 255, .15) inset;

    background: #e4e4e4;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e4e4e4));
    background-image: -moz-linear-gradient(top, #ffffff, #e4e4e4);
    background-image: -webkit-linear-gradient(top, #ffffff, #e4e4e4);
    background-image: -o-linear-gradient(top, #ffffff, #e4e4e4);
    background-image: -ms-linear-gradient(top, #ffffff, #e4e4e4);
    background-image: linear-gradient(top, #ffffff, #e4e4e4);
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#e4e4e4');
}

.exao-dialogBox span.dialog-button {
    padding: 0 10px;
}

.exao-dialogBox div.dialog-button:hover {
    border-color: #9e9e9e;

    background: #ccc;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ccc));
    background-image: -moz-linear-gradient(top, #f2f2f2, #ccc);
    background-image: -webkit-linear-gradient(top, #f2f2f2, #ccc);
    background-image: -o-linear-gradient(top, #f2f2f2, #ccc);
    background-image: -ms-linear-gradient(top, #f2f2f2, #ccc);
    background-image: linear-gradient(top, #f2f2f2, #ccc);
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
}

/* 	:focus/:active styles for dialog buttons: regular and footer. */
.exao-dialogBox div.dialog-button:focus,
.exao-dialogBox div.dialog-button:active {
    border-color: #969696;
    outline: none;
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .4) inset;
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .4) inset;
    box-shadow: 0 0 6px rgba(0, 0, 0, .4) inset;
}

/* The inner part of the button (both in dialog tabs and dialog footer). */
.exao_dialog_footer_buttons div.exao_dialog_button span {
    color: inherit;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 12px;
}

/* Special class appended to the Ok button. */
.exao-dialogBox div.dialog-button.button-granny {
    color: #fff;
    text-shadow: 0 -1px 0 #55830c;
    border-color: #62a60a #62a60a #4d9200;

    background: #69b10b;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9ad717), to(#69b10b));
    background-image: -webkit-linear-gradient(top, #9ad717, #69b10b);
    background-image: -o-linear-gradient(top, #9ad717, #69b10b);
    background-image: linear-gradient(to bottom, #9ad717, #69b10b);
    background-image: -moz-linear-gradient(top, #9ad717, #69b10b);
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#9ad717', endColorstr='#69b10b');
}

.exao-dialogBox div.dialog-button.button-granny:hover {
    border-color: #5b9909 #5b9909 #478500;

    background: #88be14;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #88be14), color-stop(100%, #5d9c0a));
    background: -webkit-linear-gradient(top, #88be14 0%, #5d9c0a 100%);
    background: -o-linear-gradient(top, #88be14 0%, #5d9c0a 100%);
    background: linear-gradient(to bottom, #88be14 0%, #5d9c0a 100%);
    background: -moz-linear-gradient(top, #88be14 0%, #5d9c0a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#88be14', endColorstr='#5d9c0a', GradientType=0);
}

/* Text shadow used for inner part of OK dialog button in footer. */
.exao-dialogBox div.dialog-button.button-granny span {
    text-shadow: 0 -1px 0 #55830c;
}

span.exao_dialog_button {
    cursor: pointer;
}

/* 	:focus/:active styles for dialog footer buttons (ok & cancel) */
.exao-dialogBox div.dialog-button.button-granny:focus,
.exao-dialogBox div.dialog-button.button-granny:active,
.exao-dialogBox div.dialog-button.button-cancel:focus,
.exao-dialogBox div.dialog-button.button-cancel:active {
    border-width: 2px;
    padding: 3px 0;
}

.exao-dialogBox div.dialog-button.button-granny:focus,
.exao-dialogBox div.dialog-button.button-granny:active {
    border-color: #568C0A;
}

/* 	:focus/:active styles for dialog footer buttons (ok & cancel) spans */
.exao-dialogBox div.dialog-button.button-granny:focus span,
.exao-dialogBox div.dialog-button.button-granny:active span,
.exao-dialogBox div.dialog-button.button-cancel:focus span,
.exao-dialogBox div.dialog-button.button-cancel:active span {
    padding: 0 11px; /* Thick button border must be compensated. */
}

/* A special container that holds the footer buttons. */
.exao-dialogBox .dialog-footer-button {
    display: inline-table;
    margin: 5px;
    width: auto;
    position: relative;
    vertical-align: middle;
}

/********************* Line style span *******************************/
.line-style {
    display: inline-block;

    cursor: pointer;
    border: 1px solid #cccccc;
    margin: 10px 1px 4px 1px;
    width: 16px;
    height: 1px

}

/********************* color picker span *******************************/
.linestyle-modal,
.colorpicker-modal {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;

    min-width: 160px;
    max-width: 283px;

    padding: 5px 0 0 5px;
    list-style: none;
    background-color: #fff;

    border: 1px solid #ccc;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

span.icon-color {
    margin: 0 5px 5px 0;
}

td.thumb-style,
div.thumb-style {
    padding: 3px 2px 3px 2px;
    border: 1px solid #cccccc;
}

span.icon-color.navbar-right {
    margin: 2px 2px 2px 2px;
    width: 40px;
    height: 20px;
}

span#colorpicker {
    height: 20px;
    width: 40px;
}

.onlink,
.icon-color {
    cursor: pointer;
    transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.icon-color-top,
.icon-color {
    border: 1px solid rgba(0, 0, 0, .15);

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

}

.icon-color:hover {
    border: 1px solid #333;
}

.caretup .caret {
    border-top: 0;
    border-bottom: 4px solid;
}

.exao-toolbar-menu {
    background-color: #3a3a3a;
}

.exao-toolbar-menu:last-of-type {
    border-bottom: 2px solid #357ebd;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.btn-exao-menu.unattached.left {
    border-right: 0 solid !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.btn-exao-menu.unattached.right {
    border-left: 0 solid !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.btn-exao-menu.unattached.leftright {
    border-left: 1px solid;
    border-top: 1px solid #357ebd;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.btn-exao-menu.unattached {
    border-bottom: 2px solid #357ebd;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

.exao-toolbar-menu.unattached.right {
    border-right: 1px solid #357ebd;
    border-top: 1px solid #357ebd;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.exao-toolbar-menu.unattached.left {
    border-left: 1px solid;
    border-top: 1px solid #357ebd;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

/***********************************************************************************************************/
.container .btn-exao-menu.dropdown {
    text-align: left;
}

.btn-exao-menu.dropdown {

}

.btn-exao-menu.dropdown a {
    font-size: 12px;
    text-decoration: none;
    text-shadow: 0 1px black;
}

.btn-exao-menu.dropdown > a {
    float: left;
    position: relative;
    height: 27px;
    line-height: 26px;
    padding: 0 12px;
    color: #ecf0f1;
    border-radius: 2px 0 0 2px;
}

.btn-exao-menu.dropdown > a:before {
    content: '';
    display: inline-block;
    vertical-align: -2px;
    width: 10px;
    height: 11px;
    margin-right: 10px;
    background: url("../../js/Exao/img/settings.png") 0 0 no-repeat;
}

.btn-exao-menu.dropdown > a:hover {
    background: #3f4753;
    background: rgba(255, 255, 255, 0.04);
}

.btn-exao-menu.dropdown > a:active {
    background: #343b44;
}

.btn-exao-menu.dropdown div {

}

.btn-exao-menu.dropdown div:hover {
    -webkit-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.04), inset 26px 26px rgba(0, 0, 0, 0.1);
    box-shadow: inset 1px 0 rgba(255, 255, 255, 0.04), inset 26px 26px rgba(0, 0, 0, 0.1);
}

.btn-exao-menu.dropdown div:hover ul {
/ / display: block;
}

.btn-exao-menu.dropdown ul {
    display: none;
    text-align: left;
    padding-left: 10px;
    position: relative;
    background: #272c33;
    border-top: 1px solid #4e4e4e;
    z-index: 5000;
}

.btn-exao-menu.dropdown-exao-menubox {
    border: 1px solid #4e4e4e;
    border-radius: 0 0 3px 3px;

}

.btn-exao-menu.dropdown ul:first-child {
    position: absolute;
    top: 20px;
    left: -11px;
    right: -1px;
    background: #272c33;
    border-radius: 0 0 3px 3px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

}

.btn-exao-menu.dropdown ul li {
    display: block;

}

.btn-exao-menu.dropdown ul li ul {
    display: block;
    padding-left: 30px;
}

.btn-exao-menu.dropdown ul li ul li ul {
    display: block;
    padding-left: 30px;
}

.btn-exao-menu.dropdown ul:first-child {
    border-bottom: 1px solid #4e4e4e;
}

.btn-exao-menu.dropdown ul > div > div > li {
    border-right: 1px solid #4e4e4e;

}

.btn-exao-menu.dropdown li {
    border-top: 1px solid #4e4e4e;
    border-left: 1px solid #4e4e4e;
}

.btn-exao-menu.dropdown li:first-child {
    border-top: 1px solid transparent;

}

.btn-exao-menu.dropdown ul:first-child li:last-child a {
    border-radius: 0 0 3px 3px;
}

.btn-exao-menu.dropdown ul a {
    display: block;
    line-height: 28px;
    padding: 0 4px 1px;
    color: white;
/ / #b2b8c4;
    border-top: 1px solid transparent;
}

.btn-exao-menu.dropdown ul a:hover {
    color: white;
    text-shadow: 0 1px rgba(0, 0, 0, 0.7);
    background: red;
    border-color: #78aad5;

}

#navsite-TP-submenu {
    display: inline;
    position: absolute;
    width: 200px;
    height: 100%;
    background-color: #303030;
    padding: 0;
}

#top-spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    background: none; /*#a33;*/
    color: #fff;
    z-index: 100000;
    width: 140px;
    height: 140px;
    margin: 0 20px 20px 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#rot-spinner div {
    background: #333;
    border: 1px solid #ccc;
    position: absolute;
}

#rot-spinner {
    position: absolute;
}

/******************************* 			EXAO bootstrap	  ********************************************/
.btn-toolbar-right {
    float: right;
}

.fileinput-button {
    position: relative;
    overflow: hidden;
}

.fileinput-button input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 200px;
    direction: ltr;
    cursor: pointer;
}

input.rounded {
    width: 60%;
    min-height: 21px;
    border: 1px solid #ccc;
    margin-left: 5%;
    margin-top: 4px;
    text-align: center;
    -webkit-border-radius: 10px 10px 0 10px;
    -moz-border-radius: 10px 10px 0 10px;
    border-radius: 10px 10px 0 10px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    font-size: 20px;
    outline: 0;
    -webkit-appearance: none;
}

.right-rounded {
    width: 20%;
    position: relative;
    top: -3px;
    height: 32px;
    background-color: #fff;
    border: 1px solid #ccc;
    color: #ccc;
    -webkit-border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    font-size: 20px;
    padding: 2px 0;
    outline: 0;
    -webkit-appearance: none;
}

a.right-rounded:hover {
    color: #333;

}

.icon-flip-horizontal {
    position: relative;
    left: -5px;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
}

input.rounded:focus {
    border-color: #339933;
}

.btn-rounded-right {
    border-top: 5px solid transparent;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    border-bottom-right-radius: 4px;
}

.exaoli {
    margin: 0;
    background-color: #055;
    border-top: 2px solid transparent;
    list-style-type: none;
    text-align: center;
    cursor: pointer;
}

a.exao-btn-search {
    color: #fff;
}

#main {
    background-color: white;
}

canvas {
    background-color: transparent;
}

/*********************************** EXAO FINDER OPTIONS *****************************************/
#exao-finder-top {
    padding: 0 5%;
}

/*  => #exao-finder-return  or #exao-finder-up */
.arrow-div {
    position: relative;
    top: 2px;
    height: 20px;
    z-index: 2;
    text-align: center;
    display: inline-block;
    vertical-align: baseline;
    left: 9px;
    font-size: 10px;
    color: white;
    *display: inline;
    *vertical-align: baseline;
}

.arrow-div ul {
    display: none;
    position: relative;
    list-style: none;
    padding-left: 4px;
    padding-right: 4px;
    background: #4e4e4e;
    border: 1px solid;
    border-color: #4e4e4e;
    border-radius: 3px 5px 5px 3px;
}

.arrow-div ul > li {
    height: 16px;
}

.arrow-div li:first-child:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 9px outset transparent;
}

.arrow-right-div ul {
    z-index: 1;
    left: 0;
    top: 0;
    bottom: 0;
}

.arrow-right-div li:first-child:before {
    left: -17px;
    border-right: 9px solid #4e4e4e;
}

.exao-input-label0 {
    font-weight: bold;
    font-family: "Calibri";
    text-decoration: underline;
    font-size: 18px;
    color: #ffffff;
    padding-top: 5px;
}

.exao-input-label1 {
    font-weight: bold;
    font-family: "Calibri";
    font-size: 14px;
    color: #cccccc;
    padding-top: 5px;
}

.exao-input-label1.select {
    cursor: pointer;
    padding-left: 5px;
}

.select:hover {
    cursor: pointer;
}

#exao-finder-first-selector > div {
    margin-left: 20px;
}

.exao-input-finder {
}

.ui-keyboard-button {
    height: 3em !important;
    width: 3em !important;
}

.ui-keyboard-preview:focus {
    outline: none !important;
    border: 2px solid white;
}

#exao-input-list {
    padding-top: 10px;
    padding-bottom: 10px;
}

#exao-finder-top table tbody.scrollContent {
    display: block;
    max-height: 400px;
    overflow: auto;
    width: 100%;
}

.exao-finder-top-scrollcontent.black > .mCustomScrollBox > .mCSB_scrollTools {
    width: 16px;
    height: 96%;
    top: 2%;
    bottom: 2%;
}

.exao-finder-top-scrollcontent.black .mCSB_scrollTools .mCSB_draggerRail {
    width: 6px;
    box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
}

.exao-finder-top-scrollcontent.black {
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.exao-finder-top-scrollcontent.black .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.4);
    filter: "alpha(opacity=80)";
    -ms-filter: "alpha(opacity=40)";
}

.exao-finder-top-scrollcontent.black .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.5);
    filter: "alpha(opacity=50)";
    -ms-filter: "alpha(opacity=50)";
}

.exao-finder-top-scrollcontent.black .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.exao-finder-top-scrollcontent.black .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.6);
    filter: "alpha(opacity=60)";
    -ms-filter: "alpha(opacity=60)";
}

/* content_2 scrollbar */
.exao-finder-top-scrollcontent > .mCustomScrollBox > .mCSB_scrollTools {
    width: 16px;
    height: 98%;
    top: 1%;
}

.exao-finder-top-scrollcontent .mCSB_scrollTools .mCSB_draggerRail {
    width: 6px;
    box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
}

.exao-finder-top-scrollcontent .mCustomScrollBox {
    border-right: 1px solid white;
    border-bottom: 1px solid white;
}

.exao-finder-top-scrollcontent .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.4);
    filter: "alpha(opacity=80)";
    -ms-filter: "alpha(opacity=40)"; /* old ie */
}

.exao-finder-top-scrollcontent .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.5);
    filter: "alpha(opacity=50)";
    -ms-filter: "alpha(opacity=50)"; /* old ie */
}

.exao-finder-top-scrollcontent .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.exao-finder-top-scrollcontent .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.6);
    filter: "alpha(opacity=60)";
    -ms-filter: "alpha(opacity=60)"; /* old ie */
}

#exao-finder-top table {
    position: relative;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    color: #cccccc;
    border-collapse: collapse;
}

#exao-finder-top table {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#exao-finder-top table td {
    font-family: "Calibri";
    font-size: 15px;
    font-weight: bold;
    text-align: left;
    padding-left: 15px;
    vertical-align: middle;
    text-transform: none;
    height: 30px;
    cursor: pointer;
}

#exao-finder-top table > tbody > tr:first-child,
#exao-finder-top table > tbody > div > div > tr:first-child {
    border-top: none;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
}

#exao-finder-top table > tbody > div > div > tr:last-child {
    border-bottom: transparent;
}

#exao-finder-top table > thead > tr {
    width: 180px;
}

#exao-finder-top.fblack table > thead > tr,
#exao-finder-top.fblack table > tbody > tr,
#exao-finder-top.fblack table > tbody > div > div > tr {
    border:1px solid black;
}

#exao-finder-top table > thead > tr,
#exao-finder-top table > tbody > tr,
#exao-finder-top table > tbody > div > div > tr {
    border: 1px solid white;
}

#exao-finder-top table > tbody > tr,
#exao-finder-top table > tbody > div > div > tr {
    width: 100%;
}

.exao-text-wrap {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#exao-finder-top table > tbody > div > div > tr > td { /*  scroll */
    max-width: 160px;
    min-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#exao-finder-top table > tbody > tr > td { /* no scroll */
    max-width: 180px;
    min-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#exao-finder-top table > thead {
    background-color: red;
}

#exao-finder-top table > thead > tr:first-child > td {
    padding-left: 5px;

}

#exao-finder-top table a {
    font-family: "Calibri";
    font-size: 20px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    text-transform: none;
}

#exao-finder-top tr {
    background-color: none;
}

/*********************************** EXAO DISPLAY OPTIONS *****************************************/
.exao-popover-property,
.exao-graph-property {
    background-color: rgba(51, 51, 51, 0.70); /* #333333; */
    color: #cccccc;
    padding: 0;
}

.popover-title {
    background-color: #282828;
    color: #ffffff;
    font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
    font-size: 13px;
    border-radius: 5px 5px 0 0;
    padding: 12px 16px 12px 14px;
    border-bottom: 1px solid #171717;
}

.popover-title > span:first-letter {
    text-transform: uppercase;
}

.exao-popover-property {
    padding: 0;
    border-radius: 5px !important;
}

.popover-title.nocontent {
    border-radius: 5px 5px 5px 5px;
}

.popover-content {
    border-radius: 0 0 5px 5px;
}

.exao-popover-property.popover.right .arrow,
.exao-graph-property.popover.right .arrow {
    top: 109px;
    left: -11px;
    margin-top: -11px;
    border-right-color: #3a3a3a !important;
    border-left-width: 0;
}

.exao-popover-property.popover.left .arrow {
    top: 105px;
    right: -11px;
    margin-top: -11px;
    border-left-color: #357ebd;
    border-right-width: 0;
}

.exao-popover-property.popover.top .arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: #357ebd;
    border-bottom-width: 0;
}

.exao-popover-property.bottom .arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-bottom-color: #357ebd;
    border-top-width: 0;
}

.exao-popover-property.popover.right .arrow:after,
.exao-graph-property.popover.right .arrow:after {
    left: 3px;
    border-right-color: #3a3a3a;
    border-left-width: 0;
}

.exao-popover-property.popover.right .arrow.nocontent:after,
.exao-graph-property.popover.right .arrow.nocontent:after {
    border-right-color: #333333;
}

.exao-popover-property.popover.left .arrow:after {
    right: 3px;
    border-left-color: #333333;
    border-right-width: 0;
}

.exao-popover-property.popover.left .arrow.nocontent:after {
    border-left-color: #333333;
}

.exao-popover-property.popover.top .arrow:after {
    bottom: 3px;
    border-top-color: #333333;
    border-bottom-width: 0;
}

.exao-popover-property.popover.top .arrow.nocontent:after {
    border-top-color: #202020;
}

.exao-popover-property.popover.bottom .arrow:after {
    top: 3px;
    border-bottom-color: #333333;
    border-top-width: 0;
}

.exao-popover-property.popover.bottom .arrow.nocontent:after {
    border-bottom-color: #202020;
}

.exao-popover-property .popover-title {
    display: block;
    height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;

    padding-right: 4px;
}

/* overwrite bootstrap */
.popover-content {
    background-color: #3a3a3a;
    padding: 0;
    min-height: 107px !important;
}

.popover-content-binder {
    position: relative;
    width: 198px;
    height: 220px;
    overflow: hidden;

}

.popover-content-windows {
    position: absolute;
    width: 198px;
    color: white;
    font-size: 12px;
    font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
}

.popover-content-windows > div {
    min-width: 1px;
    padding: 10px 17px 10px 14px;
    height: 40px;

    transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.popover-content-windows > div:last-child {
    border-radius: 0 0 5px 5px;
}

.popover-content-windows > div:hover {
    background-color: #007bff5e;
}

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

.popover-content-windows > div[id*='picker-modal'] {
    border-top: 0;
    padding: 0 5px 0 14px;
}

.popover-content-windows > div.noborder {
    border-bottom: 1px solid transparent;

}

span.popover-content-return {
    cursor: pointer;
    position: relative;
    padding: 0 12px 0 0;
}

div.popover-goto {
    cursor: pointer;
}

ul#exao-finder-filter-list,
ul#exao-graph-list-properties {
    font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
    list-style: none;
    padding: 0;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 0;
    z-index: 10000;
}

ul#exao-finder-filter-list ul {
    padding-left: 10px;
}

ul#exao-finder-filter-list ul > li span:first-child {
    display: inline-block;
    width: 130px;
    max-width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.exao-graph-list-scrollcontent > .mCustomScrollBox > .mCSB_scrollTools {
    width: 16px;
    height: 96%;
    top: 2%;
}

.exao-graph-list-scrollcontent .mCSB_scrollTools .mCSB_draggerRail {
    width: 6px;
    box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
}

.exao-graph-list-scrollcontent .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.4);
    filter: "alpha(opacity=80)";
    -ms-filter: "alpha(opacity=40)"; /* old ie */
}

.exao-graph-list-scrollcontent .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.5);
    filter: "alpha(opacity=50)";
    -ms-filter: "alpha(opacity=50)"; /* old ie */
}

.exao-graph-list-scrollcontent .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.exao-graph-list-scrollcontent .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.6);
    filter: "alpha(opacity=60)";
    -ms-filter: "alpha(opacity=60)"; /* old ie */
}

ul#exao-graph-list-properties > li > ul > li > span:first-child,
ul#exao-graph-list-properties > li > ul > li > p:first-child {
    font-size: 12px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* border ul/li */
ul#exao-graph-list-properties > li > ul {
    padding-left: 0px;
    list-style: none;
}

ul#exao-graph-list-properties > li,
ul#exao-graph-list-properties > li > ul > li {
    line-height: 33px;
    width: 100%;
    transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blockTitleManip > span{
    text-transform: uppercase;
    cursor: pointer;
}

.blockTitleManip > span[class*='link']{
    padding-right: 10px;
    font-size: 17px;
    vertical-align: sub;
}

.scale-modal {
    overflow: hidden;
}

ul.scale-modal {
    list-style-type: none;
}

ul.scale-modal > li {
    height: 40px;
}

ul.scale-modal > li:nth-child(n) {
    /*float:right !important;*/
}

ul.scale-modal > li > input {
    width: 80px;
    text-align: right;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
}

/**************************************************************************************************/
#exao-spectrum {
    /*border:1px solid #a00*/

}

canvas[id*='exao-canvas-'],
.editor-spectrum {
    touch-action: none;

}

/*********************************** EXAO NAVIGATOR OPTIONS *****************************************/
#zoom-thumbwheel,
#zoom-sliderbar {
    width: 100px;
    height: 8px;

    display: inline-block;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 18px;
    *line-height: 20px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;

    background-color: #7c6c6c;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(20%, #ffffff), to(#7c6c6c));
    background-image: -webkit-linear-gradient(#ffffff, #ffffff 20%, #7c6c6c);
    background-image: -moz-linear-gradient(top, #ffffff, #ffffff 20%, #7c6c6c);
    background-image: -ms-linear-gradient(#ffffff, #ffffff 20%, #7c6c6c);
    background-image: -o-linear-gradient(#ffffff, #ffffff 20%, #7c6c6c);
    background-image: linear-gradient(#ffffff, #ffffff 20%, #7c6c6c);
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c6c6c', endColorstr='#ffffff', GradientType=0);

    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #e6e6e6;
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */

    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    border: 1px solid #cccccc;
    *border: 0;
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    *margin-left: .3em;

    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

}

#zoom-thumbwheel > :first-child {
    border-top-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;

    border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
}

#zoom-thumbwheel > :last-child {
    border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;

}

#zoom-sliderbar:hover {
    border: 1px solid #ccc;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

#zoom-slider-ball {
    width: 17px;
    height: 16px;
    background-image: url(../../../img/selector.gif);
    top: -6px;
    left: 0;
    position: relative;
    cursor: pointer;
}

#zoom-info {
    width: 60px;
    height: 25px;
    position: relative;
    top: 0;
    left: 0;

    text-align: right;
    padding-right: 5px;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    border: 1px solid black;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

#preview-slider-zoom,
#preview-slider-stack,
#preview-slider-polar,
#preview-compare {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    background-image: -webkit-linear-gradient(top, #303030 0%, #202020 100%);
    background-image: linear-gradient(to bottom, #303030 0%, #202020 100%);
    background-repeat: repeat-x;
    border: 1px solid #aaaaaa;
}

#preview-slider-zoom.horizontal-slider,
#preview-slider-stack.horizontal-slider,
#preview-slider-polar.horizontal-slider {
    height: 30px;
    width: 168px; /* 168 */
    margin-left: auto !important;
    margin-right: auto;
}

#preview-slider-zoom div.preview-compare-canvas-left > div > div {
    background-image: url("../../Exao/icons/icon-split16x17-left.png");
}

#preview-slider-zoom div.preview-compare-canvas-right > div > div {
    background-image: url("../../Exao/icons/icon-split16x17-right.png");
}

#preview-slider-zoom div.preview-compare-canvas-leftright > div > div {
    background-image: url("../../Exao/icons/icon-split16x17-leftright.png");
}

#preview-slider-zoom.vertical-slider,
#preview-slider-stack.vertical-slider,
#preview-slider-polar.vertical-slider {
    height: 100%;
    width: 30px;
    margin-top: auto;
    margin-bottom: auto;
}

#preview-slider-stack.vertical-slider > div:first-child,
#preview-slider-polar.vertical-slider .polar-select {
    /*margin					: 3px;*/
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: 2px solid #aaaaaa;
    color: white;
}

#preview-slider-polar.vertical-slider .polar-select,
#preview-slider-polar.vertical-slider div[class*='polar-angle-'] {
    cursor: pointer;
}

#preview-slider-polar.vertical-slider div.polar-selected {
    background-color: rgba(255, 255, 255, 1.0);
    border: 2px solid #00aa00;
    color: #00aa00;
}

#preview-slider-zoom.horizontal-slider > div:first-child {
    margin: 3px 3px;
    height: 20px;
    width: 160px; /* 168 */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: 1px solid #aaaaaa;

}

#preview-slider-zoom.horizontal-slider > div:first-child > span {
    color: white;

    margin-top: 4px;
    margin-bottom: 3px;
    float: left;
    cursor: pointer
}

#preview-slider-zoom.horizontal-slider > div:first-child > span:first-child {
    margin-left: 5px;
    margin-right: 9px;
}

#preview-slider-zoom.horizontal-slider > div:first-child > span:last-child {
    margin-left: 9px;
    margin-right: 5px;
}

#preview-slider-zoom.horizontal-slider > div > div.slider-bar {
    height: 100%;
    width: 70%;
    margin-right: auto;
    margin-left: auto;
    float: left;
    cursor: pointer;
}

#preview-slider-zoom.horizontal-slider > div > div > div.slider-bar-in {
    height: 2px;
    margin-top: 9px; /* auto; */
    margin-bottom: auto;

    border: 1px solid #aaaaaa;
    cursor: pointer;
}

div.slider-button {
    position: relative;
    top: -21px;
    left: 100px;
    z-index: 1;
    height: 16px;
    width: 10px;
    background-image: -webkit-linear-gradient(top, #303030 0%, #202020 100%);
    background-image: linear-gradient(to bottom, #303030 0%, #202020 100%);
    background-repeat: repeat-x;
    border: 1px solid #aaaaaa;
    cursor: pointer

}

div.slider-button > div {
    height: 10px;
    width: 2px;
    margin: 2px auto;
    border: 1px solid #00aa00;
}

/*********************************** EXAO Annotate OPTIONS *****************************************/
#exao-sismo-properties > div,
#exao-filter-properties > div,
#exao-annotate-properties > div,
#exao-tag-properties > div,
#exao-clipboard-properties > div,
#exao-count-properties > div,
#exao-measure-properties > div,
#exao-compare-properties > div,
#exao-data-properties > div,
#exao-outils-properties > div{
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid #333333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: rgba(11, 11, 11, 0.7);
    color: white !important;
}

#exao-options-annotate {
    padding: 0 0 0 5px;
    height: 25px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.80);
}

#exao-top-disppan {
    padding: 8px 0 0 12px;
    max-height: 200px;
}

#exao-top-disppan > div > div:first-child > div {
    min-width: 1px;
    max-width: 160px;
    /*padding-right	: 20px;*/
    border-top: 1px solid rgba(51, 51, 51, 0.80);
    height: 40px;
}

#exao-top-disppan > div > div > div[id*='picker-modal'] {
    border-top: 0;
    padding: 0 2px 0 2px;
}

#exao-select-disppan {
    height: 40px;
    padding-left: 0 !important; /* overwrite padding from #exao-annotate-properties  > div > div:first-child */
    padding-right: 0 !important;
    padding-top: 9px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

#exao-select-disppan > div {
    overflow: hidden; /* apply to all div and not only exao-select-disppan-center else no vertical align between div (?) */
    display: inline-block;
}

#exao-select-disppan-center {
    margin-left: auto;
    margin-right: auto;
}

#exao-select-disppan-center > div {
    width: 0;
    margin-left: 0;
}

.exao-select-disppan-child,
#exao-select-disppan-center > div > div {
    width: 24px;
    height: 24px;
    cursor: pointer;
    border: 1px solid white;
    text-align: center;
    margin: 3px;
    padding-top: 5px;
    font-size: 11px;
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#exao-select-disppan > div.unavailable {
    height: 0;
    opacity: 0
}

#exao-select-disppan > div.available {
    height: 24px;
    opacity: 0.5
}

#exao-select-disppan-center > div > div.clearSel,
#exao-tag-toolkit > div.clearSel {
    opacity: 0.5;
    background-color: rgba(255, 255, 255, 0.3);
}

#exao-select-disppan-center > div > div.highlightSel,
#exao-tag-tooolkit > div.highlightSel {
    opacity: 1.0;
    /*background-color		: rgba(95, 100, 233, 0.3);*/
    -moz-box-shadow: 1px 1px 2px 2px #9698ed;
    -webkit-box-shadow: 1px 1px 2px 2px #9698ed;
    -o-box-shadow: 1px 1px 2px 2px #9698ed;
    box-shadow: 1px 1px 2px 2px #9698ed;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#9698ed, Direction=134, Strength=10);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    /*
	5f64e9
	000cff
	*/
}

#exao-select-disppan > div:first-child,
#exao-select-disppan > div:last-child {
    display: inline-block;
    width: 24px;
    cursor: pointer;
    border: 1px solid white;
    text-align: center;
    margin: 3px;
    padding-top: 3px;
    font-size: 11px;
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.exao-select-disppan-scrollcontent > .mCustomScrollBox > .mCSB_scrollTools {
    width: 16px;
    height: 94%;
    top: 2%;
}

.exao-select-disppan-scrollcontent .mCSB_scrollTools .mCSB_draggerRail {
    width: 6px;
    box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
}

.exao-select-disppan-scrollcontent .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.4);
    filter: "alpha(opacity=80)";
    -ms-filter: "alpha(opacity=40)"; /* old ie */
}

.exao-select-disppan-scrollcontent .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.5);
    filter: "alpha(opacity=50)";
    -ms-filter: "alpha(opacity=50)"; /* old ie */
}

.exao-select-disppan-scrollcontent .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.exao-select-disppan-scrollcontent .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.6);
    filter: "alpha(opacity=60)";
    -ms-filter: "alpha(opacity=60)"; /* old ie */
}

/**********************************   Exao tag zoom *************************************/
#exao-tag-properties {
    width: 400px;
    overflow: auto;
    padding: 10px;
}

#exao-tag-properties .exao-tag-prop-container {
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;

}

#exao-tag-properties .exao-tag-sep {
    width: 3px;
    max-height: 25px;
    height: 25px;
    float: left;
    margin: 0 2px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

#exao-tag-tooolkit .exao-tag-sep {
    width: 3px;
    height: 100%;
    margin: 0 3px;
    background: rgba(255, 255, 255, 0.1);
}

#exao-tag-tooolkit .exao-tag-style,
#exao-tag-tooolkit .exao-tag-mode {
    float: left;
    height: 100%;
    width: 25px;
    font-size: 18px;
    cursor: pointer;
}

#exao-tag-tooolkit .exao-tag-mode {
    margin: 0 2px;
    padding: 1px 5px;
}

#exao-tag-properties .exao-tag-prop-container div {
    display: block;
    float: left;
    width: 25px;
    text-align: center;

}

#exao-tag-properties .exao-tag-prop-container div:hover {
    cursor: pointer;
}

.exao-tagtype-selected {
    background: url("../../js/Exao/img/select.png") 0 0 no-repeat;
}

.exao-tagcolor-border,
.exao-tagcolor-background {
    margin: auto;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.exao-tagcolor-border > div,
.exao-tagcolor-background > div {
    margin: auto;
    width: 22px;
    height: 22px;
}

.exao-tagcolor-border > div {
    background: url("../../js/Exao/img/fillborder.png") 0 0 no-repeat;
}

.exao-tagcolor-background > div {
    background: url("../../js/Exao/img/fillbackground.png") 0 0 no-repeat;
}

.exao-tag-ver-scrollcontent > .mCustomScrollBox > .mCSB_container {
    margin-bottom: 10px !important;
}

.exao-tag-ver-scrollcontent > .mCustomScrollBox > .mCSB_scrollTools {
    height: 16px !important;
    width: 98% !important;
    left: 1% !important;
}

.exao-tag-ver-scrollcontent .mCSB_scrollTools .mCSB_draggerRail {
    height: 6px !important;
    box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1) !important;
}

.exao-tag-ver-scrollcontent .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    top: 2px;
    background: rgba(255, 255, 255, 0.4) !important;
    filter: "alpha(opacity=80)" !important;
    -ms-filter: "alpha(opacity=40)" !important; /* old ie */
}

.exao-tag-ver-scrollcontent .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.5) !important;
    filter: "alpha(opacity=50)" !important;
    -ms-filter: "alpha(opacity=50)" !important; /* old ie */
}

.exao-tag-ver-scrollcontent .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.exao-tag-ver-scrollcontent .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.6) !important;
    filter: "alpha(opacity=60)" !important;
    -ms-filter: "alpha(opacity=60)" !important; /* old ie */
}

/*********************************** EXAO count OPTIONS *****************************************/
#exao-count-properties > div > div,
#exao-measure-properties > div > div {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
}

#exao-count-properties > div > div.default-counter {
    text-align: center;
    border: 1px solid white;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

table#exao-table-count-prop-mth2.horiz-counter {
    text-align: center;
    font-size: 12px;
    margin-left: auto;
    margin-right: 4px;
    border-spacing: 0 10px;
    color: #cccccc;
}

table#exao-table-count-prop-mth2.horiz-counter td {
    height: 34px;
    border: 1px solid #cccccc;
}

table#exao-table-count-prop-mth2.horiz-counter td.td-tablecount-doubleicon > span:nth-child(1),
table#exao-table-count-prop-mth2.horiz-counter td.td-tablecount-doubleicon > span:nth-child(2) {
    width: 14px;
}

table#exao-table-count-prop-mth2.horiz-counter td.td-tablecount-doubleicon > span {
    position: relative !important;
    line-height: 14px !important;
    text-align: center;
}

table#exao-table-count-prop-mth2.horiz-counter td.td-tablecount-doubleicon > span:nth-child(1) {
    position: relative !important;
    font-size: 14px !important;
}

table#exao-table-count-prop-mth2.horiz-counter td.td-tablecount-doubleicon > span:not(:nth-child(1)) {
    left: -14px;
    top: -3px;
    font-size: 6px;
}

table#exao-table-count-prop-mth2.horiz-counter td:first-child {
    max-width: 20px !important;
    padding-left: 2px;
    border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
}

table#exao-table-count-prop-mth2.horiz-counter td:not(:first-child) {
    border-left: 0 solid transparent;
}

table#exao-table-count-prop-mth2.horiz-counter td:nth-child(2) {
    width: 84px;
    line-height: 12px;
    text-align: left;
    padding-left: 5px;
    padding-right: 2px;
    border-right: 0 solid transparent;
}

table#exao-table-count-prop-mth2.horiz-counter td:nth-child(2) span:first-letter {
    text-transform: uppercase;
}

table#exao-table-count-prop-mth2.horiz-counter td:last-child {
    width: 24px;
    border-top-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
}

table#exao-table-count-prop-mth1.default-counter {
    width: 100%;
}

table#exao-table-count-prop-mth1.horiz-counter {
    text-align: center;
    font-size: 14px;
    margin-right: 4px;
    border-collapse: collapse;
    color: #cccccc;
}

table#exao-table-count-prop-mth1.horiz-counter,
table#exao-table-count-prop-mth1.horiz-counter th,
table#exao-table-count-prop-mth1.horiz-counter td {
    border: 1px solid #4e4e4e; /*1px solid yellow;*/
}

table#exao-table-count-prop-mth1 {
    margin-left: auto;
    margin-right: auto;
}

table#exao-table-count-prop-mth1.horiz-counter td:nth-child(1) {
    text-align: left;
    width: 80px;
    max-width: 80px;
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    padding-left: 2px;
}

table#exao-table-count-prop-mth1.horiz-counter td:nth-child(1):first-letter {
    text-transform: uppercase;
}

table#exao-table-count-prop-mth1.horiz-counter td:nth-child(2) {
    width: 40px;
}

/*table#exao-table-count-prop.horiz-counter  td:nth-child(2) > div:hover,*/
table#exao-table-count-prop-mth1.horiz-counter td:nth-child(2) > div.selected {
    background: url("../../js/Exao/img/select.png") 0 0 no-repeat;
    background-size: 33px 33px;
    width: 33px;
    height: 33px;
}

table#exao-table-count-prop-mth1.default-counter tr:first-child > td {
    border: 1px solid transparent;
}

table#exao-table-count-prop-mth1.default-counter tr:last-child > td {
    border-bottom: 1px solid transparent;
}

table#exao-table-count-prop-mth1.default-counter tr > td:first-child {
    border-left: 1px solid transparent;
}

table#exao-table-count-prop-mth1.default-counter tr > td:last-child {
    border-right: 1px solid transparent;
}

table#exao-table-count-prop-mth1.default-counter tr > td {
    border: 1px solid white;
}

table#exao-table-count-prop-mth1 td {
    cursor: pointer;
    height: 35px;
}

table#exao-table-count-prop-mth1.default-counter {
    text-align: center;
}

#exao-table-count-prop-mth1.horiz-counter td:nth-child(2) > div {
    margin-left: 6px;
    margin-right: 6px;
    background-size: 33px 33px;
    width: 33px;
    height: 33px;
    line-height: 31px; /* -2*border*/
}

#exao-table-count-prop-mth1.default-counter td > div,
#exao-table-count-prop-mth1.horiz-counter td:nth-child(2) > div > div {
    border: 1px solid yellow;
    text-align: center;
    background-color: red;
    vertical-align: middle;
    display: inline-block;
    line-height: 25px;
    width: 25px;
    height: 25px;
    margin-left: 4px; /*auto*/
    margin-right: 4px; /*auto*/
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

table#exao-table-count-prop-mth1.horiz-counter tr.disabled,
table#exao-table-count-prop-mth1.default-counter td.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/**************************************************************** TEMP   ******************************************************/

table#exao-table-count-prop.default-counter {
    width: 100%;
}

table#exao-table-count-prop {
    margin-left: auto;
    margin-right: auto;
}

table#exao-table-count-prop.horiz-counter td:nth-child(1) {
    text-align: left;
    width: 80px;
    max-width: 80px;
    white-space: normal !important;
    text-overflow: clip;
}

table#exao-table-count-prop.horiz-counter td:nth-child(2) {
    width: 40px;
}

table#exao-table-count-prop.horiz-counter td:nth-child(2) > div:hover,
table#exao-table-count-prop.horiz-counter td:nth-child(2) > div.selected {
    box-shadow: inset 1px 1px 3px #999;
    border-top: 2px solid black !important;
    border-left: 2px solid black !important;
    border-bottom: 2px solid white !important;
    border-right: 2px solid white !important;
}

table#exao-table-count-prop.default-counter tr:first-child > td {
    border: 1px solid transparent;
}

table#exao-table-count-prop.default-counter tr:last-child > td {
    border-bottom: 1px solid transparent;
}

table#exao-table-count-prop.default-counter tr > td:first-child {
    border-left: 1px solid transparent;
}

table#exao-table-count-prop.default-counter tr > td:last-child {
    border-right: 1px solid transparent;
}

table#exao-table-count-prop.default-counter tr > td {
    border: 1px solid white;
}

table#exao-table-count-prop td {
    cursor: pointer;
    height: 35px;
}

table#exao-table-count-prop.default-counter {
    text-align: center;
}

#exao-table-count-prop.default-counter td > div,
#exao-table-count-prop.horiz-counter td:nth-child(2) > div {
    border: 1px solid red;
    text-align: center;
    background-color: red;
    min-width: 25px;
    height: 25px;
    margin-left: 6px;
    margin-right: 6px;
    padding-left: 3px;
    padding-right: 3px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

table#exao-table-count-prop.horiz-counter tr.disabled,
table#exao-table-count-prop.default-counter td.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/**********************************   Meausure  *************************************/
.exao-meausuretype {
    width: 100%;
    margin: 4px auto;
}


.exao-meausuretype > span,
.exao-comparemode > span {
    background-size: 24px 24px;
    width: 27px;
    height: 24px;
    margin: 2px;
}

.exao-meausuretype{
    cursor: pointer;
}

.exao-comparemode > span {
    height: 25px;
}

.exao-meausuretype > table {
    margin-left: auto;
    margin-right: auto;
    transition: .2s all ease-in-out;
    border-radius: 8px;
}

.exao-meausuretype > table td:nth-child(2) {
    padding-right: 8px;
}

.exao-meausuretype .icon {
    width: 27px;
    height: 27px;
    background-position: 1px 1px;
    background-size: 22px;
    background-repeat: no-repeat;
    margin: 3px 2px 2px 2px;
}

.exao-meausuretype .fa {
    font-size:21px;
    width: 27px;
    height: 27px;
    margin: 6px 2px 2px 7px;
}

.exao-meausuretype > table:hover {
    box-shadow: 0px 0px 3px 2px #004369;
}

.exao-meausuretype > table.selected {
    box-shadow: 0 0 3px 2px #2cb3ff;
}

/**********************************   Clipboard  *************************************/
.exao-tool-copy-canvas {
    top: 0;
    left: 0;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #333;
    margin-right: 2px !important;
    margin-left: 2px !important;
}

.exao-tool-copy-canvas:hover {
    cursor: pointer;
    border: 2px solid #cecece;
    /*margin : 1px ;*/
}

.exao-tool-copy-canvas.copy-selected {
    cursor: pointer;
    border: 2px solid red;
    /*margin : 1px ;*/
}

/**********************************   text-box  *************************************/
table.table-menu-exao-textbox {
    height: 30px;
    border-collapse: collapse;
    border-spacing: 0;
}

.exao-toolbar {
    font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
    font-size: 12px;
}

table.table-menu-exao-textbox td.td-textbox:first-child {
    background-repeat: repeat-x;
    width: 100px;
    text-align: center;
    font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    padding-top: 2px;
    border-left: 3px solid #4e4e4e00;
    border-right: 3px solid #4e4e4e00;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff303030', endColorstr='#ff202020', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

table.table-menu-exao-textbox tr.exao-textbox-trinfo td.td-textbox:first-child,
table.table-menu-exao-textbox tr.exao-textbox-trguide td.td-textbox:first-child {
    color: white; /*red*/
}

table.table-menu-exao-textbox td.td-textbox {
    width: 100px;
    text-align: center;
    font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 3px solid #4e4e4e00;
    border-right: 3px solid #4e4e4e00;
}

table.table-menu-books td.td-chapter-active {
    text-align: center;
    vertical-align: middle;
    font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
    color: #3d5e83 !important;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    padding-top: 2px;
    border-left: 3px solid #4e4e4e;
    border-right: 3px solid #4e4e4e;
    background-color: white;
}

table.table-menu-exao-textbox td.td-textbox.active:first-child,
table.table-menu-exao-textbox td.td-textbox-doubleicon.active {
    background-image: -webkit-linear-gradient(top, transparent 93%, #33A1CF 90%, #33a1cf 100%);
    background-image: linear-gradient(to bottom, transparent 93%, #33A1CF 90%, #33a1cf 100%);
    background-color: unset;
    color: white; /*red;*/
}

table.table-menu-exao-textbox td.td-textbox.bgcolor1.active {
    background-image: -webkit-linear-gradient(top, transparent 80%, #25b05f 81%, #25b05f 90%);
    background-image: linear-gradient(to bottom, transparent 90%, #25b05f 81%, #25b05f 100%);
}

table.table-menu-exao-textbox td.td-textbox.active {
    background-image: -webkit-linear-gradient(top, transparent 93%, #33A1CF 90%, #33a1cf 100%);
    background-image: linear-gradient(to bottom, transparent 93%, #33A1CF 90%, #33a1cf 100%);
}

table.table-menu-exao-textbox td.td-textbox-doubleicon > span:nth-child(1),
table.table-menu-exao-textbox td.td-textbox-doubleicon > span:nth-child(2) {
    width: 22px !important;
}

table.table-menu-exao-textbox td.td-textbox-doubleicon > span {
    position: relative !important;
    line-height: 22px !important;
    text-align: center;
}

table.table-menu-exao-textbox td.td-textbox-doubleicon > span:nth-child(1) {
    position: relative !important;
    font-size: 22px !important;
}

table.table-menu-exao-textbox td.td-textbox-doubleicon > span:not(:nth-child(1)) {
    left: -22px;
    top: -3px;
    font-size: 12px;
}

table.table-menu-exao-textbox td.td-textbox-doubleicon > span:nth-child(3) {
    margin-left: 5px;
}

table.table-menu-exao-textbox td.td-textbox {
    background-image: none;
    background-color: none;
    color: white;
}

table.table-menu-exao-textbox td.td-textbox:first-child {
    border-left: 0 solid transparent;
}

table.table-menu-exao-textbox td.td-textbox:last-child {
    border-right: 0 solid transparent;

}

.exao-textbox-topguide-title-1 {
    font-size: 12pt;
    width: 400px;

    margin-top: 0;
    margin-bottom: 0;
    padding-left: 20px;
    background: #f66d25;
    color: white;
    direction: ltr;
    unicode-bidi: embed;
    word-break: normal;
}

.exao-textbox-topguide-title-1b {
    font-size: 12pt;
    width: 200px;

    margin-top: 0;
    margin-bottom: 0;
    padding-left: 20px;
    background: #f66d25;
    color: white;
    direction: ltr;
    unicode-bidi: embed;
    word-break: normal;
}

.exao-textbox-topguide-title-2 {
    font-size: 10pt;
    font-family: 'Century Gothic';
    color: rgb(33, 33, 33);
    font-weight: bold;
}

ul.exao-textbox-topguide-1,
ul.exao-textbox-topguide-2 {
    list-style-type: none;
}

ul.exao-textbox-topguide-1 {
    padding-left: 5px;
    line-height: 17.6pt;

}

ul.exao-textbox-topguide-1 > li {
    margin: 10px 0;
}

ul.exao-textbox-topguide-1 > li > span.fa {
    color: rgb(187, 13, 24);
    padding-right: 5px
}

ul.exao-textbox-topguide-1 > li > span.title {
    color: rgb(33, 33, 33);
    font-weight: bold;
}

ul.exao-textbox-topguide-2 > li {
    margin: 5px 0;
}

ul.exao-textbox-topguide-2 > li > span.fa {
    color: #f66d25;
    padding-right: 5px
}

ul.exao-textbox-topguide-2 > li > span.title {
    color: rgb(187, 13, 24);
    font-weight: bold;
}

#exao-textbox {
    font-family: 'Century Gothic', serif;
    font-size: 13px;
}

.title-bgcolor1 span:before {
    background: #25b05f;
}

.title-bgcolor2 span:before {
    background: rgb(187, 13, 24);
}

.exao-textbox-title-page {
    margin-top: 2px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
}

.exao-textbox-title-page > div {
    width: 100%;
    max-height: 20px;
    overflow: hidden;
    text-overflow: clip;
    font-size: 12pt;
    font-family: 'Century Gothic';
    color: rgb(0, 0, 0);
    text-transform: uppercase;
    text-align: right;

    margin-top: 0;
    margin-bottom: 0;
}

.exao-textbox-title-page span {
    display: inline-block;
    position: relative;
    max-height: 20px;
}

.exao-textbox-title-page span:before {
    content: "";
    width: 400px;
    height: 15px;
    position: absolute;
    right: 10px;
    right: 100%;
    margin-right: 5px;
    margin-top: 4px;
}

.exao-textbox-title-page span:after {
    margin-right: 5px;
}

.exao-textbox-title-1,
.exao-textbox-title-1-24 {
    text-align: left;
    overflow: hidden;
    font-size: 12pt;
    font-family: 'Century Gothic';
    font-weight: bold;
    margin-top: 2px;
    margin-bottom: 5px;
    direction: ltr;
    unicode-bidi: embed;
    word-break: normal;
}

.exao-textbox-title-1 span {
    display: inline-block;
    position: relative;
    height: 28px;
    border: 1px solid black;
    margin-left: 5px;
    padding: 5px 30px 5px 5px;
}

.exao-textbox-title-1 span:after {
    content: "";
    position: absolute;
    height: 27px;
    border-bottom: 1px solid black;
    top: 0;
    width: 600px;
}

.exao-textbox-title-1-24 span {
    display: inline-block;
    position: relative;
    height: 24px;
    border: 1px solid black;
    margin-left: 5px;
    padding: 2px 30px 2px 5px;
}

.exao-textbox-title-1-24 span:after {
    content: "";
    position: absolute;
    height: 23px;
    border-bottom: 1px solid black;
    top: 0;
    width: 600px;
}

.exao-textbox-title-1 span:after {
    left: 100%;
}


/**********************************   sismo  *************************************/
#exao-sismo-properties table > tbody > tr {
    height: 25px;
}

.sismo-tab-slider {
    position: relative;
    height: 25px;
    line-height: 23px;
    border: 1px solid #ccc
}

.sismo-tab-slider > div {
    position: absolute;
    /*	cursor 				: default;*/
    height: 100%;
}

.sismo-tab-slider > div:first-child {
    background-color: #333;
}

.sismo-tab-slider > div:last-child {
    width: 100%;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#exao-sismo-properties #exao-sismo-submit {
    margin:10px auto;
    width: 60px;
    background-color: red;
    text-align: center;
    border: 1px solid #ccc;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

#exao-sismo-properties table > tbody td.sismo-tab-value {
    text-align: center;
}

#exao-sismo-properties table > tbody td .sismo-tab-slider,
#exao-sismo-properties table > tbody td.sismo-tab-value {
    cursor: pointer;
}

/**************************************************************\
 ********************   slideV-scrollcontent ******************
\**************************************************************/
.exao-textbox-scrollcontent > .mCustomScrollBox > .mCSB_container {
    margin-right: 8px;
}

.exao-textbox-scrollcontent > .mCustomScrollBox {
    opacity: 1;
    filter: "alpha(opacity=100)";
    -ms-filter: "alpha(opacity=100)"; /* old ie */
/ / background: #323841;
}

.exao-textbox-scrollcontent > .mCustomScrollBox > .mCSB_scrollTools {
    width: 8px;
    height: 96%;
    top: 0;
}

.exao-textbox-scrollcontent .mCSB_scrollTools .mCSB_draggerRail {
    width: 8px;
    box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
    background: white;
}

.exao-textbox-scrollcontent .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: #aaa; /*rgba(  24, 177, 100, 1);*/
}

.exao-textbox-scrollcontent .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background: #888; /*/rgba(  13, 198, 110, 1);*/
}

.exao-textbox-scrollcontent .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.exao-textbox-scrollcontent .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: rgba(0, 0, 0, 0); /*rgba(24,220,120,0.0);*/

}

ul.exao-textbox-info-1 {
    list-style-type: none;
}

ul.exao-textbox-info-1 > li > div,
ul.exao-textbox-info-1 > li > span {
    line-height: 15pt;
    margin-top: 0;
    margin-bottom: 0;

}

ul.exao-textbox-guide-1 {
    list-style-type: upper-roman;
    margin-left: 0;
}

ul.exao-textbox-guide-1 > li > div {
    line-height: 15pt;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0.3in;
    text-indent: -0.3in;
    direction: ltr;
    unicode-bidi: embed;
    word-break: normal;
}

ul.exao-textbox-guide-2 {
    padding-left: 10px;
}

ul.exao-textbox-guide-2 > li > div,
ul.exao-textbox-guide-2 > li > span {
    line-height: 15pt;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0in;
    direction: ltr;
    unicode-bidi: embed;
    word-break: normal;
}

.quiz-level {
    border: 1px solid black;
    background: white;
    color: black;
    position: absolute;
    text-align: center;
}

.quiz-level > span {
    vertical-align: middle;
    display: inline-block;
    line-height: normal; /* on rétablit le line-height */
}

.quiz-final-key,
.quiz-final-key2 {
    border-width: 2px;

}

.quiz-final-key > div {
    margin-top: 10px;
    width: 100%;
    background: white;
    border-top: inherit;
    border-top-width: 1px;
    text-align: center;
}

.quiz-final-key2 > div {
    margin-top: 5px;
    width: 100%;
    background: white;
    border-top: inherit;
    border-top-width: 1px;
    text-align: center;
}

.quiz-final-key > div > span,
.quiz-final-key2 > div > span {
    vertical-align: middle;
    display: inline-block;
    line-height: normal;
}

.h60 > div {
    line-height: 60px;
    height: 59px;
}

.h65 > div {
    line-height: 65px;
    height: 64px;
}

.h50 > div {
    line-height: 50px;
    height: 49px;
}

.h40 > div {
    line-height: 40px;
    height: 39px;
}

.h35 > div {
    line-height: 35px;
    height: 34px;
}

/**********************************      *************************************/
.exao-tool-tabarray table > tbody > tr > td { /* no scroll */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.exao-tool-tabarray-scrollcontent > .mCustomScrollBox {

    background: #3276b1;
}

.exao-tool-tabarray-scrollcontent > .mCustomScrollBox > .mCSB_scrollTools {
    width: 16px;
    height: 94%;
    top: 4%;
}

.exao-tool-tabarray-scrollcontent .mCSB_scrollTools .mCSB_draggerRail {
    width: 6px;
    box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
}

.exao-tool-tabarray-scrollcontent .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.8);
    filter: "alpha(opacity=80)";
    -ms-filter: "alpha(opacity=40)"; /* old ie */
}

.exao-tool-tabarray-scrollcontent .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 1);
    filter: "alpha(opacity=50)";
    -ms-filter: "alpha(opacity=50)"; /* old ie */
}

.exao-tool-tabarray-scrollcontent .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.exao-tool-tabarray-scrollcontent .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.9);
    filter: "alpha(opacity=60)";
    -ms-filter: "alpha(opacity=60)"; /* old ie */
}

/**********************************   For test   *************************************/

.arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 5px solid black;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-top: 5px solid #f00;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;

    border-left: 5px solid green;
}

.arrow-div ul:before,
.arrow-left {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;

    border-right: 5px solid blue;
}

.sliderSelect > tbody > tr > td {
    /*border: 1px solid blue;*/
    width: 110px;
    height: 150px;
}

.slideThumb {
    position: relative;
}

.slideThumb > div:first-child {
    width: 105px;
    height: 105px;
    margin: 10px;
    border: 2px solid black;
    cursor: pointer;

}

.slideThumb:hover {
    border-color: red;
}

.slideThumb > div > div {
    position: absolute
}

.slideThumb > div > div.slideInfo {
    position: absolute;
    color: red;
    left: 100px;
}

.slideThumb > div > div.slideStack {
    position: absolute;
    left: 15px;
    color: cyan;
    text-align: left;
    font-weight: bold;
}

.slideThumb > div > div > img {
    width: 100px;
    height: 100px;
    margin: auto;

}

.exao-canvas-group {
    /*	position : relative;*/
}

.popover-content-windows .navbar-right {
    margin-right: 0;
    top: 2px;
    position: relative;
}

.exao-dialogBox .dialog-body input {
    color: black;
}

.icon-menu-exao{
    height: 24px;
    margin: 4px 0 4px 16px;
    font-size: 18px;
    vertical-align: -10px;
    color:#fff;
}

tr.onlink.disabled .icon-menu-exao{
    color: rgba(255, 255, 255, 0.26);
}

tr.onlink.disabled .font-menu-exao{
    color: rgba(255, 255, 255, 0.26);
}

.font-menu-exao{
    font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
    color:#fff;
}

tr.onlink:hover {
    background-color: #007bff5e;
}

tr.onlink.disabled:hover {
    background-color: unset;
}

tr.onlink.btn-exao-on:hover {
    background-color: #007bff;
}

#exao-list-viewer{
    width:auto !important;
}

.onlink [class^="icon-"]{
    width: 30px;
}

[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 20px;
    height: 20px;
    *margin-right: .3em;
    line-height: 14px;
    vertical-align: text-top;
    background-position: 1px 1px;
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

.dataTables_scroll{
    clear:both;
}

tr.onlink.disabled{
    cursor : not-allowed;
}

.blockTitleManip {
    padding-left: 17px;
    background-color: #4e4e4e;
}

.titleCurve:before{
    display: inline-block;
    font: normal normal normal 15px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f101";
    margin-right: 5px;
}

li[class*='curve-']{
    padding-left: 30px;
    cursor: pointer;
}

li[class*='curve-']:hover{
    background-color: #007bff5e;
}

li[class*='curve-'].disabled{
    color: rgba(255, 255, 255, 0.26);
    cursor: not-allowed !important;
}

li[class*='curve-'].disabled:hover{
    background-color: unset !important;
}

li[class*='curve-'].active{
    background-color: #007BFF;
}

#exao-tools-container{
    background-color: #3a3a3a;
    position:relative;
    float:left;
    width:200px;
    height:100%;
}

.popover-title-div{
    display:inline-block;
    max-width:155px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}

#colorpicker-modal{
    padding: 0 14px 0 3px;
}

.swal2-title {
    font-size: 22px !important;
}

button.swal2-styled:first-letter{
    text-transform: uppercase;
}

.labelSizeSwal{
    width: 15% !important;
    padding: 0 !important;
    margin: 20px 0;
    line-height: 43px;
    text-align: left;
}

.input-size-swal{
    width: 85% !important;
    text-align: right;
}

.right-side {
    position: relative !important;
    margin-top: 0px !important;
    min-height: inherit !important;
}

.campus-menubar
{
    width: 100%;
    height: 50px;
}


.campus-menubar table
{
    table-layout:fixed;
    border-collapse:collapse;
    width:100%;
    height:100%;
}


.campus-menubar table td
{
    height:100%;
    border-right-style:solid;
    border-right-width:3px;
    border-right-color:#4e4e4e;
    background: #303030;
    padding:0;
}


.campus-menubar table td:last-child
{
    border-right-style:none;
}


.campus-menubar button
{
    display:block;
    width:100%;
    height:100%;
    border-style:none;
    padding:0;
    background-color:rgb(48,48,48);
    color:White;
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.campus-menubar button[value="0"]:hover,
.campus-menubar button[value="0"]:active{
    background-color: #636363;
}

.campus-menubar button[value="1"]
{
    background-color: #f9f9f9;
    color:#5a95b1;
}

/* vue */
.campus-view
{
    position: relative;
    width: 100%;
}

@media only screen and (min-width: 600px) {
    .campus-menubar button{
        font-size:16px;
    }
}

#divTableView table.dataTable thead .sorting {
    text-align: center;
}

#divTableView .dataTables_scrollHeadInner{
    width: 100% !important;
}

#divTableView table{
    width: 100% !important;
}

#divTableView .table-bordered>tbody>tr>td{
    text-align: right;
    font-size: 16px;
}

.campus-toolbar {
    overflow: hidden;
    height: 59px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.campus-toolbar-item,
.campus-toolbar-item-left,
.campus-toolbar-item-right
{
    float: left;
    width: auto;  /* shrink-to-fit */
    height: auto;  /* 'Auto' heights for block formatting context roots */
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.campus-toolbar-item-right
{
    float: right;
}

.campus-container
{
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 15px;
}
#table {
    width: 100%;
}

table.campus-table tbody,
table.campus-table thead { display: block; }

table.campus-table tbody{
    height: 500px;
    overflow-x: auto;
    overflow-y: hidden;
}

.campus-table th, .campus-table td {
    height: 37px;
    border-style: solid;
    border-width: 1px;
    border-color: #ddd;
    padding: 8px;
    vertical-align: middle;
    text-align: center;
}


.campus-table>tbody>tr:nth-child(odd) {
    background-color: rgb(253, 253, 253);
}
.campus-button, .campus-radio {
    display: block;
    height: 34px;
    border-style: solid;
    border-width: 1px;
    padding: 6px 8px;
    font-size: 14px;
    font-weight: 500;
}
.campus-button {
    border-color: rgb(194,55,62);
    background-color: rgb(194,55,62);
    color: White;
}
#buttonDownload::before {
    font-family: "FontAwesome";
    content: "\f019\00a0";
}

.ui-polar-angle{
    width: 20%;
    height: 35px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    cursor:pointer;
}

.ui-polar-bottomcentert{
    width:60%;
    margin : auto;
    position: relative;
    top: -11px;
}
.ui-polar-bottom{
    min-width: 271px;
    height: 35px;
}

.ui-polar-bottom div{
    display: inline-block;
}

#preview-slider-polar{
    position:absolute;
    border-color: rgb(78, 78, 78);
    border-width: 2px;
    width:auto !important;
    height:auto !important;
    padding:3px;
    background-color:#303030;
    background-image:none;
}

.ui-polar-bottomcentert span{
    font-size:1.8em;
    color:#ffffff;
}

.ui-polar-bottomcentert span.current{
    font-weight: bold;
}

.ui-polar-angle:hover {
    background-size: 25px;
    transition: 0.1s ease-in-out;
}

#loading{
    width: 100%;
    height: 100%;
    z-index:15;
    position: absolute;
    background-image: url("../../img/logiciels/ObservTerre/loader.gif");
    background-color: #000000;
    background-repeat: no-repeat;
    background-position: center center;
}

#divListButtonSwitchMap, .divlistButton{
    position: absolute;
    height: 164px;
    top:0 !important;
    left: 0 !important;
}

#divListButtonSwitchMap ul,.divlistButton ul {
    position: relative;
    padding-left:10px;
    list-style-type: none;
    top: 50%;
}


ul.buttonMap li button {
    width: 100%;
    text-align: left;
    font-size: 9px;
    margin: 2px 0;
    min-height: 14px;
    min-width: 20px;
    padding: 0 3px;
    cursor: pointer;
    text-align: center;
}

ul.buttonMap li button.round{
    min-height: 20px;
    border-radius: 10px;
    border:1px solid;
}

.divlistSwitch{
    position: absolute;
    height: 26px;
    width: 98.5%;
    top: 0 !important;
    left: 2px !important;
    z-index: 2;
}

.divlistSwitch ul {
    position: relative;
    padding-left:0px;
    list-style-type: none;
}

.divlistSwitch ul li button {
    width: 50%;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    margin: 0;
    height: 26px;
    border: none;
    background: #dcdcdc;
    color:#5a5a5a;
    border-bottom: 2px solid #dcdcdc;
    float: left;
    display: block;
    border-radius: 0;
    padding: 0;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.divlistSwitch ul li button.checked,
.divlistSwitch ul li button.checked:hover,
.divlistSwitch ul li button.checked:focus{
    background: white;
    color: black;
    border-color: #c43b3b;
}

.divMapSwitch{
    width: 226px;
    height: 200px;
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 1;
}

.divlistSwitch ul li button:hover,
.divlistSwitch ul li button:focus{
    background: white;
    color: black;
    border-color: white;
}

#exao-toolbar-1{
    width: 230px !important;
    z-index: 1010 !important;
}

.pop-up-window.exao-popup{
    width: 565px !important;
}

.pop-up-window.exao-popup[data-window='sonde']{
    width: auto !important;
}
.exao-popup{
    position: absolute;
    z-index: 9999 !important;
    top: 10px;
    width: 484px !important;
    display: none;
    background-color: #ffffff00;
    left: 73.5vw;
}

.windowAction{
    cursor:move;
}

.exao-infoup{
    position: absolute;
    z-index: 1010 !important;
    top: 10px !important;
    width: 600px !important;
    left: 73.5vw;
}

.exao-textbox-scroll tr:nth-child(even) {
    background-color: #f8f6ff;
}

.exao-textbox-scroll tr:nth-child(odd) {
    background-color: #ffffff;
}

.exao-textbox-scroll table.transparent tr:nth-child(even) {
    background-color: #ffffff26;
}

.exao-textbox-scroll tr:nth-child(odd) {
    background-color: #ffffff00;
}

.exao-textbox-scroll table{
    text-align: center;
    width:459px;
    border: 1px solid #33a1cf;
}

.exao-textbox-scroll td {
    font-family: "Roboto";
    font-size: 15px;
    color: gray;
    line-height: 1.4;
    padding: 10px;
}


.exao-textbox-scroll table.transparent td {
    color: white;
}

.exao-textbox-scroll th{
    font-family: "Roboto";
    font-size: 15px;
    color: #fff;
    line-height: 1.4;
    background-color: #33a1cf;
    padding:12px;
    text-align: center;
}

.exao-textbox-scroll table.transparent th{
    background-color: #33a1cf6b;
}

.exao-textbox-scroll td:first-child {
    padding-left: 15px;
}

.modal-dialog-centered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(95% - (.5rem * 2));
}

@media only screen and (min-width: 576px) {
    .modal-dialog-centered {
        min-height: calc(95% - (1.75rem * 2));
    }
}

.subTitle_intro{
    font-weight: bold;
    font-size: 14px;
}

.title_intro{
    text-transform: uppercase;
}



#loading_intro .modal-footer button:before {
    display: inline-block;
    margin-right: 5px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f0ac";
}

#loading_intro p, #loading_intro span, #loading_intro ul li{
    font-size:17px;
}

#loading_intro .modal-header {
    padding: 15px 15px 15px 0;
    border-bottom: 4px solid #e5e5e5;
}

#loading_intro .thumbnail{
    border: none !important;
    padding: 2px;
}

#loading_intro .modal-title{
    font-weight: 100;
    line-height: 1.2;
    font-size: 25px;
    color:white;
    text-transform: uppercase;
}

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

#loading_intro .modal-title:first-of-type{
    font-weight: normal;
    font-size:32px;
}

#loading_intro .modal-body .row{
    margin-left:-30px;
    margin-right:-30px;
}

#loading_intro button{
    font-size: 20px;
    border: 1px solid black;
    border-radius: 12px;
    -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}

#loading_intro button:hover{
    transform: translate3d(0,-4px,0);
    box-shadow: 0 12px 30px 0 rgba(0,0,0,.2);
    transition-property: box-shadow,transform;
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(.16,1,.29,.99);
}

#loading_intro .fontSizeSmall{
    font-size: 11px;
}

#loading_intro .modal-content{
    padding: 20px;
}

#loading_intro .text-source{
    font-size: 14px;
    text-align: left;
    text-transform: uppercase;
    border-bottom: 2px solid black;
}
#loading_intro .text-source.newVersion {
    font-size: 15px;
    font-weight: bold;
    border-bottom:1px solid black;
}
#loading_intro .text-source.newVersion:first-letter {
    font-size: 18px;
}
@media (min-width: 1900px) {
    .modal-dialog.modal-xxl {
        width: 1200px;
    }
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 900px;
        margin: 30px auto;
    }
}

.modal-bg-continents{
    background-color: #551F06 !important;
    color:#FFFFFF;
}

.modal-bg-continents .text-source{
    border-color: #ae9f94 !important;
}

.modal-bg-continents .textColor{
    color: #FAC090 !important;
}

.modal-bg-continents .thumbnail{
    background-color: #6c380c !important;
}

.modal-bg-continents .modal-header{
    border-color:#D5C9C0 !important;
}

.modal-bg-continents button{
    background-color: #ebeef1 !important;
    border-color: #68360c !important;
    color: #67330b;
}

.modal-bg-continents button:hover{
    color: #4a2508;
}

/* DEBUT GREEN */
.modal-bg-green{
    background-color: #12423B !important;
    color:#D0D9D8;
}

.modal-bg-green .text-source{
    border-color: #4D716C !important;
}

.modal-bg-green .textColor{
    color: #D0D9D8 !important;
}

.modal-bg-green .thumbnail{
    background-color: #4D716C !important;
}

.modal-bg-green .modal-header{
    border-color:#4D716C !important;
}

.modal-bg-green button{
    background-color: #ebeef1 !important;
    border-color: #2e4358 !important;
    color: #10253f;
}

.modal-bg-green button:hover{
    color: #10253f;
}


/* FIN GREEN */

/* DEBUT OCEANS */
.modal-bg-oceans{
    background-color: #10253F !important;
    color:#C7CDDA;
}

.modal-bg-oceans .text-source{
    border-color: #49596D !important;
}

.modal-bg-oceans .textColor{
    color: #FAC090 !important;
}

.modal-bg-oceans .thumbnail{
    background-color: #49596D !important;
}

.modal-bg-oceans .modal-header{
    border-color:#49596D !important;
}

.modal-bg-oceans button{
    background-color: #ebeef1 !important;
    border-color: #2e4358 !important;
    color: #10253f;
}

.modal-bg-oceans button:hover{
    color: #10253f;
}


/* FIN OCEANS */

/* DEBUT GLACIER */
.modal-bg-glacier{
    background-color: #1b446c !important;
    color: #ffffff;
    font-family:'Arial-BoldMT', 'Arial', sans-serif;
}

.modal-bg-glacier .text-source{
    border-color:#d0b187 !important;
    color:#d0b187 !important;
}

.modal-bg-glacier .textColor,
.modal-bg-glacier .subText{
    color: #5effe7 !important;
}

.modal-bg-glacier .thumbnail{
    background-color: #49596D !important;
}


.modal-bg-glacier .modal-header{
    border-color:#49596D !important;
}

.modal-bg-glacier button{
    background-color: #d2b187 !important;
    border-color: #d2b187 !important;
    color: #1b446c;
    font-weight: bold;
}

.modal-bg-glacier button:hover{
    color: #10253f;
}

.subImg{
    min-height: 122px;
}
/* FIN GLACIER */


/* DEBUT LAC GREEN */
.modal-bg-green-lac{
    background-color: #1c6b60 !important;
    color: #ffffff;
    font-family:'Arial-BoldMT', 'Arial', sans-serif;
}

.modal-bg-green-lac .text-source{
    border-color:#d0b187 !important;
    color:#d0b187 !important;
}

.modal-bg-green-lac .textColor,
.modal-bg-green-lac .subText{
    color: #5effe7 !important;
}

.modal-bg-green-lac .thumbnail{
    background-color: #49596D !important;
}


.modal-bg-green-lac .modal-header{
    border-color:#49596D !important;
}

.modal-bg-green-lac button{
    background-color: #d2b187 !important;
    border-color: #d2b187 !important;
    color: #1c6b60;
    font-weight: bold;
}

.modal-bg-green-lac button:hover{
    color: #13463e;
}

.subImg{
    min-height: 122px;
}
/* FIN GLACIER */

.version2 .subText{
    font-size:20px !important;
}
#loading_intro .modal-content.version2 #btnModalCollection{
    font-size: 25px !important;
}
#loading_intro .modal-content.version2 .modal-title:first-of-type {
    font-size: 19px;
    font-weight: normal;
}
#loading_intro .modal-content.version2 .modal-title:first-of-type:first-letter {
    font-size: 24px;
}
#loading_intro .modal-content.version2 .modal-title {
    font-size: 30px;
    font-weight: bold;
    line-height: 0.8;
}
#loading_intro .modal-content.version2 .modal-title:first-letter {
    font-size:40px;
}
#loading_intro .modal-content.version2 .modal-title:last-of-type {
    padding-bottom: 30px;
}
#loading_intro .modal-content.version2 {
    padding: 0px 10px;
}

/* DEBUT BLUE CLAIR */
.modal-bg-blue-clair{
    background-color: #0A657F !important;
    color:#DBEEF4;
}

.modal-bg-blue-clair .text-source{
    border-color: #89B0BC !important;
}

.modal-bg-blue-clair .textColor{
    color: #FCD5B5 !important;
}

.modal-bg-blue-clair .thumbnail{
    background-color: #0b556a !important;
}

.modal-bg-blue-clair .modal-header{
    border-color:#89B0BC !important;
}

.modal-bg-blue-clair button{
    background-color: #ebeef1 !important;
    border-color: #ebeef1 !important;
    color: #0A657F;
}

.modal-bg-blue-clair button:hover{
    color: #0A657F;
}


/* FIN BLUE CLAIR */

/* DEBUT BLUE LIGHT */
.modal-bg-blue-light{
    background-color: #007698 !important;
    color:#FFFFFF;
}

.modal-bg-blue-light .text-source{
    border-color: #FFFFFF !important;
}

.modal-bg-blue-light .textColor{
    color: #FFFFFF !important;
}

.modal-bg-blue-light .thumbnail{
    background-color: #0b556a !important;
}

.modal-bg-blue-light .modal-header{
    border-color:#4D9AB3 !important;
}

.modal-bg-blue-light button{
    background-color: #ebeef1 !important;
    border-color: #ebeef1 !important;
    color: #007698;
}

.modal-bg-blue-light button:hover{
    color: #007698;
}


/* FIN BLUE LIGHT */

/* DEBUT BLUE high */
.modal-bg-blue-high{
    background-color: #00297F !important;
    color:#FFFFFF;
}

.modal-bg-blue-high .text-source{
    border-color: #FFFFFF !important;
}

.modal-bg-blue-high .textColor{
    color: #FFFFFF !important;
}

.modal-bg-blue-high .thumbnail{
    background-color: #2148998f !important;
}

.modal-bg-blue-high .modal-header{
    border-color:#4967A2 !important;
}

.modal-bg-blue-high button{
    background-color: #ebeef1 !important;
    border-color: #ebeef1 !important;
    color: #00297F;
}

.modal-bg-blue-high button:hover{
    color: #00297F;
}


/* FIN BLUE high */

/* DEBUT ROUGE */
.modal-bg-rouge{
    background-color: #720304 !important;
    color:#e2cbcc;
}

.modal-bg-rouge .text-source{
    border-color: #DDAEB0 !important;
}

.modal-bg-rouge .textColor{
    color: #FFFFFF !important;
}

.modal-bg-rouge .thumbnail{
    background-color: #8e3b3c !important;
}

.modal-bg-rouge .modal-header{
    border-color:#DDAEB0 !important;
}

.modal-bg-rouge button{
    background-color: #ebeef1 !important;
    border-color: #ebeef1 !important;
    color: #720304;
}

.modal-bg-rouge button:hover{
    color: #720304;
}


/* FIN ROUGE */

/* DEBUT VERT */
.modal-bg-vert{
    background-color: #12423B !important;
    color:#D0D9D8;
}

.modal-bg-vert .text-source{
    border-color: #4D716C !important;
}

.modal-bg-vert .textColor{
    color: #D0D9D8 !important;
}

.modal-bg-vert .oceanColor{
    color: #b7dee8 !important;
}

.modal-bg-vert .continentColor{
    color: #c4bd97 !important;
}

.modal-bg-vert .thumbnail{
    background-color: #4D716C !important;
}

.modal-bg-vert .modal-header{
    border-color:#4D716C !important;
}

.modal-bg-vert button{
    background-color: #ebeef1 !important;
    border-color: #ebeef1 !important;
    color: #12423B;
}

.modal-bg-vert button:hover{
    color: #12423B;
}

/* FIN VERT */

/* DEBUT MARRON */
.modal-bg-marron{
    background-color: #6a2d1d !important;
    color:#FFFFFF;
}

.modal-bg-marron .text-source{
    border-color: #FFFFFF !important;
}

.modal-bg-marron .textColor{
    color: #FFFFFF !important;
}

.modal-bg-marron .thumbnail{
    background-color: #0b556a !important;
}

.modal-bg-marron .modal-header{
    border-color:#4D9AB3 !important;
}

.modal-bg-marron button{
    background-color: #ebeef1 !important;
    border-color: #ebeef1 !important;
    color: #6a2d1d;
}

.modal-bg-marron button:hover{
    color: #6a2d1d;
}


/* FINMARRON */

div.header-menu table.table-menu td {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-right: none !important;
    color: white;
    padding: 0 5px;
    cursor: default;
}

div.header-menu table.table-menu tr:first-child{
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

div.header-menu table.table-menu tr:first-child:hover {
    background-color: #636363;
}

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

.flex{
    display: flex;
}

/*@media screen and (max-width: 560px) {
    .flex {
        display: block;
    }
}*/

@media (min-width: 1200px){
    .modal-lg {
        width: 1050px;
    }
}

.my-auto{
    margin-bottom: auto;
    margin-top: auto;
}

.myx-auto{
    margin:auto;
    text-align:center;
}

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

.imgLight{
    min-height: 104%;
    min-width:110%;
}

#divBottomIntro div{
    padding-left:0 !important;
    padding-right: 5px !important;
    color: #c4cfcc;
}

.row .mgLR0{
    margin-left:0 !important;
    margin-right:0 !important;
}



#credit_intro{
    padding-top: 20px;
}

.pR0{
    padding-right: 0 !important;
}
.h100{
    height: 100%;
}
.h80{
    height: 80%;
}
.mgT18p{
    margin-top:18%;
}
.w100{
    flex: 4; /* 75% de la largeur */
}
.w75{
    flex: 45%; /* 75% de la largeur */
}
.w29{
    flex: 29%; /* 75% de la largeur */
}
.w25{
    flex: 10%; /* 25% de la largeur */
}
.w50{
    flex: 2; /* 25% de la largeur */
}

.pgBt20{
    margin-bottom: 20px;
}

.pgBt20 p{
    text-align: left !important;
}

.mxH250{
    max-height: 250px;
}

.satName{
    position: absolute;
    top: 7px;
    left: 36px;
    font-size: 12px !important;
}

.satNameRightTop{
    position: absolute;
    top: 7px;
    right: 25px;
    font-size: 12px !important;
}

.satNameRightBottom{
    position: absolute;
    bottom: 26px;
    right: 26px;
    font-size: 12px !important;
}

.title_info{
    color: #e80d0d;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Century Gothic', serif;
}

#myCanvasLegende, #myCanvasMapPng, #myCanvasMapPng3{
    position: absolute;
}

#exao-table-compare-mode{
    margin:5px auto;
    width:100%;
}

/*#exao-table-compare-mode tr.exao-comparemode-selected{*/
    /*background-color:#007bff;*/
/*}*/

#exao-table-compare-mode tr.onlink:hover{
    cursor:pointer;
    transition: background-color .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#exao-table-compare-mode tr.onlink:hover{
    background-color:#007bff5e;
}

tr.onlink {
    padding: 7px;
    min-width: 228px;
}

.modal-backdrop.in{
    opacity: .93;
}

#btnModalCollection{
    cursor: pointer;
    font-size: 29px !important;
    opacity: 0.7;
    transition: opacity .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#btnModalCollection:hover {
    opacity: 1;
}

.modal-wsmoke{
    background: whitesmoke;
}
#centerInvestLogo{
    margin-top: -1px;
    font-size: 20px;
}

#centerInvest{
    cursor:pointer;
}

.select {
    display: grid !important;
    grid-template-areas: "select";
    position: relative;
    border: none;
    font-size: 18px;
    cursor: pointer;
    line-height: 1.5;
    background-color: #303030;
}

#standard-select{
    appearance: none;
    background-color: transparent;
    border: none;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    z-index: 1;
    outline: none;
    color:white;
    text-align-last: center;
    -ms-text-align-last: center;
    -moz-text-align-last: center;
}

#standard-select::-ms-expand {
    display: none;
}

#standard-select option{
    color:white;
    padding-left:25px;
    background: #303030;
}

.iconBarre{
    float: right;
    text-shadow: none;
    color: #272727;
}

.iconBarre:hover{

    color: #878796;
    transition: 0.1s ease-in-out;
}

.iconBarre-btn{
    float: right;
    text-shadow: none;
    color: #272727;
    border-radius: 5px;
    border: none;
    height: 26px;
    margin: 2px 2px 0 2px;
    line-height: 26px;
}

.iconBarre-btn:hover{

    color: #878796;
    transition: 0.1s ease-in-out;
}


#galerie {
    bottom: 3px;
    position: absolute;
    z-index: 99994;
    left:9vw;
}

#galerie ul {
    list-style:none;
    margin:0;
    padding:0;
    margin-top: 6px;
    position: relative;
    left:0;
    transition: .3s left;
}

#galerie ul li {
    width: 8vw;
    max-width: 150px;
    float:left;
    margin-right:4px;
    background-color: gray;
    transition: .2s ease-in;
    cursor:zoom-in;
}

#galerie.galleryDoc ul li:first-child {
    width: 4.5vw;
}

/*#galerie.galleryDoc ul li {*/
/*    width: 9vw;*/
/*}*/

#galerie ul li:hover {
    transform: translateY(-6px);
}

.minGalerie {
    width: 200px;
}

.showcase {
    /*Set so we can calculate the offsetLeft*/
    position:relative;
    height:107px;
    /*add scroll-bars */
    overflow:auto;
    float:left;
}

#rc-left,
#rc-right {
    width: 24px;
    height: 30px;
    display:block;
    float:left;
    margin: 53px 10px 0 10px;
}

.iconGalerie{
    color:white;
    text-shadow: 2px 2px 7px rgba(0, 0, 0, 0.6);
}

a.noEffect{
    color:white !important;
}

.fancybox-is-open .fancybox-bg {
    opacity: 0.98 !important;
}

.btnDoc{
    position: absolute;
    bottom: 3px;
    border-color: rgb(78, 78, 78);
    left: 8px;
    width: 8vw;
    height: 4.4vw;
    padding-top: 0.7vw;
    font-size: 1vw;
    z-index: 1030;
    max-height: 84px;
}

.imageInfo{
    max-height: 220px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
}

#downloadLink{
    height: 40px;
    width:120px;
    border:1px solid red;
    position: absolute;
    z-index: 77777;
}

#bannLegendeleft{
    position: absolute;
    z-index: 1020;
    border-radius: 4px;
    bottom: 3px;
    height: 4.5vw;
    border: 2px solid #444444;
    text-align: center;
    max-height: 107px;
    left: 25%;
    transform: translate(-50%, 0);
}

#bannLegenderight{
    position: absolute;
    z-index: 1020;
    border-radius: 4px;
    bottom: 3px;
    height: 4.5vw;
    border: 2px solid #444444;
    text-align: center;
    max-height: 107px;
    left: 75%;
    transform: translate(-50%, 0);
}

#bannLegendeleft.center,
#bannLegenderight.center{
    left: 50%;
}

#bannLegendeheader {
    padding: 1px 0 1px 1px;
    border-color: rgb(78, 78, 78);
    cursor: move;
    z-index: 1030;
    color: #fff;
    height: 20px;
}

#bannLegendeleft.center img,
#bannLegenderight.center img{
    max-height: 83px;
}

#bannLegendeleft img,
#bannLegenderight img{
    height: 4.3vw;
    max-height: 83px;
}

#closeBannLegende{
    cursor: pointer;
    top: 2px;
    height: 17px;
    right: -5px;
}

#closeBannLegende .fa-stack-2x {
    font-size: 14px;
}

#closeBannLegende .fa-stack-1x {
    line-height: normal;
    top: 0;
    font-size: 12px;
}

.iconLeft{
    float: left;
    font-size: 12px;
    padding:2px;
}

.titleCategorie{
    border-bottom: 2px solid #c2373e;
    color: #c2373e;
    text-transform: uppercase;
    font-size: 22px;
    font-weight: bold;
}

.moreInfo::before{
    content:"...";
    text-decoration: unset;
    color: black;
}

.titleTheme{
    list-style:none;
    font-size: 18px;
    font-weight: bold;
    padding-left: 25px;
}


.titleThemeCard{
    list-style:decimal;
    font-size: 18px;
    font-weight: bold;
    margin-top:20px;
    margin-bottom: 10px;
}

.titleMaps{
    font-weight: normal;
    font-size: 14px;
    width:fit-content;
    width: -moz-fit-content;
}

.titleMaps:hover{
    cursor: pointer;
    font-weight: bold;
}

.titleMapsDisabled{
    font-weight: normal;
    font-size: 14px;
    opacity: 0.4;
    width:fit-content;
    width: -moz-fit-content;
}

.mdc-card.h182{
    height: 182px;
}

.mdc-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
}

.mdc-card.yellow{
    background-color: #ffc107;
}

.mdc-card.blue{
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.mdc-card.blue h4{
    color: #31708f;
}

.alert-grey{
    color: #204658;
    background-color: #ebebeb;
    border-color: #d3d3d3;
}

.collectionCard > .mdc-card{
    width: 99%;
    height: 182px;
}

.collectionCard{
    width: 100%;
    float:left;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 15px;
}

#divNewObs{
    margin:0 0 10px 0;
    padding: 8px 15px;
}

#collectionByThemes{
    margin-bottom: 10px;
}

.collectionTitle h4{
    color: white;
    font-weight: 700;
    font-size: 20px;
}
.collectionTitle h5{
    color: white;
    font-weight: 400;
    font-size: 16px;
}

#collectionByThemes .collectionTitle h4{
    /*-webkit-text-stroke: 1px #575757;*/
}

iframe.withHeaderObserv{
    height: calc( 100dvh - 50px - 35px);
}
iframe.withoutHeaderObserv{
    height: calc( 100dvh - 35px);
}
@media (min-width: 768px) {
    .collectionCard {
        width: 20%;
        padding:1px;
        margin-bottom: 5px;
    }
    .collectionCard.cardW100 {
        width: 100%;
    }
    .collectionCard > .mdc-card{
        width: calc( 100% - 5px);
        height: 475px;
    }
    .collectionCard > .mdc-card.themeBg{
        height: 109px;
    }
    .collectionTitle h4{
        font-size: 26px;
    }

}

.theme1 {
    background: #086a96 url(../../img/logiciels/ObservTerre/bgImg/theme1.jpg) no-repeat center center;
    background-size: cover;
}

.theme2 {
    background: #69b3d2 url(../../img/logiciels/ObservTerre/bgImg/theme2.jpg) no-repeat center center;
    background-size: cover;
}

.theme3 {
    background: #139b4f url(../../img/logiciels/ObservTerre/bgImg/theme3.jpg) no-repeat center center;
    background-size: cover;
}

.theme4 {
    background: #1f9d92 url(../../img/logiciels/ObservTerre/bgImg/theme4.jpg) no-repeat center center;
    background-size: cover;
}

.theme5 {
    background: #923600 url(../../img/logiciels/ObservTerre/bgImg/theme5.jpg) no-repeat center center;
    background-size: cover;
}

.themeBg {
    background: #923600 url(../../img/logiciels/ObservTerre/bgImg/themeBg.jpg) no-repeat center center;
    background-size: cover;
}

.mdc-light{
    height: 50px;
}


.collectionTitle{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);;
}

.logoObs{
    width:85px;
    padding:10px;
    display: inline-block;
    position: relative;
}

#divNewObs:hover{
    cursor: pointer;
    opacity: 0.8;

}

#divDefaultMenu .fa-prefix::before,
#divReperesMenu .fa-prefix::before
{
    display: inline-block;  /* width */
    width: 15px;
    margin-right: 5px;
}

.closeWindow{
    cursor:pointer;
}

.observterre-context-menu
{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 0px;
    height: 0px;
    z-index: 50000;
}

.observterre-context-menu div.btn-group
{
    display: block;
    width: 0px;
    height: 0px;
}

/* bouton visible pour traiter la touche Échap */
.observterre-context-menu button.dropdown-toggle
{
    margin: 0;  /* initial */
    border-style: none;  /* initial */
    padding: 0;  /* initial */
    width: 0px;
    height: 0px;
}

.observterre-context-menu ul.dropdown-menu
{
    margin: 0;  /* initial */
}

.swal2-modal .swal2-content{
    text-align:left !important;
    line-height: 2.8rem !important;
    font-size: 16px !important;
}

.swal2-modal.swal2-show {
    max-width: 850px;
}

.btn.btnSonde,
.btn.btnReperes{
    padding: 0px 7px;
    margin: 0px 3px;
    color: #5a95b1;
    line-height: 1.8;
    background: #f1f1f1;
}

.btn.btnSonde:hover,
.btn.btnReperes:hover{
    border-color: #5a95b1;
}
.btn.btnSonde.active,
.btn.btnReperes.active{
    background-color: #5a95b1 !important;
    border: 1px solid #5a95b1 !important;
    color: white !important;
    font-weight: bold;
}

.btnRepereEdit{
    background-color:transparent;
    color:white;
    border: 1px solid transparent;
    margin: 2px 3px;
    padding: 3px 10px;
    box-shadow: none;
}

.btnRepereEdit:first-child{
    margin-left: 7px;
}

.btnRepereEdit.active{
    color: white;
    background-color: #5a95b1 !important;
    border-color:white !important;
}

.btnRepereEdit:hover,.btnRepereEdit:focus{
    color:white;
    font-weight: bold;
    border-color: white;
}

#reperesList{
    background: #545454;
}

#ulReperestMenu.arrowBotLeft::after,
#ulDefaultMenu.arrowBotLeft::after{
    top: 100%;
    left: 10px;
    border: solid transparent;
    content: " ";
    height: 0px;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgb(187 39 39 / 0%);
    border-top-color: #ffffff;
    border-width: 10px;
    margin-left: 5px;
}

#ulReperestMenu.arrowTopLeft::after,
#ulDefaultMenu.arrowTopLeft::after{
    bottom: 100%;
    left: 10px;
    border: solid transparent;
    content: " ";
    height: 0px;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgb(187 39 39 / 0%);
    border-bottom-color: #ffffff;
    border-width: 10px;
    margin-left: 5px;
}

#ulReperestMenu.arrowMiddleLeft::after,
#ulDefaultMenu.arrowMiddleLeft::after{
    bottom: 25%;
    left: 0px;
    border: solid transparent;
    content: " ";
    height: 0px;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgb(187 39 39 / 0%);
    border-right-color: #ffffff;
    border-width: 10px;
    margin-left: -20px;
}