﻿html,body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
body {
    background-color: #DADADA;
    overflow:hidden;
}
textarea[readonly],
input[readonly]{
    background-color:#F5F5F5!important;
}

a{
color: rgba(0, 0, 0, 0.87);
}

.ui.dropdown > input:not(.search):first-child, .ui.dropdown > select
{
    /*display: block!important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    color: #fff;
    background-color: #fff;
    background-color:aqua;*/
}
select:required:invalid,
input:required:invalid{
}

.ui.form .fields .field:first-child {
    padding-left: 0.25em;
}

.field .ui.checkbox{
    margin-top:0.6em;
}
.ui[class*="left icon"].input > input[type=date][required]{
    padding-right: 2.5em!important;
}
.hidden{
    display:none;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.template{
    display:none!important;
}
.template-clone{
}
.template-clone.bottom{
    padding: 0 0 0.5em 0;
    margin: 0 0 0.5em 0;
    border-bottom:1px dotted #e0e1e2;
}
.full-width,
.size-100,
.field-hint{
    width:100%!important;
}
.field, .input, label, input, select, td{
    max-width:100%!important;
}
.field .pointing.label.left{
    margin-left:0;
}


.field.extra-small, .input.extra-small, label.extra-small, input.extra-small, select.extra-small, td.extra-small, th.extra-small{
    width:3rem!important;
}
.extra-small.button-size{
    border:1px solid red!important;
    width:2rem!important;
    min-width:2rem!important;
}
.field.small, .input.small, label.small, input.small, select.small, td.small, th.small{
    width:5rem!important;
}
.field.small-medium, .input.small-medium, label.small-medium, input.small-medium, select.small-medium, td.small-medium, th.small-medium{
    width:6rem!important;
}
.field.small-large, .input.small-large, label.small-large, input.small-large, select.small-large, td.small-large, th.small-large{
    width:10.5rem!important;
}
.field.medium, .medium.input, label.medium, input.medium, select.medium, td.medium, th.medium{
    width:12.5rem!important;
}
.field.medium-small, .input.medium-small, label.medium-small, input.medium-small, select.medium-small, td.medium-small, th.medium-small{
    width:13.5rem!important;
}
.field.medium-medium, .input.medium-medium, label.medium-medium, input.medium-medium, select.medium-medium, td.medium-medium, th.medium-medium{
    width:14.5rem!important;
}
.field.medium-large, .input.medium-large, label.medium-large, input.medium-large, select.medium-large, td.medium-large, th.medium-large{
    width:17rem!important;
}
.field.medium-extra-large, .input.medium-extra-large, label.medium-extra-large, input.medium-extra-large, select.medium-extra-large, td.medium-extra-large, th.medium-extra-large{
    width:18rem!important;
}
.field.medium-huge, .input.medium-huge, label.medium-huge, input.medium-huge, select.medium-huge, td.medium-huge, th.medium-huge{
    width:20rem!important;
}
.field.large, .input.large, label.large, input.large, select.large, td.large, th.large{
    width:21.5rem!important;
}
.field.large-small, .input.large-small, label.large-small, input.large-small, select.large-small, td.large-small, th.large-small{ 
    width:23.5rem!important;
}
.field.large-medium, .input.large-medium, label.large-medium, input.large-medium, select.large-medium, td.large-medium, th.large-medium{
    width:25.5rem!important;
}
.field.large-large, .input.large-large, label.large-large, input.large-large, select.large-large, td.large-large, th.large-large{
    width:26.5rem!important;
}
.field.extra-large, .input.extra-large, label.extra-large, input.extra-large, select.extra-large, td.extra-large, th.extra-large{
    width:32rem!important;
}
.field.huge, .input.huge, label.huge, input.huge, select.huge, td.huge, th.huge{
    width:34rem!important;
}
.field.huge-small, .input.huge-small, label.huge-small, input.huge-small, select.huge-small, td.huge-small, th.huge-small{
    width:38.5rem!important;
}
.field.huge-medium, .input.huge-medium, label.huge-medium, input.huge-medium, select.huge-medium, td.huge-medium, th.huge-medium{
    width:43rem!important;
}
.field.huge-large, .input.huge-large, label.huge-large, input.huge-large, select.huge-large, td.huge-large, th.huge-large{
    width:48rem!important;
}
.field.extra-huge, .input.extra-huge, label.extra-huge, input.extra-huge, select.extra-huge, td.extra-huge, th.extra-huge{
    width:64rem!important;
}
.dropdown input{
    width:100%!important;
}
.overwrite-icon i{
    position:absolute;
    z-index:15!important;
}
.overwrite-icon input{
    padding-left: 3rem!important;
}
.overwrite-icon .text{
    padding-left:2rem!important;
}
.overwrite-icon .menu{
    z-index:999!important;
}
.dropdown-hidden{
    display:none!important;
}

/*** *****************************************************************************************/
.menu a{
    color: rgba(0,0,0,.87);
}
.footer{

}
.container{
}
.container-row{
    margin-bottom:1rem;
}
.preloader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index:99999;
}
.preloader .progess-container{
    margin:10% auto;
    width:30%;
    max-width:200px;
    padding:2%;
    background: #ffffff;
    border: 1px solid rgba(34, 36, 38, 0.15);
    box-shadow: none;
    border-radius: 0.40rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.87);
    border-collapse: separate;
    border-spacing: 0px;
}
.preloader .progess-container img{
    width:100%;
}

