/* HTML componants override */
body {
    background-color: #F6F6F6;
}

a {
    color : #3173BD;   /* AA  */
    color : #0A52A4;   /* AAA */
}

a:hover, a:focus {
    color : #23537D;   /* AAA */
}

code {
    color: #C7254E;
    color: #A6083B; /* AAA */
  /*  letter-spacing: 0.1em; */
    font-size: 1em;
    padding:0;
    -webkit-user-select: all; /* Chrome, Opera, Safari */
    -moz-user-select:    all; /* Firefox 2+ */
    -ms-user-select:     all; /* IE 10+ */
    user-select:         all; /* Standard syntax */
}

/* Bootstrap override */
.help-block, .has-error .help-block  {
    font-size : 12px;
    color: #5A5A5A; /* AA */
    color: #5A5151; /* AAA */
}
.alert-warning {
    color: #6c4a1e;
}
.alert-warning .alert-link {
    color: #6b4b0a;
}


/* Screen readers only */
    /* Bootstrap  */
    /* .sr-only{  position: absolute;
                  width:    1px;
                  height:   1px;
                  padding:  0;
                  margin:   -1px;
                  overflow: hidden;
                  clip:     rect(0 0 0 0);
                  border:   0;    } */
    /* https://www.ffoodd.fr/cache-cache-css/  */
    /* .sr-only{  -webkit-clip-path: inset(50%)         !important;
                  border:      0                        !important;
                  clip:        rect(1px, 1px, 1px, 1px) !important;
                  clip-path:   inset(50%)               !important;
                  height:      1px                      !important;
                  overflow:    hidden                   !important;
                  padding:     0                        !important;
                  position:    absolute                 !important;
                  width:       1px                      !important;
                  white-space: nowrap                   !important;   }   */

/* Form view*/
.color-value-hsl,
.color-value-rgb,
.color-value-hexa {
    -webkit-user-select: all; /* Chrome, Opera, Safari */
    -moz-user-select:    all; /* Firefox 2+ */
    -ms-user-select:     all; /* IE 10+ */
    user-select:         all; /* Standard syntax */
    /* font-family: Monaco,Menlo,Consolas,"Courier New",monospace; */
}




.noResult {
    text-align: center;
    font-size: 20px;
}

.h2-on-empty-result {
    margin-top: 70px;
}

#tested-color {
    font-size: 20px;
}

#notSatisfied {
    margin-top: 60px;
    text-align: center;
    font-size: 20px;
}


#initial-contrast {
    margin-bottom: 3px;
}

.cercle{
    float:right;
    width:100px;
    height:55px;
    border-radius: 0.3em;
    margin-right: 5px;
    border: solid 1px #CCC;
}

.text-sample {
    border: solid 1px #CCC;
}

.color-sample{
    width:7em;
    height:2.5em;
    border-radius: 0.3em;
    margin-right: 5px;
    padding: 0;
}

legend.control-fieldset  {
    border: none;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
}


.cf-group-fields {
    border: 1px solid #CCC;
    border-radius: 4px;
    padding: 1px 1px 1px 14px;
}

.radio.first-radio {
    padding-top: 0;
}

.highRatioCheckBox{
    padding-top:10px;
}

.invalid-color {
    color : #b94a48;
    display : none;
}
.sample-bordered {
    border : solid 1px #CCC;
}
.form-control.error {
    border-color: #b94a48;
}
.form-color-input {
    /* font-family: Cousine,monospace;  */
    /* font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; */
    /* font: 150% Consolas, Monaco, 'Andale Mono', 'Lucida Console', monospace; */
    font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
}
#currentRatio {
    display: flex;
}
    #isValidRatio {
        display: flex;
        flex-direction: column; /* direction d'affichage verticale */
        justify-content: center; /* alignement vertical */
        margin-right: 0.6em;
    }
    #currentRatioData {
        font-size: 150%;
    }

#submit-button {
    padding-left: 25px;
    padding-right: 25px;
}

