/*
    Rediteq Oy
    Campus CSS
    Tähän tiedostoon kerätään kaikki campus-spesifiset CSS tyylit.

    Kaikkien tyylien kuuluu käyttää rq- etuliitettä, jotta ne ovat tunnistettavissa.
    xxx
*/

.loading
{
    background-color: #fff;
    height: 100%;
    width: 100%;
}

.tooltip {
    font-weight:normal;
}

.rq-left 
{
    float:left;
}

.rq-right 
{
    float:right;
}

.rq-inline-block {
    display:inline-block;
}

.rq-legend {
    display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:40px;color:#333333;border:0;border-bottom:1px solid #e5e5e5;
}

.rq-border, .rq-control-box {
    border:1px solid #ccc;
    padding:10px;
}

.rq-control-box {
    margin-bottom:10px;
}

.page-header.rq-page-header {
    padding-bottom:0;
}

.rq-no-bottom-margin {
    margin-bottom:0;
}
.rq-no-wrap {
    white-space:nowrap;
}
.rq-legend small {
    font-size: 15px;
    color: #999999;
}

.rq-break-word 
{
    word-break:break-word;
}

.rq-rounded-corner {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

tr.rq-selectable {
    cursor: pointer;
}

.rq-ylapalkissaOikealle
{
    float: right;
    margin-right: 10px;
}

@media (min-width: 980px) and (max-width: 1199px) {
    .rq-menuKutistus {
        display: none;
    }
}

.rq-subMenuHeading 
{
    color: #cccccc; 
    font-weight: bold; 
    padding-left: 6px;
    padding-right: 6px;
    white-space: nowrap;
}

.rq-subMenu 
{
    padding-left: 18px;
}

.rq-pyoristettyLaatikko
{
    display: block;
    /*border: 1px solid #000000;*/
    border: 1px solid #ccc !important;
    padding: 8px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    clear: both;
}

/* Tämän on tarkoitus korvata read only kentät jotta ei tarvitse välittää pituudesta.  */
.rq-readOnlyTeksti
{
    background-color: #eee;
    border: 1px solid #ccc !important;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 4px;
    margin: 2px 0px;
    word-wrap: break-word;
    word-wrap: hyphenate;
    white-space: pre-wrap;
    min-height: 10px;
    vertical-align: middle;
}

.rq-displayBlock
{
    display: block;
}

.rq-displayInlineBlock
{
    display: inline-block;
}

.rq-rowPadding
{
    padding-bottom: 8px;
}


.rq-searchResult 
{
    font-weight: bold;
    outline: none;
}

.rq-searchBox span {
    overflow: hidden;
    display:block;
}

.rq-searchBox span.badge {
    display:inline-block;
}
.rq-searchBox .dropdown-menu {
    left: auto;
    right: -45px;
}

.rq-searchBox input {
    border-radius: 4px 0 0 4px;
}

.rq-searchBox .rq-scopedSearchSelector {    
    float: right;
    border: 1px solid #cccccc;
    /*text-align: right;*/
}

.rq-searchBox .rq-scopedSearchSelector a {    
    padding: 4px 15px;
    line-height: 28px;
    text-decoration: none;
}

.rq-searchButton {
    float:right;
    border-radius: 0 4px 4px 0;
    padding-left: 15px;
    padding-right: 15px;
}

.rq-searchOmat {
    float:right;
    margin-left: 1em;
}

.rq-search .close {
    margin-right: 8px;
    margin-top: 3px;
    z-index: 2;
    position:relative;
}

.rq-blur {
   color: transparent !important;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}



/* Kontrollien status luokat */
textarea.rq-saving,input.rq-saving,.rq-readOnlyTeksti.rq-saving {
    border-color: #2d6987;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #7ab5d3;
}
textarea.rq-saved,input.rq-saved,.rq-readOnlyTeksti.rq-saved {
    border-color: #356635;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #7ABA7B;
}

textarea.rq-error,input.rq-error,.rq-readOnlyTeksti.rq-error {
    border-color: #953b39;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #d59392;
}
label.radio input.rq-saving {
    box-shadow: 0 0 3pt 2pt #2d6987;
    outline: none;
}
label.radio input.rq-saved {
    outline: none;
    box-shadow: 0 0 3pt 2pt #356635
}
label.radio input.rq-error {
    box-shadow: 0 0 3pt 2pt #953b39;
    outline: none;
}

select.rq-error {
    border-color: #953b39;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #d59392;
}


/* Ilmoituslaatikko */
.rq-ilmoituslaatikko
{
    background-clip: padding-box;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #c0c0c0;
    padding: 10px;
    margin-bottom: 15px;
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

    .rq-ilmoituslaatikko h1, .rq-ilmoituslaatikko h2, .rq-ilmoituslaatikko h3, .rq-ilmoituslaatikko h4, .rq-ilmoituslaatikko h5, .rq-ilmoituslaatikko h6
    {
        margin: -10px -10px 10px -10px;
        background-color: #F7F7F7;
        /*padding-left: 10px;
        padding-right: 10px;*/
        padding: 8px 10px;
        -moz-border-radius: 5px 5px 0px 0px;
        -webkit-border-radius: 5px 5px 0px 0px;
        border-radius: 5px 5px 0px 0px;
        border-bottom: 1px solid #c0c0c0;
    }

    .rq-ilmoituslaatikko ul
    {
        margin: 0 0 0 0;
        list-style-type: none;
        line-height: 16px;
    }

    .rq-ilmoituslaatikko li
    {
        clear: both;
    }

.rq-ilmoituslista-item-teksti
{
    float: left;
    margin-left: 5px;
}

.rq-ilmoituslista-item-arvo
{
    float: right;
    margin-right: 10px;
}

.rq-ilmoituslaatikko-viiva
{
    border-bottom: 1px solid #c0c0c0;
    padding-top: 10px;
    margin-bottom: 10px;
}


/* Otsikollinen laatikko */

.rq-otsikkoLaatikko
{
    background-clip: padding-box;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #c0c0c0;
    padding: 0px 10px 10px 10px;
    margin-bottom: 15px;
    position: relative;
}

    .rq-otsikkoLaatikko .rq-otsikko
    {
        border-bottom: 1px solid #C0C0C0; 
        border-right: 1px solid #C0C0C0; 
        border-radius: 6px 0 6px 0; 
        color: #9DA0A4; 
        background-color: #F5F5F5; 
        font-size: 12px; 
        font-weight: bold; 
        display:inline-block; 
        margin-left:-10px; 
        margin-bottom:0.6em; 
        padding: 3px 7px;
    }

    .rq-otsikkoLaatikko .rq-otsikko.text-error{
        color: #B94A48;
    }

    .rq-otsikkoLaatikko.rq-eiOtsikkoa
    {
        padding-top: 10px;
    }

    .rq-otsikkoLaatikko .rq-footer
    {
        margin: 10px -10px -10px -10px;
        -moz-border-radius: 0px 0px 6px 6px;
        -webkit-border-radius: 0px 0px 6px 6px;
        border-radius: 0px 0px 6px 6px;
        border-top: 1px solid #c0c0c0;
        padding: 10px;
        background-color: #C0DAE2; /* F5F5F5 */
    }

        .rq-otsikkoLaatikko .rq-footer > div
        {
            float: right;
        }




.rq-clickoverFooter {
    margin: 0px;
    -moz-border-radius: 0px 0px 6px 6px;
    -webkit-border-radius: 0px 0px 6px 6px;
    border-radius: 0px 0px 6px 6px;
    border-top: 1px solid #c0c0c0;
    padding: 10px;
    background-color: #C0DAE2; /* F5F5F5 */
    margin: 5px -15px -10px -15px;
}

    .rq-clickoverFooter div
    {
        float: right;
    }
    

.rq-poistaX {
    cursor: pointer;
    color: #9d261d;
    font-size: 20px;
    font-weight: bold;
    /*line-height: 20px;*/
    text-shadow: 0 1px 0 #FFFFFF;
}


/* Karuselli kontrolli */

.rq-karuselliPaneeli
{
    min-height: 30px;
    margin-left: 70px;
    margin-right: 70px;
}

.rq-karuselliValintaNapit
{
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 20px;
}

/* Korostetut laatikkorivit */

.rq-korostettuLaatikko {
    display:inline-block;
    word-wrap: break-word;
        
    vertical-align:top; 
    border: 1px solid #ccc; 
    -webkit-box-shadow: 3px 3px 4px #333;
    box-shadow: 3px 3px 4px #333;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 12px 10px;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}

    .rq-korostettuLaatikko .rq-poista {
        cursor: pointer;
        color: #9d261d;
        font-size: 20px;
        font-weight: bold;
        line-height: 20px;
        text-shadow: 0 1px 0 #FFFFFF;
        margin-top: -3px;
        margin-right: -3px;
        float: right;
        padding-left: 10px;
    }

.rq-laatikkoRivit
{
    margin-left: 0px;
}

    .rq-laatikkoRivit > li
    {
        line-height: 30px;
        padding: 5px;
        border: 1px solid #ccc !important;
        -webkit-box-shadow: 3px 3px 4px #333;
        box-shadow: 3px 3px 4px #333;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        margin-bottom: 8px;
        clear: both;
    }


ul.rq-laatikkoLista {
    list-style: none;
    margin-left: 0px;
    padding: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-auto-rows: auto;
    align-items: start;
    /* Antaa tilaa varjolle. */
    margin-right: 7px;
    margin-bottom: 7px;
}

    ul/*.rq-laatikkoLista*/ > li .rq-poista {
        cursor: pointer;
        color: #9d261d;
        font-size: 20px;
        font-weight: bold;
        line-height: 20px;
        text-shadow: 0 1px 0 #FFFFFF;
        margin-top: -3px;
        margin-right: -3px;
        float: right;
        padding-left: 10px;
    }


    ul.rq-laatikkoLista > li {
        cursor: pointer;
        word-wrap: break-word;
        
        vertical-align:top; 
        border: 1px solid #ccc; 
        -webkit-box-shadow: 3px 3px 4px #333;
        box-shadow: 3px 3px 4px #333;
        -moz-border-radius: 0.25rem;
        -webkit-border-radius: 0.25rem;
        border-radius: 0.25rem;
        padding: 12px 10px;

        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	    box-sizing: border-box; 
        position: relative;
        transition: opacity .25s ease-in-out, box-shadow .15s ease-in-out, font-size .3s ease-in-out;
        margin-bottom:2px;
    }

    ul.rq-laatikkoLista > li:hover:not(.rq-flat):not(.rq-plain), ul.rq-laatikkoLista > li.rq-selected {
        box-shadow: 12px 12px 16px #333;
        border-width: 2px;
        border-color: #ffc107;
        margin-bottom:0px;
    }


    ul.rq-laatikkoLista > li.rq-flat {
        -webkit-box-shadow: none;
        box-shadow: none;
        cursor: default;
    }


    ul.rq-laatikkoLista > li.rq-plain {
        border: none; 
        -webkit-box-shadow: none;
        box-shadow: none;
        cursor: default;
        border-radius: unset;
        box-shadow: none;
        padding:0px;
    }

    ul.rq-laatikkoLista.rq-listaNakyma {
        grid-template-columns: 1fr;
    }

    ul.rq-laatikkoLista > li.rq-doubleWide {
        grid-column-end: span 2;
    }

    @media (min-width: 961px) and (max-width: 1400px) {
        ul.rq-laatikkoLista {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }

    @media (min-width: 601px) and (max-width: 960px) {
        ul.rq-laatikkoLista {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 600px) {
        ul.rq-laatikkoLista {
            grid-template-columns: 1fr;
        }

        ul.rq-laatikkoLista > li.rq-doubleWide {
            /*width: calc(100% - 7px);*/
            grid-column-end: span 1;
        }
    }
   
/*https://paper-leaf.com/blog/2014/09/targeting-ie-10-11-browsers-css/ */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
   ul.rq-laatikkoLista > li {
        display:inline-block;
        width: calc(33.33333% - 21px); /*23.5%; */
        margin-bottom: 10px;
        margin-right: 7px;
    }
}


    ul.rq-laatikkoLista > li.rq-plain {
        border: none; 
        -webkit-box-shadow: none;
        box-shadow: none;
        cursor: default;
        border-radius: unset;
        box-shadow: none;
        padding:0px;
    }
    
/*<div class="rq-clickyHand"><i class="fa fa-hand-pointer-o"></i></div>*/
.rq-clickyHand {
    position: absolute;
    bottom: 1px;
    right: 1px;
    opacity: 0.6;
    font-size: 1.5em;
}
.rq-flat .rq-clickyHand {
    display: none;
}

hr.rq-fadingLine {
    margin: 6px 0px;
    border: 0;
    height: 1px;
    background: #333;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(0,0%,0%,0)), color-stop(50%,hsla(0,0%,0%,.75)), color-stop(100%,hsla(0,0%,0%,0)));
    background: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.4) 50%, hsla(0,0%,0%,0) 100%);
    background:    -moz-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.4) 50%, hsla(0,0%,0%,0) 100%);
    background:     -ms-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.4) 50%, hsla(0,0%,0%,0) 100%);
    background:      -o-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.4) 50%, hsla(0,0%,0%,0) 100%);
    background:         linear-gradient(to right, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.4) 50%, hsla(0,0%,0%,0) 100%);
}


