*{
    font-family: arial, helvetica;
    padding: 0px;
    margin: 0px;
    color: #545454;
    color: #636363;
    font-size: 13px;

}
.btn{
    border: 0px !important;
}
/* ************** */


    #testtable_id tr:first-child{
        display: none;
    }
    #loader{
        padding-top: 20px;clear: both; float: none; border: none !important;
    }
    #loader img{
        width: 100%; height: auto; max-width:400px
    }
    #course_table_wrapper{
        padding-top: 15px;margin: auto;
    }
    
    #loggend_in_wrapper{
     margin: -40px 20px 40px 20px;
    }
    #red_message{
        text-align: right;
      /* color: #c20000; */
    }
    #add_child_button{
        border: 0px;
           width: 100%;
    padding-left: 18px;
    height: 120px;
    text-align: left;
    background: #fff;
    }
    
    #offer_wrapper{
        

     overflow: auto;
     margin-bottom: 210px;
     margin: 15px 15px;
     /*padding: 3%;*/
    }
    #reload_button{
        float: right; width: 90px; background: transparent; color: #fff
        
    }
    footer{
        background: #f3f3f3; min-height: 300px;padding: 40px 5%
    }
    #selector_wrapper{
        padding-bottom: 60px; margin-bottom: 140px; min-height: 750px; background: #fff; overflow: auto;
    }
/* ************** */


 #offer_table .xtbl_container table.data_grid_table {
            background: transparent;
            border: none !important;

            border-collapse: separate;
            border-spacing: 0 1em;
        }

        #offer_table td:last-child {
            border-radius: 0px 2px 2px 0px;
            -moz-border-radius: 0px 2px 2px 0px;
            -webkit-border-radius: 0px 2px 2px 0px;
            border-right: 0px solid #eee;
        }
        #offer_table td:first-child {
            border-radius: 2px 0px 0px 2px;
            -moz-border-radius: 2px 0px 0px 2px;
            -webkit-border-radius: 2px 0px 0px 2px;
            border-right: 0px solid #eee;
        }


        #offer_table td {
            background: #fff;
                /*background: rgb(241, 241, 241);*/
            border-top: 0px solid #eee;
            border-bottom: 0px solid #eee;
        }
     
/* ************** */

.xtd_name>div,
.xtd_location>div, .xtd_level>div, .xtd_start_end>div, .xtd_weekday>div{
    max-width: 130px;
    max-height: 20px;
    overflow: hidden;
     text-overflow: ellipsis;
}
.xtd_name>div{
    
     max-width: 180px;  
}
.xglyph{
    color: #fff;
    font-size: 9.5px;
    display: block;
    float: right;
    margin-top: -3px;

}
.offertable tr:hover td{
    background: #f5f4f4 !important;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #dadada;
}
.btn{
        padding: 12px 55px !important;
}
.h2, h2, h3 {
    margin-top: 0px;
    font-size: 18px !important;
}
.label-primary {
    background-color: rgb(103, 103, 103);
}
.offer_row{
   border-bottom: 1px solid #e3e3e3 !important;
}.green_symbol{
        top: 6px;
        font-size: 27px;
        color: #89c30a;
        margin-bottom: 14px;
}
.box_shadow_soft{
   border: 1px solid #ffffff;
   /* background: rgb(247, 247, 247); */
   /* box-shadow: 13px 11px 24px #d8d8d8;*/
}
.xtd_xstatus{
    padding: 0px !important;
}
.xlabel{
    display: block;
    width: 151px;
    border-radius: 0;
    padding: 12px 5px;
    font-size: 66%;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    margin: -1px;
    float: right;
    color: rgb(255, 255, 255);
    text-align: left;
    white-space: nowrap;
    vertical-align: baseline;
    text-transform: uppercase;
    border-radius: -4.75em;
}
.label{
    display: block;
    width: 131px;
    padding: 5px;
    font-size: 66%;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    color: rgb(255, 255, 255);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    text-transform: uppercase;
    border-radius: -4.75em;
    }
span.label{
    /* min-width: 222px; */
    color: #fff !important;
}
button:active,
button:focus{
    box-shadow: none !important;
}

button div.bttn_text{
    width: 80px;
    padding: 0px;
    float: left;
    color: rgb(255, 255, 255);
}
.glyphicon:before{
    top: 1px;
    position:relative;
}
.red_button:hover,
.red_button{
    width: 125px;
    background: #c20000;
    border-color: rgba(0, 0, 0, 0) !important;
    color: rgb(255, 255, 255);
}
.green_button:hover,
.green_button{
    width: 125px;
    background: rgb(153, 216, 18) !important;
    border-color: rgba(0, 0, 0, 0) !important;
    color: rgb(255, 255, 255);

}
.gray_button:hover,
.gray_button{
    width: 125px;
    background: rgb(232, 232, 232) !important;
    border-color: rgb(232, 232, 232) !important;
    background: #fff !important;
    border-color: #fff !important;
    color: rgb(255, 255, 255);
}