/*** l4d **************************************************************************************************/
.l4d-header-caption{
    background-color: #E0E1E2;
    color: #000000;
    padding: 0.51em;
}

/*** l4d menu**************************************************************************************************/
.l4d-menu{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:0.25em 0;
    z-index:9999;
}
.l4d-menu img{
    max-height:2.5em;
}
.l4d-menu-popup{
    /*max-width: 780px!important;*/
}
/*** l4d Modals **************************************************************************************************/
.ui.page.dimmer,
.l4d-modal{
    padding-top:80px;
    z-index:3000;
}
/*** l4d navigator **************************************************************************************************/
.l4d-navigator{
    position: fixed;
    right: 2%;
    bottom: 1rem;
    z-index:2000;
}
/*** l4d Form **************************************************************************************************/
.l4d-form{
    margin: 7rem 0 0 0;
}
.l4d-modal .l4d-form{
    width:80%;
    margin:auto;
}

.l4d-form.small{
    max-width:800px;
}
.l4d-form.medium{
    max-width:1000px;
}
.l4d-form.large{
    max-width:1200px;
}
.l4d-form form{

}
.l4d-form .l4d-navigator{
}


/*** l4d Wizard **************************************************************************************************/
.l4d-wizard{
}
.l4d-wizard-header{
}
.l4d-wizard form{
}
.l4d-wizard .steps{

}
.l4d-wizard .steps .step,
.l4d-wizard .steps .step *{
    user-select:none;
    cursor: pointer!important;
}
.l4d-wizard-step{
    margin:0 0 10em 0!important;
}
.l4d-wizard-step .title{
    font-size:1.5em;
}
.l4d-wizard-step.hidden{
    display:none;
}
.l4d-wizard .l4d-navigator{
}
.l4d-wizard.horizontal .l4d-wizard-header {
    position:relative;
}
.l4d-wizard.vertical .l4d-wizard-header {
    position:relative;
    margin-right:5px;
    width:18%;
    float:left;
}
.l4d-wizard.vertical .l4d-wizard-step {
    position: relative;
    float:left;
    width:80%;
}
/*** l4d error message  ***/
.l4d-form  .l4d-error-message,
.l4d-wizard .l4d-error-message{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 1em 2em 2em 2em;
    z-index: 10000;
}
.l4d-form  .l4d-error-message{
    position: absolute;
}
.l4d-wizard .l4d-error-message {
    position: fixed;
}