ul.rq-koulutusalaLista {
    list-style: none;
    margin-left: 0px;
}
    
    ul.rq-koulutusalaLista li {
        display:inline-block; 
        width: 31.5%;
        margin: 0px 1% 0.5em 0px;
        word-wrap: break-word;
    }

    @media (max-width: 1060px) {
        ul.rq-koulutusalaLista li {
            width: 48.5%;
            margin-right: 1%;
        }
    }

    @media (max-width: 500px) {
        ul.rq-koulutusalaLista li {
            width: 100%;
            /*margin-right: 1%;*/
        }
    }

.rq-kysymysRivi {
    overflow: hidden;
    padding-top: 4px !important;
}

.rq-kysymysRivi .rq-fullLength {
    overflow: hidden;
    padding: 4px;
}

.rq-kysymysRivi textarea {
    resize: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 24px;
    min-height: 50px;
    margin-bottom: 0px;
}

.rq-kysymysRivi ul {
    list-style: circle;
}

.rq-kysymysRivi ul .rq-valintaRivi {
    margin-top: 6px;
}

.rq-kysymysRivi ul .rq-valintaRivi .input-append {
    display: inline-block; 
    margin-bottom: 0px; 
    vertical-align: middle; 
    width: 100%;
}

.rq-kysymysRivi .rq-poista, .rq-materiaaliRivi .rq-poista
{
    cursor: pointer;
    color: #9d261d;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    text-shadow: 0 1px 0 #FFFFFF;
}

    .rq-kysymysRivi .rq-poista.rq-siirraYlospain, .rq-materiaaliRivi .rq-poista.rq-siirraYlospain
    {
        width: 20px;
        text-align: center;
        margin-top: -3px;
    }


