/**
 * Fix fonts that render as bold in Firefox
 *
 * Put this near the top of your style.css
 * Before any overriding styles
 */
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 400;
}

html,body {
  height: 100%;
  background-color: rgba(37,46,72,1);
}

/**
 * Firefox specific rule
 */
@-moz-document url-prefix() {
  body {
    font-weight: lighter !important;
  }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
}

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/Montserrat.ttf) format("truetype");
}

@font-face {
    font-family: "Montserrat-Medium";
    src: url(../fonts/Montserrat-Medium.ttf) format("truetype");
}

@font-face {
    font-family: "Montserrat-SemiBold";
    src: url(../fonts/Montserrat-SemiBold.ttf) format("truetype");
}

p, div, a, span, td, input {
    font-family: Montserrat-Medium !important;
}

h1,h2, h3, h4, h5, h6, h7 .sidebar, thead {
    font-family: Montserrat-SemiBold !important;
}

tbody td {
    font-size: 12px;
}

thead th {
    font-size: 13px;
    font-family: Montserrat-SemiBold !important;
}

footer {
    position: absolute;
    text-align: center;
    bottom: 0;
    width: 100%;
    font-size: 13px;
}

input[type=text]:focus {
    box-shadow: none;
}

footer span {
text-decoration: underline;
}

footer span a {
    font-family: Montserrat-SemiBold !important;
    color: rgba(0,28,54,1) !important;
}

footer a: hover {
    color: rgba(0,28,54,1);
}

.mentions {
    font-size: 14px;
    padding-left: 30px !important;
}

div.dataTables_wrapper div.dataTables_length label {
    font-size: 12px;
}

select:focus, option:focus{
    box-shadow: none;
}

@media screen and (max-width: 1000px) {

    body {
        min-width: 750px;
    }
    body .content .sidebar {
        width: 100%;
        height: 100px;
        position: relative;
        min-height: 0;
    }

    body .content {
        min-width: auto;
    }
    body .mainContent {
        width: 100%;
        padding: 5px;
        margin: 0;
        min-height: 100%;
    }

    .longLine {
        display:none;
    }
    .smallLine {
        display: none;
    }

    body .home-content, .header, .row {
        margin: 0;
    }

    body .textContainerFull {
        margin: 0;
        text-align: left;
        padding-left: 5px;
    }

  body .logoContainer .textContainerFull {
    padding-left: 0;
    padding-top: 5px;
  }

  body .menuItem {
      text-align: center;
      float: left;
      width: 25%;
      padding-top: 10px;
      width: calc((100% - 170px) * 0.33);
      bottom: unset;
      position: relative;
  }

  body .navigationContainer {
       height: 50px;
       margin-top: 50px;
       width: calc((100% - 170px));
       position: absolute;
       margin-left: 170px;
       }

  body .menuItemContainer {
           width: 33%;
           float: left;
           padding: 0;
           height: 50px;
           padding-top: 5px;
           padding-left: 5px;
           margin-left: 0;
       }

   .menuItemContainer a, .textContainerFull a {
        text-align: center;
        margin-left: 10%;
        font-size: 12px;
   }

   body .logoContainer {
        height: 100px;
        width: 170px;
        margin-top: 0;
        }

    body .home-button {
        margin: 0;
    }

    body .usernameTextContainer {
        margin: 0;
        margin-top: 15px;
        text-align: center;
        font-size: 12px;
    }

    body footer {
        bottom: 0;
        width: 90%;
        text-align: center;
        margin-top: 40px;
        font-size: 13px;
    }

    body .alerte-body {
        width: 80%;
    }


}

@media screen and (min-width: 1000px) and (max-width: 1300px) {

    body .mainContent {
        width: calc(100% - 235px);
        padding: 10px;
        margin: 0;
    }
}

/*@media screen and (min-width: 1100px) and (max-width: 1200px) {
    .table td, .table th {
        padding: 5px;
    }

    .dropzone-wrapper, .dropzone {
        min-height: 240px !important;
    }
}

@media screen and (max-width: 1100px) {
    .table td, .table th {
        padding: 3px;
    }
}

*/

@media(max-width:1000px) {
    body .active a {
        font-size: 13px;
    }
}

.header {
    padding-top: 10px;
    margin-bottom: 2vh;
}

.active {
    background-color: rgba(241,243,247,1);
}

.active a {
        text-align: left;
        font-style: normal;
        font-weight: bold;
        /*font-size: 0.85vw;*/
        color: #252E48;
        text-decoration: none;
}

.sidebar .active a:hover {
   text-decoration: none;
   color: rgba(37,46,72,1);
 }

 a:hover {
    text-decoration: none;
  }

h4 {
    text-align: left;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    color: rgba(0,28,54,1);
    margin-bottom: 20px;
    margin-top: 20px;
    padding-left: 20px;
}