.l4d-form .l4d-error-message .ui.error.message,
.l4d-wizard .l4d-error-message .ui.error.message{
    position: absolute;
    display:block;
    bottom: 6em;
    width: 90%;
    max-width: 1280px;

}
.l4d-form .l4d-error-message .ui.error.message{
    width: 60%;
    right: 1.5rem;
}
.l4d-wizard .l4d-error-message .ui.error.message{
    width: 90%;
    right: 5%;
}
.l4d-form .l4d-error-message .ui.error.message .header,
.l4d-wizard .l4d-error-message .ui.error.message .header{
    font-variant:small-caps;
    font-size: 2em;
    line-height:1.5;
}
.l4d-form .l4d-error-message .ui.error.message .list-container,
.l4d-wizard .l4d-error-message .ui.error.message .list-container{
    max-height:300px;
    overflow:auto;
}
.l4d-form .l4d-error-message .ui.message .list:not(.ui) li,
.l4d-wizard .l4d-error-message .ui.message .list:not(.ui) li{
    margin: 0 2em;
}
.l4d-form .l4d-error-message .ui.message .list:not(.ui) li a,
.l4d-wizard .l4d-error-message .ui.message .list:not(.ui) li a{
    color:inherit;
}
.l4d-form .l4d-error-message .ui.message .list:not(.ui) li a:hover,
.l4d-wizard .l4d-error-message .ui.message .list:not(.ui) li a:hover{
    text-decoration:underline;
}
.l4d-form .l4d-error-message .ui.message .list:not(.ui) li:before,
.l4d-wizard .l4d-error-message .ui.message .list:not(.ui) li:before{
    position: absolute;
    content: "•";
    left: -1em;
    height: 100%;
    vertical-align: baseline;
}
.l4d-form .l4d-error-message .ui.message .list:not(.ui) li.header,
.l4d-wizard .l4d-error-message .ui.message .list:not(.ui) li.header{
    font-variant: small-caps;
    font-size: 1.5em;
    margin: 0.5em 0;
}

/*** l4d Questionnaire ******************************************************************************************/
.l4d-questionnaire{
}
.l4d-questionnaire .l4d-questionnaire-group{
}
.l4d-questionnaire .l4d-questionnaire-group .row{
    padding:0.5em 1em;
}
.l4d-questionnaire .l4d-questionnaire-group .row:hover{
    background: #f3f4f5;
}
.l4d-questionnaire .l4d-questionnaire-group .row:last-child{
    margin-bottom:2em;
}
.l4d-questionnaire .l4d-questionnaire-group .row .field{
    padding:0;
    margin:0;
}
.l4d-questionnaire .ui.input {
    font-size:1em;
}

.l4d-questionnaire h2{
    line-height:2;
    margin-bottom:0.5em;
}
.l4d-questionnaire h3{
    line-height:1;
    margin-bottom:0.5em;
}
.l4d-questionnaire .l4d-questionnaire-group h3{
}
.l4d-questionnaire .l4d-rating-label{
    font-weight:bold;
}
/*** l4d Grid **************************************************************************************************/
.l4d-grid .l4d-search{
}
.l4d-grid .l4d-navigator{
}
.l4d-grid-modal{
    
}

/*** l4d-modal ************************************************************************************************/
.l4d-modal{
}
.ui.dimmer.page.l4d-modal > .close.icon {
    position: fixed;
    right: 2rem;
    color: #fff;
    top: 2rem;
    font-size: 2rem;
    cursor:pointer;
}
.l4d-modal .header{
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    text-align: left;
    padding: 0;
}
.l4d-modal .l4d-grid{
}
.l4d-modal .l4d-navigator{
    position:absolute;
    z-index: 0;
}

/*** l4d-questionnaire ************************************************************************************************/
.l4d-questionnaire {

}
.l4d-questionnaire .ui.corner.label{
    display:none;
}
.l4d-questionnaire .required .ui.corner.label{
    display:block;
}


/*** l4d Search **********************************************************************************************/
.l4d-search{
    padding-left: 0!important;
    padding-RIght: 0!important;
    margin-bottom: 1rem;
    width:100%;
}
.l4d-search .field{
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 1rem;
}
.l4d-search  .row{
    margin-bottom:0.5em;
}


/*** l4d Rating **************************************************************************************************/
.l4d-rating-label{
    display:inline-block!important;
    max-width:70%;
}
.l4d-rating{
    vertical-align:top!important;
}
.l4d-rating.clearable{

}

/*** l4d Label Date Hint **************************************************************************************************/
.l4d-date-hint{
    position: absolute!important;
    font-size:1em!important;
    min-width:4em;
    text-align:center;
    white-space:nowrap;
}
.l4d-date-hint.left{
    left: 100%;
    margin-left: 0.7em!important;
}
.l4d-date-hint.label.right{
    right: 100%;
    margin-right: 0.7em!important;
}

.l4d-date-hint.below{
    top:4.5em;
    right:0;
}

.l4d-date-hint.top{
    top: -3.5em;
    right:0;
}

/*** ui dimmer *****************************************************************************************/
.ui.dimmer.page{
    opacity:1;
    overflow:auto;
    z-index:10000;
}