/*ul.rq-nimiLista{
    list-style: none;
}

    ul.rq-nimiLista li{
        display:inline-block; 
        width: 220px;
        padding: 5px 8px;  
    }*/

/* Button bar, esim. datagridview:n ylä- ja alanapit */
div.rq-button-bar 
{
    margin-top:10px;
    margin-bottom:10px;
}

/* Lisää marginia ylös */
.rq-prepend-top 
{
    margin-top:1em;
}
/* Lisää marginia alas */
.rq-append-bottom 
{
    margin-bottom:1em;
}

.rq-append-bottom-half {
    margin-bottom:0.5em;
}

.rq-append-right {
    margin-right: 0.6em;
}
.rq-append-left {
    margin-left: 0.6em;
}

.rq-toolbar {
     line-height: 40px;
     margin-bottom: 1em;
}

/* Korjaa kuvan keskittämisen */
p > img.rq-fix-image, td>img.rq-fix-image 
{
    padding-bottom:2px;
}

div.rq-ajax-loader
{
    height:100%;
    width:100%;
    background-image:url('../img/ajax-loader.gif');
    background-position: center center;
    background-repeat:no-repeat;
    opacity:1;
    filter:alpha(opacity=100); /* ie */
    -moz-opacity: 1; /* mozilla */
}