@media (min-width: 1200px) {
    .invalid-color {
        margin-left: -15px;
        margin-top: 7px;
    }
}
@media (max-width: 1199px) {
    legend.control-fieldset  {
        text-align: left;
        margin-bottom: 0;
    }
    .color-sample {
        margin-left: 15px;
    }
    #submit-button {
        /* margin-left: 15px; */
    }
}
/*#scroll-test.affix {
    z-index: 1;
    position: fixed;
    top: 0px;
    background: linear-gradient(#f4f4f4,#f8f8f8);
}*/
#old-contrast.affix {
    z-index: 1;
    background-color: #f6f6f6;
    top : 0;
}
@media (min-width: 768px) {
    #old-contrast.affix {
        width: 750px;
    }
}

@media (min-width: 992px) {
    #old-contrast.affix {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    #old-contrast.affix {
        width: 1170px;
    }
}

.col01 {width:22%;}
.col02 {width:22%;}
.col03 {width:6%;}
.col05 {width:8%;}
.text-sample p {margin:0}

    .color-codes {
        font-size:0.95em;
        list-style: none;
        padding: 0;
    }
        .color-codes li {
            /* white-space: nowrap; */
        }

#image-reference {
    margin-left: 43.833333%;
}
@media screen and (min-width:1200px) {
    #image-reference {
        margin-left: 36.333333%;
    }
}
@media (max-width: 992px) {
    #image-reference {
        margin-left: 56.633333%;
    }
}

.help{
    margin-left:auto;
    margin-right:auto;
    max-width: 50em;
}

    .help h2{
        margin-top: 1.4em;
    }

    .help h3{
        margin-top: 1.4em;
    }

    .help h4{
        margin-top: 1.2em;
    }

/* footer template */
footer {
    padding-top: 0;
    text-align: center;
    margin-top: 120px;
    margin-bottom: 3em;
    border-top: none;
    font-size: 13px;
}

#footer-msg {
    /* text-align: left; */
    font-size: 18px;
}
#footer-copyright {
    margin-top: 6em;
}

/* header template */
.page-header {
    margin-top: 0;
}
    #header_title h1 {
        margin-top: 0;
        letter-spacing: 0.15em;
    }
    #header_title {
        margin-left: 13.5em;
        margin-top:  2em;
    }

#lang-switcher {
    text-align: right;
    position:relative;
    top: 0.5em;
}
    #lang-switcher ul {
        list-style-type: none;
    }
    #lang-switcher li {
        display:      inline-block;
        margin-right: 0.6em;
    }


.logo {
    float: right;
    width: 10%;
    padding: 5px;
    position: absolute;
}

#contrast-finder-logo {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 15px;
    margin-top: -20px;
}

    #contrast-finder-logo a:hover {
        opacity: .75;
    }
    #contrast-finder-logo img  {
        width: 100%;
        height: 100%;
        border:0;
    }


/* Color picker */
.colorPickerContainer {
    display: block;
    height: 100%;
    position: relative;
    -webkit-transition: opacity .1s;
    transition: opacity .1s;
    width: 100%;
}
    .colorPickerContainer svg {
        position: absolute;
        right: -2.8rem;
        top:0.8rem;
        pointer-events: none;
  /*      -webkit-transform: scale3d(.8,.8,1);
        transform: scale3d(.8,.8,1);*/
        -webkit-transition: -webkit-transform .1s;
        transition: -webkit-transform .1s;
        transition: transform .1s;
        transition: transform .1s,-webkit-transform .1s;
    }
    .colorPickerContainer input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: transparent;
        border: 0;
        cursor: pointer;
        height: 100%;
        opacity: 0;
        position: absolute;
        width: 140%;
        padding: 0;
        margin:  0;
    }
    .colorPickerContainer:focus,
    .colorPickerContainer:hover {
        opacity:.8
    }
    .colorPickerContainer:focus svg,
    .colorPickerContainer:hover svg {
        -webkit-transform:scale3d(1.5,1.5,1);
        transform:scale3d(1.5,1.5,1)
    }