/* ////////////////////////////////////////////////////////////////// */

@font-face {
    font-family: 'Pe-icon-7-stroke';
    src:url('../fonts/Pe/Pe-icon-7-stroke.eot?-9uki6c');
    src:url('../fonts/Pe/Pe-icon-7-stroke.eot?#iefix-9uki6c') format('embedded-opentype'),
        url('../fonts/Pe/Pe-icon-7-stroke.woff?-9uki6c') format('woff'),
        url('../fonts/Pe/Pe-icon-7-stroke.ttf?-9uki6c') format('truetype'),
        url('../fonts/Pe/Pe-icon-7-stroke.svg?-9uki6c#Pe-icon-7-stroke') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'BPGNinoMtavruliBold';
    src:url('../fonts/bpg_nino_mtavruli_bold-webfont.eot');
    src:url('../fonts/bpg_nino_mtavruli_bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/bpg_nino_mtavruli_bold-webfont.woff') format('woff'),
        url('../fonts/bpg_nino_mtavruli_bold-webfont.ttf') format('truetype');
    font-style: normal;
}

@font-face{
    font-family:'TBC Din Nusxuri';
    src:url("../fonts/tbcdin_nusxuri_medium-webfont.eot");
    src:url("../fonts/tbcdin_nusxuri_medium-webfont.eot?#iefix") format("embedded-opentype"),
        url("../fonts/tbcdin_nusxuri_medium-webfont.woff") format("woff"),
        url("../fonts/tbcdin_nusxuri_medium-webfont.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
}


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

body,
html {
    background: #edf0f5;
    font-family:'TBC Din Nusxuri';
    height: 100%;
}

/*---------------------------------------------*/

a {
    font-family: 'TBC Din Nusxuri';
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
}

a:focus {
    outline: none !important;
}

a:hover {
    text-decoration: none;
    color: #00b1ee;
}

/*---------------------------------------------*/

h1,h2,h3,h4,h5,h6 {
    /*margin: 0px;*/
}

p {
    font-family: BPGNinoMtavruliBold;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
}

ul, li {
    margin: 0px;
    list-style-type: none;
}


/*---------------------------------------------*/
input {
    outline: none;
    border: none;
}

textarea {
    outline: none;
    border: none;
}

select {
    outline: none;
    border: none;
}

textarea:focus, input:focus , select:focus{
    border-color: transparent !important;
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }

input::-webkit-input-placeholder { color: #999999; }
input:-moz-placeholder { color: #999999; }
input::-moz-placeholder { color: #999999; }
input:-ms-input-placeholder { color: #999999; }

textarea::-webkit-input-placeholder { color: #999999; }
textarea:-moz-placeholder { color: #999999; }
textarea::-moz-placeholder { color: #999999; }
textarea:-ms-input-placeholder { color: #999999; }

/*---------------------------------------------*/
button {
    outline: none !important;
    border: none;
    background: transparent;
}

button:hover {
    cursor: pointer;
}

iframe {
    border: none !important;
}


/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
    font-family: BPGNinoMtavruliBold;
    font-size: 13px;
    line-height: 1.5;
    color: #999999;
}

.txt2 {
    font-family: BPGNinoMtavruliBold;
    font-size: 13px;
    line-height: 1.5;
    color: #666666;
}


/*//////////////////////////////////////////////////////////////////
[ login ]*/

.limiter {
    width: 100%;
    margin: 0 auto;
}

.container-login100 {
    width: 100%;  
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: #00b1ee;
    background: -webkit-linear-gradient(-135deg, #124f67, #00b1ee);
    background: -o-linear-gradient(-135deg, #124f67, #00b1ee);
    background: -moz-linear-gradient(-135deg, #124f67, #00b1ee);
    background: linear-gradient(-135deg, #124f67, #00b1ee);
}

.wrap-login100 {
    width: 960px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;

    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 177px 130px 33px 95px;
}

/*------------------------------------------------------------------
[  ]*/
.login100-pic {
    width: 316px;
    padding: 130px 0;
}

.login100-pic img {
    max-width: 100%;
}


/*------------------------------------------------------------------
[  ]*/
.login100-form {
    width: 290px;
}

.login100-form-title {
    font-family: 'BPGNinoMtavruliBold';
    font-size: 24px;
    color: #333333;
    line-height: 1.2;
    text-align: center;

    width: 100%;
    display: block;
    padding-bottom: 54px;
}


/*---------------------------------------------*/
.wrap-input100 {
    position: relative;
    width: 100%;
    z-index: 1;
    margin-bottom: 10px;
}

.input100 {
    font-family: 'TBC Din Nusxuri';
    font-size: 15px;
    line-height: 1.5;
    color: #666666;

    display: block;
    width: 100%;
    background: #e6e6e6;
    height: 50px;
    border-radius: 25px;
    padding: 0 30px 0 68px;
}


/*------------------------------------------------------------------
[ Focus ]*/
.focus-input100 {
    display: block;
    position: absolute;
    border-radius: 25px;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 0px 0px;
    color: rgba(0, 177, 238, 0.8);
}

.input100:focus + .focus-input100 {
    -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
    animation: anim-shadow 0.5s ease-in-out forwards;
}

@-webkit-keyframes anim-shadow {
    to {
        box-shadow: 0px 0px 70px 25px;
        opacity: 0;
    }
}

@keyframes anim-shadow {
    to {
        box-shadow: 0px 0px 70px 25px;
        opacity: 0;
    }
}

.symbol-input100 {
    font-size: 15px;

    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    position: absolute;
    border-radius: 25px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 35px;
    pointer-events: none;
    color: #666666;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.input100:focus + .focus-input100 + .symbol-input100 {
    color: #00b1ee;
    padding-left: 28px;
}

/*------------------------------------------------------------------
[ Button ]*/
.container-login100-form-btn {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
}

.login100-form-btn {
    font-family: 'TBC Din Nusxuri';
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    text-transform: uppercase;

    width: 100%;
    height: 50px;
    border-radius: 25px;
    background: #00b1ee;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.login100-form-btn:hover {
    background: #333333;
}



/*------------------------------------------------------------------
[ Responsive ]*/



@media (max-width: 992px) {
    .wrap-login100 {
        padding: 177px 90px 33px 85px;
    }

    .login100-pic {
        width: 35%;
    }

    .login100-form {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .wrap-login100 {
        padding: 100px 80px 33px 80px;
    }

    .login100-pic {
        display: none;
    }

    .login100-form {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .wrap-login100 {
        padding: 100px 15px 33px 15px;
    }
}


/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input {
    position: relative;
}

.alert-validate::before {
    content: attr(data-validate);
    position: absolute;
    max-width: 70%;
    background-color: white;
    border: 1px solid #c80000;
    border-radius: 13px;
    padding: 4px 25px 4px 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 8px;
    pointer-events: none;

    font-family: 'TBC Din Nusxuri';
    color: #c80000;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;

    visibility: hidden;
    opacity: 0;

    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.alert-validate::after {
    content: "\f06a";
    font-family: FontAwesome;
    display: block;
    position: absolute;
    color: #c80000;
    font-size: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 13px;
}

.alert-validate:hover:before {
    visibility: visible;
    opacity: 1;
}



[class^="pe-7s-"], [class*=" pe-7s-"] {
    display: inline-block;
    font-family: 'Pe-icon-7-stroke';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.star_icon{
    font-size:10px; color:#66EAF3;
}

.line{
    background: #f7f9fa;
    height: 6px;
    background-image: -webkit-linear-gradient(left, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 35%, #3498db 35%, #3498db 45%, #62cb31 45%, #62cb31 55%, #ffb606 55%, #ffb606 65%, #e67e22 65%, #e67e22 75%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%);
    background-image: -moz-linear-gradient(left, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 35%, #3498db 35%, #3498db 45%, #62cb31 45%, #62cb31 55%, #ffb606 55%, #ffb606 65%, #e67e22 65%, #e67e22 75%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%);
    background-image: -ms-linear-gradient(left, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 35%, #3498db 35%, #3498db 45%, #62cb31 45%, #62cb31 55%, #ffb606 55%, #ffb606 65%, #e67e22 65%, #e67e22 75%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%);
    background-image: linear-gradient(to right, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 35%, #3498db 35%, #3498db 45%, #62cb31 45%, #62cb31 55%, #ffb606 55%, #ffb606 65%, #e67e22 65%, #e67e22 75%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%);
    background-size: 100% 6px;
    background-position: 50% 100%;
    background-repeat: no-repeat;
}

.logo{
    width:250px;
    margin-top:15px;
}

.pe-7s-signal{
    color:#00b1ee;
}

.submit{
    font-family:'TBC Din Nusxuri';
    color:#00b1ee;
}

th{
    text-align: center;
    font-family:'BPGNinoMtavruliBold';
    font-size:14px;
    color:#00b1ee;
}

td{
    text-align: center;
    font-family:'TBC Din Nusxuri';
}

.text-success, .fa-clock-o, .fa-times{
    font-size:18px;
    color:#00b1ee;
}

.fa-star{
    color:#f80;
}

.input-group{
    margin-top:10px;
}

legend{
    font-size:18px;
    color:#00b1ee;
    font-family:'BPGNinoMtavruliBold';
}
.pe-7s-close-circle, .pe-7s-edit, .pe-7s-look{
    font-size:25px;
}


@import url(https://fonts.googleapis.com/css?family=Expletus+Sans);

progress:not(value) {
    /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
    /* Get rid of the default appearance */
    appearance: none;

    /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
    border: none;

    /* Add dimensions */
    width: 100%; height: 20px;

    /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

    /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
    color: royalblue;

    position: relative;
    margin: 0 0 1.5em; 
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}

progress[value]::-webkit-progress-value {
    position: relative;

    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;

    /* Let's animate this */
    animation: animate-stripes 5s linear infinite;
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
    /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
    content: '';
    position: absolute;

    width:5px; height:5px;
    top:7px; right:7px;

    background-color: white;
    border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-image:
        -moz-linear-gradient( 135deg,
        transparent,
        transparent 33%,
        rgba(0,0,0,.1) 33%,
        rgba(0,0,0,.1) 66%,
        transparent 66%),
        -moz-linear-gradient( top,
        rgba(255, 255, 255, .25),
        rgba(0,0,0,.2)),
        -moz-linear-gradient( left, #09c, #f44);

    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;

    /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

    /* Dimensions should be similar to the parent progress element. */
    width: 100%; height:20px;
}

.progress-bar span {
    background-color: royalblue;
    border-radius: 3px;

    display: block;
    text-indent: -9999px;
}

p[data-value] { 

    position: relative; 
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after {
    content: attr(data-value) '%';
    position: absolute; left:0;
}



.css3::-webkit-progress-value,
.php::-webkit-progress-value 
{
    /* Gradient background with Stripes */
    background-image:
        -webkit-linear-gradient( 135deg,
        transparent,
        transparent 33%,
        rgba(0,0,0,.1) 33%,
        rgba(0,0,0,.1) 66%,
        transparent 66%),
        -webkit-linear-gradient( top,
        rgba(255, 255, 255, .25),
        rgba(0,0,0,.2)),
        -webkit-linear-gradient( left, #09c, #ff0);
}


/* Similarly, for Mozillaa. Unfortunately combining the styles for different browsers will break every other browser. Hence, we need a separate block. */

.html5::-moz-progress-bar,
.php::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-image:
        -moz-linear-gradient( 135deg,
        transparent,
        transparent 33%,
        rgba(0,0,0,.1) 33%,
        rgba(0,0,0,.1) 66%,
        transparent 66%),
        -moz-linear-gradient( top,
        rgba(255, 255, 255, .25),
        rgba(0,0,0,.2)),
        -moz-linear-gradient( left, #09c, #f44);
}

.css3::-moz-progress-bar,
.php::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-image:
        -moz-linear-gradient( 135deg,
        transparent,
        transparent 33%,
        rgba(0,0,0,.1) 33%,
        rgba(0,0,0,.1) 66%,
        transparent 66%),
        -moz-linear-gradient( top,
        rgba(255, 255, 255, .25),
        rgba(0,0,0,.2)),
        -moz-linear-gradient( left, #09c, #ff0);
}

/* THE END */

#topbuttons {
    padding-top: 15px;
    float: right;
    text-align: right;
}

.table_title{
    color:#00b1ee;
    font-size:16px;
    font-family:'BPGNinoMtavruliBold';
    padding: 0 15px;
}

.company_item {
    border-radius:8px;
    vertical-align: middle;
    background:#fff;
    padding:25px;
    border:1px dashed #00b1ee;
}

/* STATUS'S */

.status_item {
    font-weight: bold;
}

.newtask {
    color:#D50000;
    padding-right:15px;
    font-weight: bold;
}

.currenttask {
    color:#F9A825;
    padding-right:15px;
    font-weight: bold;
}

.completedtask {
    color: #43A047;
    font-weight: bold;
}

/* LOGIN */ 


.category_image {
    max-width: 100%;
}

#iferror {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    text-align: center;  
}

#iferror {
    background: #D50000;
}

#iferror .iferror_in {
    display: inline-block;
    color: #fff;
    font-family:'BPGNinoMtavruliBold';
    font-size: 22px;
    padding: 20px 0;
    padding-top:25px;
}


/* Large Devices, Wide Screens */
@media only screen and (max-width : 1199px) {

    #logo {
        text-align: center;
        margin-bottom: 20px;
    }

    #topbuttons {
        float: none;
        text-align: center;
    }

}

@media (max-width: 992px) {
    .alert-validate::before {
        visibility: visible;
        opacity: 1;
    }
}

@media (max-width: 768px) {
    #topbuttons a {
        font-size: 0;
    }

    #topbuttons a i {
        font-size: 14px;
    }

}