.ui.dimmer.page i.close {
    /*position: fixed;
    right: 2rem;
    color: #fff;
    top: 2rem;
    font-size: 2rem;
    cursor:pointer;*/
}

/*** ui form **************************************************************************************************/
.ui.form .field > label{
    text-align:left;
}

.ui.form{
    padding-bottom:4.5rem!important;
}


/*** ui grid ******************************************************************************************/
.ui.grid.segment{
    margin-top: 0;
    padding-top: 1rem!important;
    padding-bottom: 2rem!important;
    display:inline-block;
}
.ui.grid.segment.hidden{
    display:none;
}
.ui.grid.segment{
    padding:1rem;
}
.ui.grid.segment.modal{
    position: relative;
    left: auto;
    top: auto;
    margin: 0 auto!important;
    padding-bottom:4.5rem!important;
}
.ui.table{
    width:auto;
    margin:0;
    padding:0;
}
.ui.dimmer.page .table{
    width:100%;
}
.ui.dimmer.page .ui.grid .table{
    margin-bottom:3rem;
}

.ui.table thead{
}
.ui.grid > .row{
    position:relative;
    padding:0 1rem;
}
.ui.grid > .row.separator{
    position: relative;
    border-bottom: 1px solid #000000;
    margin:0 1rem 1rem 1rem;
    height:1rem;
    padding: 0;
}
.ui.table{
}
.ui.table tr td{
    height:4rem;
}
/*.ui.grid th a,
.ui.grid td a,*/
.ui.grid th button,
.ui.grid td button{
    

    /*align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;*/

    margin-left:0.2rem;
    display:inline;
    line-height:2rem;
    border-radius:2rem;


}
.ui .row.single-line{
    height: 1.5rem;
}

/*** *****************************************************************************************/
.normal-margin-top{
    margin-top:1rem;
}
.normal-margin-bottom{
    margin-bottom:1rem;
}

.item-bookmark{
}
.item-bookmark i.delete{
}

.navigator{
    height:2rem;
    text-align:right;
}
.navigator .label{
    line-height:2rem;
}
.float-left{
    float:left;
}
.float-right{
    float:right;
}
.align-left{
    text-align:left!important;
}
.align-right{
    text-align:right!important;
}
.align-center{
    text-align:center!important;
}

/*** *****************************************************************************************/
.data-grid, 
.data-form,
.data-search{
    width:100%;
    padding-left: 1rem!important;
    padding-right: 1rem!important;
    margin:0!important;
    /*overflow:auto;*/
}
.data-grid{
}
.data-grid tbody tr {
}
.data-grid tbody tr.navigator {
   
}
.data-grid tbody tr.hover:hover {
    background-color:#eae8e8!important;
}
.data-grid tbody tr td{
    height:3.5rem;
}
data-grid thead,
data-grid tfoot,
.navigator{
}

.data-grid i.hide,
.data-grid i.unhide{
    font-size: 1.5rem;
}

.navigator{
}
.navigator td{
    border-top:1px solid rgba(34, 36, 38, 0.1)!important;
}

.btn-td .btn{
    margin-left:0.2rem;
    display:inline;
    line-height:2rem;
    border-radius:2rem;
}
.btn-td .btn i{
    margin:0;
    padding:0;
}
.btn-td{
    text-align:right;
    width:7rem;
}

/*** *****************************************************************************************/
.data-form .step{
    /*border:1px solid rgba(34, 36, 38, 0.1)!important;*/
}

.data-form .fields .field{
    max-width: 100%;
}

/*.data-form .fields.one .field{
    width:100%!important;    
}*/

.data-form .bottom-bar{
    margin:1rem 0 0 0;
    /*position:absolute;
    bottom:0;*/
}
.data-form .bottom-bar button{
    min-width:120px;
    margin-bottom:1rem;
}

/*** wizard ***/

.data-form.wizard.vertical .wizard-steps{
    position:fixed;
    float:left;
    margin-bottom:4rem;
}
.data-form.wizard.vertical .wizard-step{
    position:relative;
    top:0;
    margin-left:17rem;
    margin-bottom:4rem;
    float:none;
    min-height:28rem;
}
.data-form.wizard.vertical .bottom-bar{
    position:fixed;
    right:2rem;
    bottom:0rem;
    background-color:#ffffff;
    padding:1rem;
}
.data-form.wizard.vertical .bottom-bar button{
    margin:0;
}
/*
.data-form.wizard .bottom-bar{
    position:fixed;
    bottom:0;
    right:0;
    background-color:#ffffff;
    padding:1rem 1rem 0 1rem;
    margin:1rem;
    border-radius: 0.28571429rem;
    background: #ffffff;
    box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
}

.data-form.wizard .bottom-bar button{
}
*/

