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

* {
   font-family: 'Open Sans',serif !important;
}

/* Base */
a{
    color: blue;
    cursor: pointer;
}

textarea:focus, input[type="text"], input[type="textarea"]:focus, input[type="password"]:focus, input[type="email"]:focus{
    outline-color: transparent;
    outline-style: none;
}

textarea, input[type="text"], input[type="textarea"], input[type="password"], input[type="email"], input[type="date"] {
    height: 38px;
    padding: 6px 10px;
    background-color: #fff;
    border: 1px solid #D1D1D1;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
}
/* Layout */

html, body { height: 100% }

header .row {
    border-bottom: 1px solid #999;
}

header .logo{
    font-size: 22px;
    text-decoration: none;
    color: #333;
}

header .fixed-navitation > ul{
    text-align: right;
    width: 100%;
}

header .fixed-navitation > ul > li{
    text-align: left;
}

/* Module */

.inline-div{
    display: inline-block;
    vertical-align: top;
}

.float-right{
    float: right;
}

.center-text{
    text-align: center;
}

.login{
    padding: 0px 24px;
}

.login:not(:last-of-type){
    border-right: 1px solid #eee;
}

#home-page-banner{
    background: url("/images/cover.jpg");
    background-size: 851px;
    background-position: center;
    height: 315px;
    background-repeat: no-repeat;
}

.selection-component{
    cursor: pointer;
}

.popup-menu ul{
    text-align: right;
    width: 100%;
}

.popup-menu label{
    display: none;
}

#langauge-toggle{
    text-align: right;
    width: 100%;
}

.fixed-navitation  input[type="checkbox"]#drop-down{
    display: none;
}

.fixed-navitation .logo{
    display: none;
}

.fixed-navitation label[for="drop-down"]{
    display: none;
}

.fixed-navitation li, .popup-menu li{
    display:inline;
}
.fixed-navitation ul a, .popup-menu li a{
    color: #333;
    padding: 0 10px;
    text-decoration: none;
    font-weight: 400;
}

ul a:visited{
    color: #333;
}

header hr{
    margin-bottom: 12px;
}

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


    .fixed-navitation label[for="drop-down"]{
        display: inline-block;
        cursor: pointer;
    }

    .popup-menu ul {
        display: black;
        width: 100%;
        text-align: left;
        background-color: white;
    }

    .popup-menu ul li{
        display: inline-block;
        text-align: left;
        margin: 0px;
        padding: 12px 0px;
    }

    .popup-menu label{
        display: none;
        margin: 12px;
    }

    .fixed-navitation{
        position: fixed;
        top: 0px;
        right: 0px;
        z-index: 9;
        width: 100%;
        background-color: white;
    }

    header .fixed-navitation .logo, header .fixed-navitation label{
        display: inline-block;
        width: 48%;
        padding:  12px 0px;
    }

    header .fixed-navitation .logo{
        text-align: center;
    }

    header .fixed-navitation{
        border-bottom: 1px solid #ccc;
    }


    .fixed-navitation  ul {
        display: none;
        width: 100%;
        text-align: left;
        background-color: white;
    }
    .fixed-navitation ul li{
        display: block;
        text-align: center;
        margin: 0px;
        padding: 12px;
        border-bottom: 1px solid #ccc;
    }

    .fixed-navitation li:first-of-type{
        border-top: 1px solid #ccc;
    }

    .fixed-navitation li:last-of-type{
        border-bottom: 1px solid grey;
    }

    .fixed-navitation label{

        display: block;
        text-align: right;
    }
    .fixed-navitation  input[type="checkbox"]:checked ~ ul{
        display: block;
        position: absolute;
        right: 0px;
        width: 100%;

    }
    header hr{
    }

}


.popup div, .popup input[type="checkbox"]{
    display: none;
}
.popup  input[type="checkbox"]:checked + div{
    position: fixed;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    display: block;
    padding: 24px;
    background-color: rgba(111,111,111, .8);
    z-index: 9;
}
.popup .close{
    float: right;
    color: grey;
    clear: both;
}
.popup .close:hover{
    cursor: pointer;
}
.popup .popup-content{
    margin: 0 auto;
    display: block;
    z-index: 9;
    width: 300px;
    background-color: white;
    margin: 0 auto;
    text-align: center;
    padding: 24px;
}

#toggle-language{
    display: none;
}

#io-select-type .selection-component{
    text-align: center;
    padding: 6px;
    border-right: 3px solid white;
}

#io-wordcorp-order-app .is-selected{
    background-color: #149718;
    color: white;
    font-weight: 400;
}

#select-payment .selection-component{
    padding: 6px;
    font-size: 18px;
    line-height: 140%;
}

#select-payment img{
    padding: 6px;
    background-color: rgba(255,255,255, .8);
}

#select-payment .checkmark{
    border: 3px solid black;
}

#io-wordcorp-order-app .container{
    border-bottom: 1px solid #ccc;
}

#io-wordcorp-order-app  .container:first-of-type{
    border-top: 1px solid #ccc;
}

.language-combo-div{
    margin: .5px;
    text-align: left;
    width: 24%;
    min-width: 220px;
    display: inline-block;
    font-size: 14px;
    color: #555;
}
.language-combo-div:first-of-type{
    margin-top: 3px;
}

