/* NOTE!
   if there is custom styles just for current project put them in this file and sure to add this file in wro.xml
*/
/*------------------------------eTender Forms-----------------------------------*/
.print-button {
    margin: 10px;
    height: 190px;
    vertical-align: top;
    padding-top: 10px;
    width: 240px;
    color: #8e0730;
    text-align: center;
    cursor: pointer;
}
.print-button span {
    margin-top: 5px;
    min-height: 60px;
    display: inline-block;
    overflow-y: visible;
    font-weight: bold !important;
    text-align: center;
    font-size: 17px !important;
    padding: 0px 22px;
}
.print-button::after {
    font-family: 'Font Awesome 5 Pro' !important;
    margin-top: 0.1em;
    font-weight: 300;
    font-size: 5.5em;
    content: "\f1c1";
    color: #ff4141;
}
.print-button::after:hover{
    font-weight: 900
}

/*movaghat*/
#tabInfo{
    overflow-x:hidden !important;
}
.confirmedTd{
    background-color: #96ffa0;
}
/*-------------------------------FCTDS1009 , FCTDS1008------------------------*/
.tracing-text{
    margin-left:4px;
    width:20.6% !important;
    text-align:center;
    float: right;
}
/*-------------------------------FCTDS1013-------------------------------------*/
.general-help *{
    font-size: 14px !important;
    line-height: 2 !important;
}
.general-help strong *{
    font-weight: bold !important;
}
/*---------------------------FCTDS2013 selectItems----------------------------------*/
.circle-check {
    display: inline-block;
    border-radius: 50%;
    border: 5px solid rgba(0,0,0,0.1);
    background: white;
    vertical-align: middle;
    margin-right: 20px;
    width: 3em;
    height: 3em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border .3s ease;
}

.circle-checkbox:checked + .circle-check-text .circle-check {
    animation: check .5s cubic-bezier(0.895, 0.030, 0.685, 0.220) forwards;
}

.circle-checkbox:checked + .circle-check-text .circle-check .icon {
    opacity: 1;
    transform: scale(0);
    color: white !important;
    -webkit-text-stroke: 0;
    animation: icon .3s cubic-bezier(1.000, 0.008, 0.565, 1.650) .1s 1 forwards;
}

.circle-check i.icon {
    opacity: 0.2;
    font-size: 2em !important;
    color: transparent !important;
    transition: opacity .3s .1s ease;
    -webkit-text-stroke: 3px rgba(0,0,0,.5);
}

@keyframes icon {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes check {
    0% {
        width: 2.5em;
        height: 2.5em;
        border-width: 5px;
    }
    10% {
        width: 2em;
        height: 2em;
        opacity: 0.1;
        background: rgba(0,0,0,0.2);
        border-width: 15px;
    }
    12% {
        width: 2em;
        height: 2em;
        opacity: 0.4;
        background: rgba(0,0,0,0.1);
        border-width: 0;
    }
    50% {
        width: 3em;
        height: 3em;
        background: #00d478;
        border: 0;
        opacity: 0.6;
    }
    100% {
        width: 3em;
        height: 3em;
        background: #00d478;
        border: 0;
        opacity: 1;
    }
}
    .header-right h4{
        font-weight: bold !important;
        font-size: clamp(1.5rem, 1.5vmin, 7rem) !important;
        float: right;
        position: absolute;
        right: 110px;
        top: 0.5%;
    }
    .header-right img{
        float: right;
        position: absolute;
        right: 45px;
        top: 10px;
        width: 25%;
    }
    .header-user span{
        font-weight: bold;
        display: inline;
        font-size: clamp(1rem, 1vmin, 7rem) !important;
        font-weight: 400 !important;
    }


@media (min-width:2200px){
    .header-right h4{
        font-size: clamp(1rem, 1vmin, 7rem) !important;
    }
    .header-right img{
        width: 15%;
    }
    .header-user span{
        font-weight: 200 !important;
        font-size: clamp(0.8rem, 0.7vmin, 5rem) !important;
    }
}