.whiteBody {
    background-color: rgba(255,255,255,1);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.whiteBody a {
    text-decoration: none;
    color: rgba(0,28,54,1);
}


thead {
    text-align: left;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    color: rgba(0,28,54,1);
    font-weight:bold;
}

.table thead tr th {
    border: none;
    padding: .7vw 0 .7vw .4vw;
}

.table td {
    padding: .7vh;
}

tbody {
        text-align: left;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        color: rgba(0,28,54,1);
}

.whiteBody h6 {
    text-align: left;
    font-style: normal;
    font-weight: bold;
    font-size: 15px;
    color: #707070;
}

.font-red {
    color: #B90505;
    font-weight: bold;
    margin-bottom: 0;
}

.uploadInfo {
    text-align: left;
    font-size: 13px;
    color: rgba(138,138,138,1);
    margin-left: 20px;
}

.dropzone-info p {
    text-align: center;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    color: rgba(138,138,138,1);
    margin-top: 5%
}

.fileUploadContainer {
    text-align: center;
}

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

.searchMarque {
    background-color: rgba(241,242,245,1);
    text-align: left;
    font-family: FontAwesome, Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    color: rgba(138,138,138,1);
    border-radius: 10px;
    border: none;
    width: 99%;
    margin: auto;
}

.loadButton {
    background-color: rgb(138, 138, 138);
    border: none;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    color: rgba(255,255,255,1);
    width: 200px;
    font-family: Montserrat-SemiBold !important;
}

.loadButtonReady {
    background-color: #F73E53;
}

.seeMore {
    width: auto;
    float: left;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    color: rgba(0,28,54,1);
    text-decoration: none;
    line-height: 1.2;
    margin-bottom: -15px;
    margin-top: 15px;
    float: right;
    border-bottom: 1px solid;
}

.uploadContainer {
    margin: 15px;
    margin-bottom: 50px;
    text-align: center;
}

.informations {
    background-color: blue;
}

.content {
    height: 100%;
    background-color: rgba(241,243,247,1);
    overflow-x: hidden;
    min-height: 100vh;
}

.mainContent {
    width: calc(100% - 230px);
    padding-left: 30px;
    padding-right: 30px;
    background-color: rgba(241,243,247,1);
    position: relative;
    padding-bottom: 50px;
    float:right;
    min-height: 100vh;
}

.sidebar {
    margin: 0;
    padding: 0;
    width: 230px;
    height: 100%;
    min-height: 550px;
    float: left;
    background: rgba(37,46,72,1);
    white-space: nowrap;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    color: rgba(255,255,255,1);
    position: fixed;
}

#poline-logo {
    color: white;
    font-family: Montserrat-SemiBold !important;
    font-size: 26px;
}

.menuItem {
    text-align: center;
    width:100%;
}

.menuItemContainer {
    width:100%;
    height: 25%;
    text-align: left;
    padding-top: 15px;
    margin-left: 10px;
    padding-left: 15px;
    padding-bottom: 10px;
}

.logoContainer {
    min-height: 12%;
    margin-top: 15px;
}

.usernameContainer {
    min-height: 9%;
}

.usernameTextContainer {
    margin-top: 20px;
    text-align: center;
    margin-left: 0;
    font-family: Montserrat-SemiBold !important;
}

.navigationContainer {
    min-height: 22%;
}

.adminContainer {
    min-height: 47%;
}

.logoutContainer {
    bottom: 0;
    margin-bottom: 20px;
    position: absolute;
    width: 230px;
}

.textContainerFull {
    width: 100%;
    text-align: left;
    margin-left: 10px;
    padding-left: 15px;
    padding-top: 15px;
    font-family: Montserrat-SemiBold !important;
    height: 50px;
}

svg {
    overflow: visible;
}

a {
    color: rgba(255,255,255,1);
        font-family: Montserrat-SemiBold !important;
}

.sidebar a:hover {
   text-decoration: none;
   color: rgba(255,255,255,1);
 }

.selectedMarque {
    border-radius: 10px;
    background-color: rgba(247,62,83,1);
    display: table;
    font-style: normal;
    font-weight: bold;
    font-size: 1.3vh;
    color: rgba(255,255,255,1);
    height: 3vh;
    margin-top: 5px;
    padding: 7px;
    padding-right: 15px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .dropzone, .dropzone:focus {
        margin-left: 0px !important;;
    }
}


.selectedMarque div {
    float: left;
    margin-left: 20px;
    color: rgba(255,255,255,1);
}

.clear {
    font-weight: bold;
    cursor: pointer;
    width: 15px;
    text-align: center;
    font-size: 25px;
    height: 18px;
    margin-top: -10px;
}

.filePreview, .counter {
    margin-top: 15px;
    color: black;
    font-weight: bold;
    width: auto;
    padding-top: 20px;
}

.file-preview {
    border: 1px solid;
    border-radius: 10px;
    display: table;
    margin: auto;
    margin-bottom: 5px;
    min-width: 240px;
    word-break: break-all;
    position: relative;
}

.file-name {
    float: left;
    margin-left: 15px;
    font-size: .8vw;
    width: calc(100% - 50px);
}

.clearFile {
    float: right;
    margin-left: 15px;
    width: 20px;
    height: 18px;
        /* vertical-align: middle; */
    font-size: 25px;
    margin-top: -10px;
}