.language-combo-div .selection-component{
    padding: 6px;
}

#io-wordcorp-order-app .m-upload-submit{
    position: relative;
    display: inline-block;
    width: 100px;
    height: 40px;
    margin-bottom: 12px;
    color: grey;
}

#io-wordcorp-order-app .m-upload-submit > input[type="file"],
#io-wordcorp-order-app .m-upload-submit > input[type="submit"]{
    position: absolute;
    display: block;
    width: 140px;
    height: 40px;
    border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
    font-size: 16px;
    font-weight: 800;
    text-shadow: none;
    position: absolute;
    background-color: #eee  ;
    left:0px;
    top:2px;
    color: #555;
    -webkit-box-shadow: 0 8px 6px -6px #ccc;
       -moz-box-shadow: 0 8px 6px -6px #ccc;
            box-shadow: 0 8px 6px -6px #ccc;
    font-weight: 400;
}
#io-wordcorp-order-app  .m-upload-submit > input[type="file"]:hover{
    border-bottom: 3px solid red;
    cursor: pointer;
}

#io-wordcorp-order-app  .m-upload-submit > input[type="file"]{
    opacity: 0;
}

#io-wordcorp-order-app button, #workspace-project button{
    background-color: #eee;
    color: #555;
    border: 1px solid #aaa;
    border-radius: 4px;
    -webkit-box-shadow: 0 8px 6px -6px #ccc;
       -moz-box-shadow: 0 8px 6px -6px #ccc;
            box-shadow: 0 8px 6px -6px #ccc;
    font-weight: 400;
}


.popup-with-outclcik-to-close div, .popup-with-outclcik-to-close input[type="checkbox"]{
    display: none;
}

.popup-with-outclcik-to-close label:first-of-type{
    cursor: pointer;
}

.popup-with-outclcik-to-close  input[type="checkbox"]:checked ~ div{
    display: block;

    width: 400px;

    position: fixed;
    right: 50%;
    top: 100px;
    margin-right: -200px;

    padding: 24px;
    background-color: white;

     z-index: 9;
}


    @media screen and (max-width: 720px) {
        .popup-with-outclcik-to-close  input[type="checkbox"]:checked ~ div{
            display: block;

            width: 90%;

            position: fixed;
            right: 50%;
            top: 100px;

            padding: 5%;
            background-color: white;

             z-index: 9;
        }

    }

.popup-with-outclcik-to-close input[type="checkbox"]:checked ~ .outclick{
    display: block;
}

.outclick{
    display: none;

    position: fixed;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    background-color: rgba(111,111,111, .8);

    z-index: 9;
}

#io-wordcorp-order-app .selection-component{
    background-color: #f1f1f1;
}

#io-wordcorp-order-app .selection-component.is-selected{
    background-color: #D32F2F;
    color: white;
    font-weight: 400;
}

#my-project-list .project-details .columns:last-of-type{
    text-align: right;
}

#my-project-list .project-details{
    padding: 0px 0px 16px 0px;
    text-align: left;
}

.my-project{
    border-bottom: 0px solid #ddd;
    padding: 12px 0px;
}


#my-project-list .message-toggle-label{
    cursor: pointer;
}

#my-project-list .message-toggle{
    display: none;
}

#my-project-list .message-toggle ~ .message{
    display: none;
}

#my-project-list .message-toggle:checked ~ .message{
    display: block;
}

#my-project-list .message-toggle ~ .message-toggle-label:after{
    content: attr(data-more);
    float: right;
    font-size: 14px;
}

#my-project-list .message-toggle:checked ~ .message-toggle-label:after{
    content: "[☓]";
    float: right;
}

.my-project-details[data-status="1"]:before{
    position: relative;
    display: inline-block;
    width: 120px;
    left: -80px;
    top: 0px;
    content: "";
    color: rgb(240, 100, 70);
    color: #999;
    border-radius: 99px;
    font-weight: 800;
    margin-right: -122px;

}

.my-project-details span{
    font-size: 14px;
}

#login-registration label,
#login-registration a{
    cursor: pointer;
    text-decoration: underline;
    display: inline;
    padding: 0px 12px;
}

input[type="checkbox"]#register{
    display: none;
}
input[type="checkbox"]#forgot{
    display: none;
}

input[type="checkbox"]#forgot:checked ~ #forgot-wrapper, input[type="checkbox"]#register:checked ~ #register-wrapper{
    display: block;
}

input[type="checkbox"]#register:checked ~ #login-wrapper, input[type="checkbox"]#forgot:checked ~ #login-wrapper{
    display: none;
}

#register-wrapper{
    display: none;
}
#forgot-wrapper{
    display: none;
}

.my-project-details label[for="popup-line"]{
    display: inline-block;
}

.disclaimer, .small-font, .footer-text{
    font-size: 14px;
}

.white-frames{
    display: block;
    padding: 12px;
    background-color: #fff;
    border: 1px solid #bbb;
    border-radius: 5px;
    margin: 3px 0px;
}

.mt-1 {
    margin-top: 1em;
}

.mt-2 {
    margin-top: 2em;
}

.mt-3 {
    margin-top: 3em;
}

.btn-large {
    padding: 40px 20px 40px 20px;
}