.data-list{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.4);
    z-index:999999;
}
.data-list .data-list-content{
    position:relative;
    display:block;
    width:800px;
    max-width:90%;
    margin:auto!important;
    margin-top:8rem!important;
    overflow:auto;
    padding:1rem!important;
}

.data-list .data-list-content-header{
    margin-bottom:1rem;
}

.data-list .data-list-content-body{
    padding:0;
    height:auto;
    min-height:200px;
    max-height:500px;
    overflow:auto;
    margin-bottom:1rem;
}
.data-list .data-list-content-body table{
    width:100%;
}
.data-list .data-list-content-footer{
    text-align:right;
}

/*** *********************************************************************************************/
.search-form{
    margin-bottom:1rem!important;
}

/*** menus *****/
#master-menu-popup{
    /*max-width: 810px!important;*/
}

#report-menu-popup{
    max-width:250px!important;
}


/*** footer **************************************************************************************/
#main-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height:5rem;
    margin: 0;
    padding: 1%;
    /*background-color: rgba(218,218,218,0.6);*/
    background-color: rgba(250,250,250,0.6);
    z-index: 999;
}

/*** master container ***************************************************************************/
#master-container{
    position: absolute;
    top:5.5rem;
    width: 100%;
    overflow: auto;
    overflow-y: scroll;
}
#master-container #master-container-content{
}

/*** login *************************************************************************************/
#login{
    margin:20px auto 20px auto;
    width: 400px;
}
#login h2{
    text-align:left;
    color:#ffffff;
}
#login h2 img{
    max-width:50px;
}
#login h2 .content{
    font-weight:normal;
    margin-left:0.5rem;
    margin-top:0.75rem;
}

/*** *****************************************************************************************/
#wizard-registration{
}
#wizard-registration .l4d-wizard-header{
}
#wizard-registration .l4d-wizard-step{
}
#wizard-registration.l4d-wizard.vertical .l4d-wizard-header {
    max-width:200px!important;
}
#wizard-registration.l4d-wizard.vertical .l4d-wizard-step {
}

/*** *****************************************************************************************/
#wizard-full-registration{
}
#wizard-full-registration .l4d-wizard-header{
}
#wizard-full-registration .l4d-wizard-step{
}
#wizard-full-registration.l4d-wizard.vertical .l4d-wizard-header {
    max-width:210px!important;
}
#wizard-full-registration.l4d-wizard.vertical .l4d-wizard-step {
}
#wizard-full-registration #full-step-1{
}
#wizard-full-registration #full-step-2{
}
#wizard-full-registration #full-step-3{
}
#wizard-full-registration #full-step-4{
}
#wizard-full-registration #full-step-4 .template-clone #data-child-remove{
}
#wizard-full-registration #full-step-5{
}
#wizard-full-registration #full-step-6{
}
#wizard-full-registration #full-step-7{
}
#wizard-full-registration #full-step-8{
}
#wizard-full-registration #full-step-9{
}
/*** *****************************************************************************************/

#grid-activity table {

}

#grid-activity table thead{
    /*display:block;*/
}

#grid-activity table tbody{
    /*display:block;
    max-height:250px;
    overflow:auto;*/
}




/*** *****************************************************************************************/
@media only screen and (max-width: 767px){

    .btn-td{
        text-align: right!important;
    }
    .btn-td .btn{
    }

    /*** Grid *******/
    .data-grid tbody tr td{
        height:1.5rem;
    }
    /***************/
    .navigator{
            height: 4.5rem!important;
    }
    /*** ****/
    #filter-profession-container {
        width:100%;
        min-width:100%;
    }
}

@media only screen and (max-width: 1200px) {
    .l4d-wizard {
    }
    .l4d-wizard.vertical .steps .step{
        text-align:center;
        font-size:1em;
    }
    .l4d-wizard.vertical .steps .step * {
        margin:auto;
    }
    .l4d-wizard.vertical .steps .step div{
        width:100%;
    } 
    .ui.steps .step .title{
        /*font-size:.9em;*/
    }
}