.clearFile div {
    position:absolute;
}

.counter {
    float: left;
    margin-top: 25px;
    padding-left: 10px;
    padding-top: 0;
    width: 10%;
}

.alerte {
   padding-left: 10px;
   margin-left: 60px;
   margin-top: 10px;
}

.progress {
    width: 80%;
    height: 15px;
    float: left;
    margin-top: 30px;
}

#progressBar {
    width: 100%;
    border-radius: 10px;
}

.modal-dialog {
    margin-top: 15%;
    max-width: 800px;
}

.modal-info {
    background-color: rgba(241,243,247,1);
    text-align: center;
    font-size: 16px;
    border-radius: 15px;
}

.modal-item {
    margin: 25px;
    text-align: center;
}

.modal-body button{
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: nome;
    background-color: #252E48;
}

.error-file, .error-marque {
    color: rgba(247,62,83,1);
    font-size: 0.7vw;
    margin: 5px;
    text-align: left;
}

.smallLine {
    width: 90%;
    height: 2px;
    margin-left: 15px;
}

.home-button {
        margin-top: 18px;
}

.longLine {
    width: 280px;
    height: 2px;
}

.modal-body {
    text-align: left;
    margin-left: 15px;
}

.modal-body input[type=text], .modal-body select {
    float: right;
}

.modal-body span {
    text-align: left;
    margin-right: 5px;
}

.profiles-edit span {
    text-align: left;
    margin-right: 5px;
    float: left;
    font-size: 12px;
    width: 220px;
}

input#marque {
    background-image: url(../icons/recherche-popin-marque.png);
    background-repeat: no-repeat;
    background-position: 1vh;
    text-indent: 25px;
    height: 50px;
    background-size: 20px 20px;;
    height: 4vh;
}

.alerte p {
    font-size: 12px;
    margin-bottom: 0;
    word-break: break-word;
}

#upload-confirmation .modal-body {
    text-align: center;
}

#upload-confirmation .modal-dialog {
    max-width: 400px;
}

.alerte-body {
    padding:8px;
    max-width: 80%;
    float: left;
    color: rgba(0,28,54,1);
    min-width: 50%;
    border: 2px solid #E7E7F4;
}

.alerte h6 {
    color: rgba(0,28,54,1);
}

.login-footer {
    color: rgba(255, 255, 255, 1);
    width: 95% !important;
}

.login-footer a:hover {
    color: rgba(255, 255, 255, 1);
    font-family: Montserrat-SemiBold !important;
}

.no-ean {
    margin-top: 30%;
    margin-bottom: 30%;
    text-align: center;
    font-size: 14px;
    color: rgba(138, 138, 138, 1);
}

.no-ean div {
    margin-top: 20px;
}

.no-data-to-display {
    color: rgba(138, 138, 138, 1);
    font-size: 14px;
    padding-top: 10%;
    padding-bottom: 10%;
    text-align: center;
}

.hide-table {
    display: none;
}

.search-ean a{
    cursor: pointer;
    font-family: Montserrat-Medium !important;
}

.alerte-warning {
    width: 60px;
    float: left;
}

.alerte-warning img {
    margin: 10px;
    width: 45px
}

.logo-editis {
    float: right;
}

.dashboard-white-body {
    border: 2px solid #E7E7F4;
}

.dashboard-white-body-upload {
    height: 85%;
    border: 2px solid #E7E7F4;
}

.selectMarque h6, .uploadContainer h6 {
    color:  #F73E53;
}

.progressBarContainer {
    display: none;
}

.info-upload strong {
    color: rgba(0,28,54,1);
}

.email-if {
    text-decoration: underline;
}

.missing-metadata-error {
    width: 2.5vh;
}

.dashboard-epubheck-error {
    color:rgba(247,62,83,1) !important;
}

.marqueName {
    margin-right: 20px;
}

.logoContainer .textContainerFull {
    text-align: center;
    margin-left: 0;
    padding-left: 0;
}

.logoContainer .textContainerFull img {
    width: 40px;
}

.adminContainer .active {
    height: 50px;
}

.stretched-link {
    position: absolute;
    margin-left: calc(100% - 20px);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 15px;
}

.image-depot {
    width: 20px;
}

.alternative-files-table thead {
  display: table; /* to take the same width as tr */
  width: calc(100% - 17px); /* - 17px because of the scrollbar width */
}

.alternative-files-table tbody {
  display: block; /* to enable vertical scrolling */
  max-height: 200px; /* e.g. */
  overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}

.alternative-files-table th, .alternative-files-table td {
  width: 20%; /* to enable "word-break: break-all" */
  padding: 5px;
}

.alternative-files-table tr {
  display: table; /* display purpose; th's border */
  width: 100%;
  box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) */
}

.alternative-files-table td {
  border-bottom: none;
  border-left: none;
}

.blue-font {
    color: #1D7ED8 !important;
}

.form-control:focus, .form-control:active {
    box-shadow: none !important;
    outline: none !important;
    border-color: inherit !important;
}


.menu-icon {
    width: 20px;
}