#logo {
    background: url('./../images/template/logo.jpg') no-repeat;
    background-size: 209px;
    height: 52px;
    width: 240px;
    display: inline-block;
}
menu .caret, #myd_top .caret {
    background: url('./../images/template/arrow-menu.png') no-repeat;
    height: 13px;
    width: 14px;
    border: none;
}

#fd-title-small {
    background: url('./../images/template/fd-title-small.png') no-repeat;
    height: 71px;
    width: 180px;
    display: inline-block;
    border: none;
    margin: 20px 20px 20px -13px;
    padding-top: 20px;
    color: white;
    text-align: center;
    line-height: 0.55em;
}

#fd-title-large {
    background: url('./../images/template/fd-title-large.png') no-repeat;
    height: 71px;
    width: 600px;
    padding: 15px 0 0 16px;
    display: inline-block;
    border: none;
    margin: 20px 20px 20px -13px;
    color: white;
    text-align: left;
    line-height: 1em;
}

#fd-title-large p {
    margin: 0 0 2px !important;
}

#fd-title {
    background-color: #444446;
    border-radius: 0px 40px 40px 0px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    height: 66px;
    width: 233px;
    display: inline-block;
    border: none;
    margin: 20px 20px 20px 0px;
    padding-top: 15px;
    color: white;
    font-size: 0.9em;
    line-height: 0.6em;
    padding-left: 8px;
    text-align: left;
}

/* buttons */

.btn-myd, .btn-mydinv, .btn-mydinv:hover, .btn-myd:hover {
    color: #404042;
    font-weight: bold;
    background: url('./../images/template/btn.png') no-repeat;
    height: 31px;
    min-width: 196px;
    border: none;
    display:inline-block;
    text-align: center;
}

.btn-small-myd, .btn-small-mydinv, .btn-small-mydinv:hover, .btn-small-myd:hover {
    color: #404042;
    font-weight: bold;
    background: url('./../images/template/btn-small.png') no-repeat;
    height: 31px;
    width: 50px;
    border: none;
    display:inline-block;
}

.btn-middle-myd, .btn-myddle-mydinv, .btn-middle-mydinv:hover, .btn-middle-myd:hover {
    color: #404042;
    font-weight: bold;
    background: url('./../images/template/btn-middle.png') no-repeat;
    height: 31px;
    width: 100px;
    border: none;
    display:inline-block;
}

.btn-large-myd, .btn-large-mydinv, .btn-large-mydinv:hover, .btn-large-myd:hover {
    color: #404042;
    font-weight: bold;
    background: url('./../images/template/btn-large.png') no-repeat;
    height: 31px;
    width: 340px;
    border: none;
    display:inline-block;
}

.btn-myd, .btn-small-myd, .btn-middle-myd, .btn-large-myd  {
    background-position: left top;
}

.btn-myd:hover, .btn-small-myd:hover, .btn-middle-myd:hover, .btn-large-myd:hover {
    background-position: left bottom;
    text-decoration:none;
    cursor:pointer;
}

.btn-mydinv, .btn-small-mydinv, .btn-middle-mydinv, .btn-large-mydinv {
    background-position: left bottom;
}

.btn-mydinv:hover, .btn-small-mydinv:hover, .btn-middle-mydinv:hover, .btn-large-mydinv:hover {
    background-position: left top;
    text-decoration:none;
    cursor:pointer;
}

.myd_div_loading{
    background: url('../images/loading.gif') no-repeat center center;
}

.myd_div_loading_logo{
    background: url('../images/logo/logo.png') no-repeat center center;
}


#animation .loader-source {
    background: url('../images/loader-source.gif');
    background-repeat:no-repeat;
}

#animation .loader-cible {
    background: url('../images/loader-cible.gif');
    background-repeat:no-repeat;
}

#animation-myddleware-back-1 > .animation-myddleware-logo {
    background: url('../images/logo/text.png');
}

#animation-myddleware-back-2 > .animation-myddleware-logo {
    background: url('../images/logo/up.png');
}

#animation-myddleware-back-3 > .animation-myddleware-logo {
    background: url('../images/logo/down.png') right top;
}

#animation .arcleft-c  {
    background: url('../images/template/left-arc-color.png') no-repeat right;
    height: 165px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#animation .arcleft-g  {
    background: url('../images/template/left-arc-gray.png') no-repeat right;
    height: 165px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#animation .arcright-c  {
    background: url('../images/template/right-arc-color.png') no-repeat left;
    height: 165px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#animation .arcright-g  {
    background: url('../images/template/right-arc-gray.png') no-repeat left;
    height: 165px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#animation .animation-myddleware-logo {
    background-size: 105px 105px;
    background-repeat: no-repeat;
}

#animation .animation-content-left-toggle-btn, #animation .animation-content-right-toggle-btn {
    background: #CACACA;
    background-image: url('../images/data.png');
    background-size: 15px 22px;
    background-position: 10px 5px;
    background-repeat: no-repeat;
}

/* Documents list form (with filters) */
#document-list-form {
    margin-bottom: 2vh;
    padding: 2em;
}


/* CUSTOM BUTTON BOOSTRAP */

.btn-outline-success:hover{
    background-color: #19ca42 !important;
    color:white !important;
}

.btn-outline-success{
    color: #19ca42 !important;
    border-color: #19ca42 !important;
}

.btn-outline-primary:hover{
    background-color: #198BCA !important;
    color:white !important;
}

.btn-outline-primary{
    color: #198BCA !important;
    border-color: #198BCA !important;
}

.btn-primary {
	background-color: #198BCA!important;
	border-color: #198BCA!important;
}


.btn-primary:hover {
	background-color: #0F66A9!important;
	border-color: #0F66A9!important;
} 

.btn{
    border-radius: 25px !important;
}

.typewriter {
    font-size: 3rem;
    display: inline-block;
    overflow: hidden;
    border-right: .15em solid #000;
    white-space: nowrap;
    margin: 0;
    letter-spacing: .15em;
    animation: typing 3s steps(28, end), blink-caret 0.75s step-end infinite;
    width: 0;
    animation-fill-mode: forwards;
}

@keyframes typing {
    from { width: 0; }
    to { width: 28ch; }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #000 }
}

@keyframes hideCursor {
    to {
        border-right: transparent;
    }
}

.btn {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

i.fa-sharp.fa-solid.fa-arrow-right.fa-flip.fa-flip {
    animation-duration: 3s;
    animation-iteration-count: 2; 
}