.green_button span:hover,
.red_button span:hover,
.green_button span,
.red_button span,
.gray_button span,
.gray_button span{
    width: 19px;
    color: rgb(255, 255, 255);
    float: left;
    display: block;
}

.container{
    max-width: 960px;
}
.user_button span{
    padding-right: 11px;
}
.user_button{
    float: right;
    height: 23px;
    /* border: 2px solid gray; */
    /* margin: -34px; */
    padding: 4px 12px !important;
}
.offer_arrow_fltr {
    width: 170px;
}
#button_close{
    float: right !important;
}

#offer_table td > div >div{
    padding-top: 5px !important;  
}


input[type="radio"], input[type="checkbox"] {
    margin: 2px 0 0;
    margin-top: 1px;
    line-height: normal;
}
.has-error input{
    background: #f9dada;
}
.error-msg{
    display: none !important;   
}
.radio label, .checkbox label {
    min-height: 20px;
    padding-left: 25px;
    padding-right: 30px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    float: left;
}

body{
    overflow-y: scroll !important;
}
#main_nav{
    width: 100%;
}

.thumbnail h2{
    display: block;
    font-size: 125% !important;
    text-align: center;
    color: #696969;
    margin-top: 10px;
}
.thumbnail{
    border-radius: 0px;
    background: #e6e6e6;
    cursor: pointer;
    border: 1px solid rgb(255, 255, 255);
    min-height: 34px !important;
    margin: 2px 0px;
}
#main_nav li{

    float: left;
    margin: 2px;
    clear: none;
}
.table td{
    cursor: pointer;
    height: 14px;
}
.infobox label{
    display: block;
    float: left;
    border-radius: 2px;
    font-weight: bold; 
    text-align: right;
    background: rgb(140, 140, 140);
    color: rgb(255, 255, 255);
    padding: 3px 12px;
    font-weight: normal;
    min-width: 120px;
    margin-right: 12px;
    display: block;
    float: left;
    margin: 0 4px;
    border-radius: 0;
}
li{
    float: none;
    clear: both;
}
ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.btn-orange{
    background: orangered;
    margin-top: 5px;
    margin-right: 5px;
    padding: 4px;
}

.tag-white{
    color: #76ab08;
    background: rgb(144, 208, 9) !important;
    margin-top: 5px;
    margin-right: 5px;
    border: 1px solid rgb(153, 216, 18);
    padding: 4px;
    color: rgb(255, 255, 255);
}

.xactive .tag-white{

    background: rgb(255, 255, 255) !important;
    margin-top: 5px;
    margin-right: 5px;
    border: 1px solid rgb(242, 242, 242);
    padding: 4px;

    color: rgb(154, 154, 154);

}
.tag-white:hover{
    color: rgb(154, 154, 154); 
}
.selected_symbol{
    top: -3px;
    font-size: 22px;
    float: right;
    color: #90d009;
}
.default_symbol{
    font-size: 22px;
    top: -3px;
    float: right;
    color: #f1f1f1;
}
.btn-childedit{
    width: 58%;
    display: none;
    margin: 17px auto;
    /* margin-top: 12px; */
    padding: 4px;
    color: #fff;
    /* border: 1px solid #7bb303; */
    color: #9e9e9e;
}
.btn-childedit:hover{
 
}

.xactive .btn-childedit{
    display: block;
    border-radius: 3px;
    visibility:visible;
    color: rgb(255, 255, 255);
    background: rgb(133, 193, 3) !important;
}

.xtbl_container{
    height : auto;
    overflow: auto;

    border: 1px solid #fff;
    padding: 3px;

    height: auto;
    overflow: auto;
    border: 0px solid rgb(230, 230, 230);
    padding: 0;

}
.xtbl_container table{
    background: rgb(255, 255, 255);
    border: 1px solid rgb(226, 226, 226) !important;
}
.tbl_body{
    padding: 0px; 
}

th{
    color: rgb(255, 255, 255);
    cursor: pointer;
    background: rgb(251, 251, 251);
    color: rgb(102, 102, 102);
    cursor: pointer;
    font-weight: normal;

}
th.id,
th.part_nr,
th.inquiry_id,
th.quantity,
th.lastname,
th.firstname,
th.company,
xth.customer_nr{
    width: 15%;
}

.btn-std {
    padding: 2px !important;
    margin: 0px;
    line-height: 1.2;
}
.btn-xs, .btn-group-xs > .btn {
    padding: -1px 9px !important;
    font-size: 12px;
    line-height: 1.25;
    border-radius: 3px;
}