div.rq-ajax-loader.rq-ajax-loader-small
{
    background-size: 32px auto;
}

.rq-user-name 
{
    font-weight:bold;
}
.rq-user-name.rq-luettu
{
    font-weight:inherit;
}

.rq-clear
{
    clear:both;
}

.rq-bold 
{
    font-weight:bold;
}


.rq-sunkenPanel 
{
    padding: 12px 35px 12px 14px;
    background-color: #ddd;
    border: 1px solid #ccc;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow:    inset 2px 2px 3px 1px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: inset 2px 2px 3px 1px rgba(0, 0, 0, 0.7);
    box-shadow:         inset 2px 2px 3px 1px rgba(0, 0, 0, 0.7);
}

    .rq-sunkenPanel.rq-panelGreen 
    {
        background-color: #DFF0D8;
        color: #468847;
    }

    .rq-sunkenPanel.rq-panelRed 
    {
        background-color: #F2DEDE;
        color: #B94A48;
    }

/* Tätä tarvitaan responsiivisia iframe videoita varten, esim. youtube. */
.rq-videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.rq-videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Keskustelukomponentti */
.rq-keskustelu .rq-comment-add{overflow:hidden;}
.rq-keskustelu .rq-comment-content-footer{font-size:.8em;color:gray;}
.rq-keskustelu .rq-comment-delete{float:right;font-size:.8em;}
.rq-keskustelu .rq-comment-delete a{color:#38A4D5;}
.rq-keskustelu .rq-comment-delete a:hover{color:#167BA7;text-decoration:none;}
.rq-keskustelu .rq-comment-image{float:left;width:40px;}
.rq-keskustelu .rq-comment-text{padding-top:3px;padding-bottom:10px;word-wrap:break-word;}
.rq-keskustelu .rq-keskustelu-commenter-container{background-color:#eee;padding: 10px 7px 7px 10px;}
.rq-keskustelu .rq-keskustelu-list{list-style-type:none;margin:0;padding:0;}
.rq-keskustelu .rq-keskustelu-list-item{margin-top:1px;line-height:normal!important;padding:5px 5px 4px;}
.rq-keskustelu .rq-keskustelu-scrollable{overflow:auto;-webkit-overflow-scrolling: touch}

.rq-keskustelu.rq-keskustelu-tiny .rq-comment-content-body{font-size:11px;line-height:14px;}
.rq-keskustelu.rq-keskustelu-tiny .rq-comment-text{padding:0;}

.rq-keskustelunOmistaja:before {
    content: "*";
}
.rq-keskustelu .rq-user-name + .rq-user-name:before {
    content: ", ";
}
.rq-keskustelu .rq-user-name + .rq-user-name.rq-keskustelunOmistaja:before {
    content: ", *";
}

.rq-keskusteluModal {
    max-height: 90%; 
    top: 5% !important; 
    margin-top:10px; 
    overflow-y:auto;
}

/* Files component */
/*.rq-files-toolbar {

}*/

.k-state-selected .rq-resourcelist-link {
    color: white;
}

.k-state-selected:hover > td > a.rq-resourcelist-link {
     color:  #0088cc;
}
.k-state-selected:hover > td {
    background-color : lightskyblue !important;
}
.k-state-selected:hover  {
    background-color : lightskyblue !important;
}

.folderContentListView {
    overflow-y: scroll;
    overflow-x: hidden;    
}

.rq-flst-itemrow {        
    padding-top: 8px;
    padding-right: 5px;
    padding-left: 5px;
    display:flex;
    align-items:center; /* vertical */
}
.rq-flst-btn-small{
    margin-top: -3px;
}

.rq-flst-itemrow:hover {
    background-color: #f5f5f5;
}

.rq-heading-name {
    cursor: pointer
}

.rq-heading-type {
    cursor: pointer
}

.rq-heading-modified {
    cursor: pointer
}

.rq-notification-body {
    background-color: #5bb75b; /* #49afcd;*/ 
    color: white;
}
.rq-italic {
    font-style: italic;
}
.rq-toolbar-actionbuttons {
    position:absolute;
    right: 20px;
    top:15px;
}
.rq-toolbar-actionbuttons a {
    margin:2px;
}


/* ^ Files component ^ */


.rq-keskustelijaFilter .rq-user-name + .rq-user-name:before {
    content: ", ";
}


/* Notification */
.rq-row-item:hover
{
    background-color:#d9edf7;
}

.rq-desktopOikealle {
    float: right !important;
    margin-left:5px !important;
    margin-bottom: 10px;
}
@media (max-width: 767px) {
    .rq-desktopOikealle {
        float: none !important;
    }
}


.rq-maxWidthMedium {
    max-width: 600px;
}

.rq-maxWidthLarge {
    max-width: 800px;
}

.rq-maxWidthExtraLarge {
    max-width: 900px;
}

.rq-maxHeightMinus200 {
    -webkit-overflow-scrolling: touch;
}

/* CSS luokka joka säätelee kontrollin maximi korkeutta riippuen ruudun koosta. */
@media screen and (min-height: 400px) {
    .rq-maxHeightMinus200 {
        max-height: 200px;
    }
}

@media screen and (min-height: 500px) {
    .rq-maxHeightMinus200 {
        max-height: 300px;
    }
}

@media screen and (min-height: 600px) {
    .rq-maxHeightMinus200 {
        max-height: 400px;
    }
}

@media screen and (min-height: 700px) {
    .rq-maxHeightMinus200 {
        max-height: 500px;
    }
}

@media screen and (min-height: 800px) {
    .rq-maxHeightMinus200 {
        max-height: 600px;
    }
}

@media screen and (min-height: 900px) {
    .rq-maxHeightMinus200 {
        max-height: 700px;
    }
}

@media screen and (min-height: 1000px) {
    .rq-maxHeightMinus200 {
        max-height: 800px;
    }
}

@media screen and (min-height: 1100px) {
    .rq-maxHeightMinus200 {
        max-height: 900px;
    }
}

.rq-maxHeightMinus300 {
    -webkit-overflow-scrolling: touch;
}

/* CSS luokka joka säätelee kontrollin maximi korkeutta riippuen ruudun koosta. */
@media screen and (min-height: 400px) {
    .rq-maxHeightMinus300 {
        max-height: 200px;
    }
}

@media screen and (min-height: 500px) {
    .rq-maxHeightMinus300 {
        max-height: 200px;
    }
}

@media screen and (min-height: 600px) {
    .rq-maxHeightMinus300 {
        max-height: 300px;
    }
}

@media screen and (min-height: 700px) {
    .rq-maxHeightMinus300 {
        max-height: 400px;
    }
}

@media screen and (min-height: 800px) {
    .rq-maxHeightMinus300 {
        max-height: 500px;
    }
}

@media screen and (min-height: 900px) {
    .rq-maxHeightMinus300 {
        max-height: 600px;
    }
}

@media screen and (min-height: 1000px) {
    .rq-maxHeightMinus300 {
        max-height: 700px;
    }
}

@media screen and (min-height: 1100px) {
    .rq-maxHeightMinus300 {
        max-height: 800px;
    }
}

/* Bootstrap korjaukset - Tämä hajoittaa normaalin formin. 2013-07-23 TJ */
/*.controls .input-append {
    padding-bottom:10px;
}*/

#loader {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}

/* Bootstrap kustomointia */

/* 
   Poistetaan input-appendin display:block, koska virhetekstit eivät voi tällöin tulla elementin vierelle. 
   Varmistettu, että vain controls-luokan alta. 2013-07-23 TJ 
*/
.controls>.input-append 
{
    display:inline-block;
}

a:focus {
    outline: none;
}

.navbar .nav .dropdown a
{
    padding-left: 6px;
    padding-right: 6px;
}

.navbar-text a:hover, a.navbar-text:hover {
    color: #333333;
    text-decoration: none;
}

/* Dropdown toggle caret */
.navbar .nav li.dropdown .dropdown-toggle .caret,
.navbar .nav li.dropdown.open .caret
{
    border-top-color: #0088CC;
    border-bottom-color: #0088CC;
}


/* Estetään textarean menemistä yli parent containerin. */

.rq-staticFullWidth
{
    max-width: 100%;
    min-width: 100%;
}

.rq-shadow-box
{
    box-shadow: 1px 1px 2px #333;
    -moz-box-shadow: 1px 1px 2px #333;
    -webkit-box-shadow: 1px 1px 2px #333;
}

.rq-btn {
 	margin: .5em 0;
	padding: .7em 1em;
	display: block;
	position: relative;
	text-align: center;
	overflow: hidden;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media (min-width:768px) {
    .rq-btn {
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

.rq-btn-icon-left {
	padding-left: 2.5em;
}

.rq-btn-icon-left:after
{
	content: "";
	position: absolute;
	display: block;
	width: 22px;
	height: 22px;
}

.ui-btn-icon-left:after 
{
	top: 50%;
	margin-top: -11px;
}

.rq-btn-icon-left:after {
	left: .5625em;
}

.rq-checkbox {
    position:relative;
}

.rq-checkbox-on {
    background-color: #d9edf7;
}

.rq-checkbox input {
	position: absolute;
	left: .466em;
	top: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 0;
	outline: 0 !important;
	z-index: 1;
}

.rq-checkbox .rq-btn {
    margin: 0;
	text-align: left;
	/*z-index: 2;*/
}


.rq-component-heading, .rq-component-heading:hover
{
    /*background-color: #0F3B85;*/
    text-decoration: none;
    color: #ffffff;
    -moz-border-top-right-radius: 4px;
    -moz-border-top-left-radius: 4px;
    -webkit-border-radius-topleft: 4px;
    -webkit-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #2A94C3;
    background: -moz-linear-gradient(center top, #38A4D5, #167BA7);
    background: -webkit-linear-gradient(top, #38A4D5, #167BA7);
    background: -ms-linear-gradient(top, #38A4D5, #167BA7);
    background: -o-linear-gradient(top, #38A4D5, #167BA7);
    background-repeat: repeat-x;
}


/* Koulutusnimikkeen käsittelyssä käytettyjä tyylejä. */
.rq-kasittely textarea {
    resize: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 24px;
    min-height: 50px;
}


textarea.rq-autosize {
    resize: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 24px;
    min-height: 50px;
}

.rq-inlineControls {
        position:relative;
        margin-bottom:1em;
}
.rq-inlineControls textarea, .rq-inlineControls input {
        margin-bottom: 0px;
}
.rq-inlineControls textarea:focus ~ .rq-saveOptions {
    display: block;
}
.rq-saveOptions:hover {
    display:block;
}
.rq-saveOptions {
    display:none;
    position:absolute; 
    right:0px; 
    top:100%;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 3px;
    outline: none;
    border-top:none;
    border-radius: 0 0 3px 3px;
    z-index: 1;
}

textarea.rq-error,input.rq-error {
    border-color: #953b39;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #d59392;
}
li.rq-error {
    border-color: #953b39;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #d59392;    
}

.rq-kasittely .rq-undo {
    float: right;
    z-index: 2;
    position: relative;
}

.rq-kasittely .rq-close {
    float: right;
    z-index: 2;
    position: relative;
    margin-left: 2px;
}

.rq-kasittely .accordion-heading .rq-undo{
    margin-top: 3px;
    margin-right: 3px;
    margin-left:5px;
}

.rq-kasittely .accordion-heading .rq-close{
    margin-top: 3px;
    margin-right: 3px;
}

.rq-kasittely .rq-otsikkoLaatikko {
    z-index: 1;
}

.rq-kasittely .rq-feedback{
    float: right;
    margin-top:5px; 
    margin-right:1em;
}

.accordion-group .rq-feedback {
    color:#fff;
    font-weight:normal;
    float:right;
}

.rq-kasittely .error.help-inline {
    margin-top: -4px;
    margin-bottom: 1em;
    padding-left: 0px;
    color: #B94A48;
}


ul.rq-nakyma-otsikot {
    list-style: none;
    margin-left: 0px;
}

    ul.rq-nakyma-otsikot li {
        display: inline-block;
        width: 14%;
        margin-right: 1%;
        overflow: hidden;
    }

    ul.rq-nakyma-otsikot li:first-child {
        margin-left: 31%;
    }

    ul.rq-nakyma-otsikot li:last-child {
        margin-right: 0%;
    }

ul.rq-nakyma-ominaisuus {
    list-style: none;
    margin-left: 0px;
}
    ul.rq-nakyma-ominaisuus li {
        vertical-align: top;
        display: inline-block;
        width: 14%;
        margin-right: 1%;
    }

    ul.rq-nakyma-ominaisuus li:first-child {
        width: 29.5%;
    }

    ul.rq-nakyma-ominaisuus label {
        display: none;
    }

    ul.rq-nakyma-ominaisuus select {
        width: 100%;
        outline: none;
    } 

    ul.rq-nakyma-ominaisuus select.rq-saved {
        border-color: #356635;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #7ABA7B;
    }



@media (max-width: 767px) {
    ul.rq-nakyma-otsikot {
        display:none;
    }

    ul.rq-nakyma-ominaisuus {
        display: inline-block;
        margin-right: 1%;
        background-clip: padding-box;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        border: 1px solid #c0c0c0;
        padding: 0px 15px 10px 15px;
        margin-bottom: 15px;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    ul.rq-nakyma-ominaisuus li {
        display: block;
        width: 100%;
        margin-right: 1%;
        overflow: hidden;
    }

    ul.rq-nakyma-ominaisuus li:first-child {
        width:initial;
        border-bottom: 1px solid #C0C0C0; 
        border-right: 1px solid #C0C0C0; 
        border-radius: 6px 0 6px 0; 
        color: #9DA0A4; 
        background-color: #F5F5F5; 
        font-size: 12px; 
        font-weight: bold; 
        display:inline-block; 
        margin-left:-15px; 
        margin-bottom:0.6em; 
        padding: 3px 7px;
    }

    ul.rq-nakyma-ominaisuus label {
        display: block;
    }

    ul.rq-nakyma-ominaisuus select {
        width: 150px;
    }
}


/* Koulutuspuun ikonien käsittelyä */
.rq-kurssinAlityyppiIkoni {
    /*color: #FFCC00;  Dark yellow*/ 
    color: #EF9A3A; /*Dark orange*/
    /*font-size: 1.2em;*/
}

.rq-passivoituKoulutusnimikeIkoni {
    color: #a94442;
}
.rq-koulutuspuuFade {
    font-size: 0.8em;
    color: #999;
}


/* Vanhasta masterpage.css tiedostosta kopioituja */
/* Loader */
div.ajax_loader
{
    background: url(../kuvat/ajax-loader.gif) no-repeat center;
    background-color:#fff;  
}

/* RadTreeList */
.radtreelist-row
{
    height: 35px;
    vertical-align: middle !important;
    cursor: pointer;
}

.row-red
{
    background-color: #FFC3CE;
}

.row-green
{
    background-color: #D6E3B5;
}

.row-yellow
{
    background-color: #FFEC94;
}

/*Nämä tyylit ylikorjoittavat bootstrapin tyylejä telerikin reportvieweriin kiinnitettynä*/
div.rq-reportviewer select
{
    line-height:20px;
    height: 27px;
    padding: 2px 6px;
    margin-bottom: 0px;
    margin-top: -4px;
}

div.rq-reportviewer input[type=text]
{
    padding: 2px 6px;
}

/* Telerik overwrite */
/*.ui-datepicker {
    z-index:1000 !important;
}*/

.k-widget.k-treeview {
  color: inherit;
}

a.aspNetDisabled {
    text-decoration:none;
}

.RadTabStripTop_Metro .rtsLevel1
{
    background-color: White !important;
}

.RadTabStripTop_Metro .rtsLevel1 .rtsLink
{
    border-color: transparent !important;
    padding-top: 3px;
    padding-bottom: 3px;
}
          
.RadTabStrip_Metro .rtsLevel1 .rtsUL
{
    background-color: White !important;
} 
          
.RadTabStrip_Metro .rtsLevel1 .rtsUL .rtsIn
{
    color: #0088CC;
} 
          
.RadTabStrip_Metro .rtsLevel1 .rtsUL .rtsSelected
{
    border-color: #DDDDDD #DDDDDD transparent !important;
    -moz-border-top-right-radius: 4px;
    -moz-border-top-left-radius: 4px;
    -webkit-border-radius-topleft: 4px;
    -webkit-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
} 
          
.RadTabStrip_Metro .rtsLevel1 .rtsUL .rtsSelected .rtsIn
{
    color: #555555;
}

.popover {
    color: black !important;
}

/* Sprites */
.icong { background: url(../img/sprites.png) no-repeat; }
.icong-course { width: 16px; height: 17px; background-position: 0 0; }
.icong-unspecific { width: 16px; height: 16px; background-position: 0 -18px; }

/* Logos */
[class^="logo-"], [class*=" logo-"] {
    display: inline-block;
    width: 64px;
    height: 64px;
    line-height:14px;
    vertical-align:text-top;
}

.logo-hy { 
    background: url(../img/logos/hy_logo.png) no-repeat;
    background-size:64px;
}

.rq-valinnainen{
  background-color: #fcf8e3;
}

.rq-question-row {
    margin: 6px;
}
.rq-question-row:nth-child(odd) {
    background-color: #F5F5F5;
    padding-top: 10px
}

/* start: merkinnät-komponentin tyylit */
.rq-osallistuminen {
    padding:7px 20px 7px 20px
}

.rq-suoritus {
    padding:7px 20px 7px 20px
}
.rq-poistamerkinta {
    padding:7px 20px 7px 20px;
    margin-left: 10px
}
.rq-hyvaksymispvmlabel {
    color:#51A351;
    font-style:italic;
    width: 75px;
    height: 16px;
    display: inline-block;
}
.rq-koAloitettu {
    color: #51A351;
    font-style: italic;    
    height: 16px;
    display: inline-block;
}
.rq-hyvaksymistaustavari {
    background-color: lightgreen
}
.rq-hylatyntaustavari{
    /*background-color:#F89406;*/
    background-color:rgba(248,148,6,0.4);
}
.rq-paluuKoulutuspuuhun{
    
    margin-bottom: 6px;
}

/* end: merkinnät-komponentin tyylit */

/* stacked ja flat nav-lista */
.rq-flatLaatikkoLista > li {
  float: none;
}
.rq-flatLaatikkoLista > li > a {
  margin-right: 0;
}
.rq-flatLaatikkoLista {
  border-bottom: 0;
  list-style: outside none none;
  margin-left:0;
  
}
.rq-flatLaatikkoLista > li  {
  border: 1px solid #ddd;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  padding: 8px 12px 8px 12px;
  /*padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 12px;
  padding-left: 12px;*/
  line-height: 20px;
  
}
.rq-flatLaatikkoLista > li.rq-otsikko {
    border: none
}

.rq-flatLaatikkoLista > li:hover {
  border-color: #ddd;
  z-index: 2;
      background-color: #eeeeee;
}
.rq-flatLaatikkoLista > li.rq-otsikko {
    display: block;
    padding: 3px 15px;
    font-size: 11px;
    font-weight: bold;
    line-height: 20px;
    color: #999999;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.rq-done {
    color:green;
}
.rq-export {
    margin-bottom: 6px;
    margin-left:4px;
}

.rq-poistakysmys {
    color:#9D261D;
    cursor: pointer;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}



/* Aikajana komponentin ylikirjoitetut css tyylit. */

.rq-aikajana .vis-item {
    background-color: #f89406;
    color: #ffffff;
    border-color: #c07416;
}
/* Sallitaan tekstin menevän yli laatikon aikajanassa.*/
.rq-aikajana.rq-zoomOverflow .vis-item .vis-item-overflow {
    overflow: visible;
}
.rq-aikajana.rq-zoomOverflow .vis-item, .rq-aikajana .vis-item.vis-selected  {
    color: #006596;
}

.rq-aikajanaDetail {
    border: 1px solid #c07416;
    border-top: 0px;
    border-radius: 0px 0 6px 6px;
    padding: 0px 10px 10px 10px;
    float:left;
}

    .rq-aikajanaDetail .rq-otsikko
    {
        border-bottom: 1px solid #c07416; 
        border-right: 1px solid #c07416; 
        border-radius: 0px 0 6px 0; 
        color: #006596; 
        background-color: #fff785; 
        font-size: 12px; 
        font-weight: bold; 
        display:inline-block; 
        margin-left:-10px; 
        margin-bottom:0.6em; 
        padding: 3px 7px;
    }


    


/* Pie Chart */
.rq-pie {
    min-width:47px;
}
.rq-pie svg {
    border: 2px solid black;
    -webkit-box-shadow: 0px 0px 0px 3px white, -8px 8px 5px 0px rgba(0,0,0,.75);
    -moz-box-shadow: 0px 0px 0px 3px white, -8px 8px 5px 0px rgba(0,0,0,.75);
    box-shadow: 0px 0px 0px 3px white, -8px 8px 5px 0px rgba(0,0,0,.75); /*-5px 5px 5px 0px rgba(0,0,0,0.75);*/
    width: 40px; height: 40px;
    transform: rotate(-90deg);
    background: white;
    border-radius: 50%;
}
.rq-pie svg text {
    font-family: FontAwesome;
    font-size: 1.5em;
    fill: #167ba7;
}

.rq-pie svg circle {
    fill: white;
    stroke: #167BA7;
    stroke-width: 31.7px;
}

.rq-pie.rq-pieSelected svg {
    /*border: 3px solid orange;*/
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 0px 3px orange, -8px 8px 5px 0px rgba(0,0,0,.75);
    -moz-box-shadow: 0px 0px 0px 3px orange, -8px 8px 5px 0px rgba(0,0,0,.75);
    box-shadow: 0px 0px 0px 3px orange, -8px 8px 5px 0px rgba(0,0,0,.75); /*-5px 5px 5px 0px rgba(0,0,0,0.75);*/
}

.rq-pieSpinner {
    animation: piespin 1.5s linear infinite;
}

@keyframes piespin {
    100% {
        transform:rotate(270deg)
    }
}