.bubble 
{
    position: relative;
    width: 50%;
    min-width: 200px;
    height: 28px;
    padding: 4px 4px 4px 12px;
    background: #bbbbbb;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    margin-bottom: 24px;
    border: 0px;
}

.bubble:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #bbbbbb rgba(0, 0, 0, 0);
    display: block;
    width: 0;
    z-index: 1;
    bottom: -6px;
    left: 3px;
}

.centerbubble 
{
    position: relative;
    /* width: 339px; */
    /* height: 31px; */
    padding: 21px 0;
    background: rgb(230, 230, 230);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: rgb(99, 99, 99);
    font-size: 17px;
    margin: 20px auto;
    text-align: center;
}
.centerbubble_red
{
    position: relative;
    /* width: 339px; */
    /* height: 31px; */
    padding: 9px 0;
    background: rgb(194, 0, 0);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #fff;
    font-size: 17px;
    margin: 20px auto;
    text-align: center;
}

.centerbubble:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: rgb(230, 230, 230) transparent;
    display: block;
    width: 0;
    z-index: 1;
    margin-left: -15px;
    bottom: -14px;
    left: 50%;
}
.centerbubble_red:after{

    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: rgb(194, 0, 0) transparent;
    display: block;
    width: 0;
    z-index: 1;
    margin-left: -15px;
    bottom: -14px;
    left: 50%;
}


.leftbubble 
{
    position: relative;
    height: 31px;
    padding: 5px 0;

    background: #676767;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #777;
    color: #fff;
    font-size: 14px;
    margin: 20px 0px;
    text-align: center;
}

.leftbubble:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #337ab7 transparent;
    border-color: rgb(32, 77, 101) transparent;
    border-color: #a7a7a7 transparent;
    border-color: rgb(148, 148, 148) transparent;
    border-color: #e2e2e2 transparent;
    border-color: #676767 transparent;
    display: block;
    width: 0;
    z-index: 1;
    margin-left: -15px;
    bottom: -6px;
    left: 10%;
}

.xbubble 
{
    position: relative;
    width: 355px;
    height: 28px;
    padding: 2px 5px;
    background: rgb(242, 242, 242);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: rgb(84, 84, 84);
    font-size: 17px;
    margin-bottom: 24px;
    border: 0px;
}

.xbubble:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: rgb(242, 242, 242) rgba(0, 0, 0, 0);
    display: block;
    width: 0;
    z-index: 1;
    bottom: -10px;
    left: 5px;
}

.yellow_dot{
    color:#ffd100;
}
.green_dot{
    color:#5cb85c;
}
.white_dot{
    color: #f1f1f1;
}

.participationLevel{
    display: block;
    padding: 0px 3px;
    min-width: 8px;
    border-radius: 2px;
    text-align: center;
}
.lbl_green,
.lbl_orange,
.lbl_red{
    padding: 2px 4px;
    border-radius: 2px;
    text-align: center;
    font-size: 90%;
}

.lbl_red{
    background: #c20000 !important;
    color: #fff;

}
.lbl_orange{
    background: #e38d13 !important;
    color: #fff;

}.lbl_green{
    background: #5cb85c !important;
    color: #fff;

}
.td_status{
    width: 220px !important;;
}


.xwhite{
    margin-right: 8px;
    color: #fff;

}
.xorange{
    margin-right: 8px;
    color: #e38d13;
}
.xred{
    margin-right: 8px;
    color: #c20000;
}

.td_age,
.td_kiss_level,
.td_id{
    width: 10%;
    min-width: 20px;
    max-width: 30px;
}
.btn-small{
    padding: 2px 12px;
    background: rgb(234, 234, 234);
    color: rgb(121, 119, 119) !important;
    font-size: 100%;
    border: 1px solid #dadada;
}
#datasourceX {
    border: 0px dashed lime;
    display: block;
    overflow: auto;
    position: relative;
    top: -3px;
}

#datasourceX table th{

    visibility: hidden;
    height: 0px !important;
    overflow: hidden;
    padding: 0 8px;
}

td{
    padding-left: 8px;
    padding-right: 8px;
}
.btn-primary {
    color: rgb(255, 255, 255);
    background: rgb(153, 216, 18) !important;
    border-color: rgb(135, 191, 16) !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background: rgb(153, 216, 18) !important;
    box-shadow: none !important;
}

.btn-primary:hover {
    color: rgb(255, 255, 255);
    background: rgb(153, 216, 18);
    border-color: rgb(122, 179, 0);
}


.btn-xreservation{
    color: rgb(140, 138, 138);
}
.btn-xrequest{
    color:#fff !important;
}

.xbadge{
    display: none;
}

.form-control {
    margin-bottom: 13px;
    margin-bottom: 0px;
    display: block;
    width: 100%;
    height: 24px;
    padding: 2px 5px;
    font-size: 12px;
    line-height: 1.42857143;
    color: rgb(85, 85, 85);
    background-color: rgb(251, 251, 251);
    background-image: none;
    border: 1px solid rgb(234, 234, 234);
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.xactive h2{
    color: #f3ffdb;
}

.gxl{
    color: rgb(144, 208, 9) !important;
}
#children_table .xactive,
#children_for_courses .xactive,
#xxx .xactive{
    background: rgb(153, 216, 18);
    /* color: #545454; */
    /* border: 1px solid rgb(135, 191, 16); */
    /* transition: all 0.25s ease-in-out 0.0s; */
}
.mark{            
    background: yellow !important;
    background: rgb(255, 255, 160) !important;
    background: #f1f1f1 !important;
    color: #615a00;
}

.xgray,.xred, .xgreen{
    font-size: 18px;
}
.status_icon span,.status_icon span, .status_icon span{
    position: relative;
    top: -1px;
    margin-right: 0px;
    display: block;
    width: 25px;
    float: left;
}

.xgray{
    color: #e3e3e3;
}
.xred{
    color: #c20000;   
}
.xgreen{
    color: rgb(92, 184, 92);
}
.course_wrapper{
    display: none !important;
    border-radius: 3px;
    min-height: 50px;
    margin: auto;
    margin-bottom: 15px;
}

@media screen and (min-width: 960px) {
    #main_headline {
        text-align: right;
    }
}
@media (min-width: 768px) {
    .modal-dialog {
        width: 80%;
        max-width: 1080px;      
        margin: 30px auto;
    }
    .modal-content {
        min-height: 600px;
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    }
    .modal-sm {
        width: 300px;
    }
}

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

#course_table_wrapper .td_fullname{
    background: #90d009 !important;
}

#course_table_wrapper td:last-child {
    border-radius: 0px 2px 2px 0px;
    -moz-border-radius: 0px 2px 2px 0px;
    -webkit-border-radius: 0px 2px 2px 0px;
}
#course_table_wrapper td:first-child {
    border-radius: 2px 0px 0px 2px;
    -moz-border-radius: 2px 0px 0px 2px;
    -webkit-border-radius: 2px 0px 0px 2px;
}

#course_table_wrapper td {
    padding: 4px 2px;
    background: rgb(255, 255, 255);
}
#course_table_wrapper .td_fullname{
    background: #90d009 !important;
}

#course_table_wrapper .data_grid_table td>div{
   /* padding: 2px !important;*/
}

.offer_list_item *{
    color: #fff;
}

.default_list_item:hover,
.default_list_item{
    background: #fff !important;
}
.reservation_list_item {
    background: rgb(187, 187, 187) !important;
}
.reservation_list_item *{
    cursor: auto !important;
    color: rgb(97, 97, 97);
}

.xcol{
    float: left;       
    width: 33.3333333%;
    padding: 3px;
}

.btn-x{
    margin-right: 3px;
}

.tbl_toolbar {
    padding: 4px 0;
    min-height: 36px;
    background: rgb(241, 241, 241);
    height: auto !important;
}

#course_table_wrapper tr.reservation_list_item td{
    color: rgb(117, 117, 117);
    background: rgb(245, 245, 245);
}


#course_table_wrapper tr.offer_list_item td div{
    color: rgb(103, 103, 103) !important;
}

.hl_center {
    text-align: center;
}

th{
    background: transparent !important;
    color: #545454 !important;
}

.new_group{
    background: #d0e9c6;
    background: #fff;
    color: #545454;

}
.xth{
    text-align: right;
    padding-left: 20% !important;
    padding-right: 2% !important;
    background: rgb(138, 138, 138) !important;
    color: rgb(255, 255, 255) !important;
}

.badge{
    display: none;
}
.hx{
    padding: 4px 12px;
}

.hx_name{
    padding: 4px 12px;
    color: #fff;
}
.offer_wrapper h2{
    padding-left: 22px;
}
#offer_table td.td_id{
    width: 20%;
}
.offer_list{
    border: 0px dashed silver;

}
.offer_list li {
    clear: none;
    background: rgb(242, 242, 242);
    border: 0px;

}
.offer_list li a{
    color: #fff;
    text-align: center;
    width: 100%;
    float: left !important;
    display: block;
    border-radius: 3px;
    padding: 12px;
    background: #00b3ee;
    border: 0px ;
}

.btn-offer{
    margin-right: 4px;
    margin-top: -2px;
    background: rgb(194, 0, 0);
    padding: 2px 12px !important;
    line-height: 1;
    color: rgb(255, 255, 255) !important;

}

@media (max-width: 500px) {

    #offer_table td.td_weekday,
    #offer_table td.td_start_end,
    td.xtd_weekday,
    td.xtd_level,
    td.xtd_start_end{
        background: yellow !important;
        display: none !important;
    }}