﻿/*========================================
Ipsos-groen = #009D9C => lichtst = #00C1C1
Ipsos-blauw = #2F4694 => lichtst = #4359A6
Lichtgrijs  = #DDD
========================================*/
/*
<form>
    <input type="text" class="form-control">
    <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
    
<div class="form-group">
    <label for="inputEmail" class="control-label col-xs-2">Email</label>
    <div class="col-xs-10">
        <p class="form-control-static">harrypotter@mail.com</p>
    </div>
</div>    
*/
HTML{min-width: 320px!important; /*overflow-x: scroll;*/}
body {
    background-color: #DDD /*#4359A6*/ /*#2F4694*/;
    /*background-image: url(../img/back_gradient_blue.png); background-repeat: repeat-y; background-position: top left; */
    background-image: url(../img/back_blue.png); background-repeat: repeat-y; background-position: top left; 
    -ms-overflow-style: scrollbar; /* fix IE10 floating scrollbar */
}
input, select, textarea {max-width: 400px; }
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, input:-webkit-autofill:focus, textarea:-webkit-autofill:focus, select:-webkit-autofill:focus {
background-color: #FFF!important /*inherit*/;
background-image: none;
color: inherit;
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
textarea, input[type="text"], input[type="password"]{padding-top: 5px!important;}
select, input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {line-height: 28px!important; margin-top: 0px; padding-top: 4px;}
.form-control::-webkit-input-placeholder {line-height: normal!important;}

/* MATHIEU */

::-moz-selection { background: #00C1C1; color: #FFF; text-shadow: none; }
::selection { background: #00C1C1; color: #FFF; text-shadow: none; }
h1 {font-size: 24px; color: #2F4694;}
h3 {color: #2F4694;}
a {color: #2F4694; }
.greenLink, .greenLink:hover{color: #00C1C1;}
.userLink, .userLink:hover{color: #009D9C; font-weight: bold;}
.Alphalinks { font-size: 18px; margin: 9px 9px; }
.form-group label {font-weight: normal;}
.form-control { color: #2F4694; }
.error{ color: #D02315; font-size: 14px; }
.success { color: #009D9C; font-size: 14px; }
.error UL { margin-left: 10px; }
.icoTrue { color: #009D9C; font-weight: normal;  }
.icoFalse { color: #D02315; font-weight: normal;  }
.noBorder { border: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: none; transition: none;}
.imgVar{height: auto; width: 100%;}
.topFilter{padding-top: 8px;padding-bottom: 8px;line-height: 20px;}
.topFilter SELECT{ background-color: transparent; color: #FFF!important; 
                    border: groove 1px #00C1C1; border-collapse: collapse;
}
.topFilter SELECT OPTION { background-color:#2F4694; height: 30px; }
#ddlUserName {padding: 15px 10px;}
#lblTitleClient {color: #009D9C; }
#leftNav {background-color: #009D9C; border-bottom: solid 1px silver; }

.side-nav>li>div>ul {padding: 0;}
.side-nav>li>div>ul>li>a {display: block;padding: 7px 15px 7px 38px;text-decoration: none;color: #FFF;}
.side-nav>li>div>ul>li>a:hover {color: #fff;}

.navbar-header{ background-image: url(../img/logo_ipsos_50.png); background-repeat: no-repeat; background-position: top left; padding-left: 60px;}
.navbar-fixed-top{ background-color: #009D9C; background-image: url(../img/back_gradient_green.png); background-repeat: repeat; background-position: top left; }
.navbar-brand { color: white!important; font-size: 23px; line-height:23px; padding-left: 0px;}
.navbar-fixed-top A{ color: white;}
.navbar-inverse{ border: none; }
.navbar-inverse .navbar-toggle {border-color: #FFF;}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: transparent;}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {border: none;}
.navbar-inverse .navbar-text {color: #FFF;}
.navbar-inverse .navbar-nav > li > a {color: #FFF; height: 42px; line-height: 16px; background-color: transparent; }

/*.navbar-nav > li, .side-nav > li > div > ul > li { border: outset 1px #5A6CAB; border-collapse: collapse; border-left: none; border-right: none;}*/
UL.navbar-nav{margin-top: 0px; margin-bottom: 0px;}
.navbar-nav > li, .side-nav > li > div > ul > li {
    border-top: solid 1px #5A6CAB;
    border-bottom: solid 1px #2D3E78;
    border-collapse: collapse;
}
.navbar-nav ul:last-child li:last-child {border-bottom: none;}
.side-nav ul:last-child li:last-child {border-bottom: none;}
/*#sliHome {border-top: none;}*/

.page-header{margin-top: 25px;}
.panel-primary {border-color: #4359A6;}
.panel-primary > .panel-heading { color: #fff; background-color: #4359A6; border-color: #4359A6;}
.panel-primary > .panel-heading + .panel-collapse > .panel-body { border-top-color: #4359A6; }
.panel-primary > .panel-heading .badge { color: #4359A6; background-color: #fff;}
.panel-primary > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #4359A6;}
.panel-info .panel-title{font-size: 14px; color: #2F4694;}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th { color: #2F4694; }

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {background: #009D9C!important;}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {background: #4359A6!important;}
.btn-primary {color: #fff;background-color: #2F4694;border-color: #357ebd;width: 100%; max-width: 398px /*290px*/;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {color: #fff;background-color: #4359A6;border-color: #285e8e;}
.btn { margin-top: 1px;}
.btn-danger {color: #fff; background-color: #D02315; width: 100%; max-width: 398px /*290px*/;}
/*.row { margin-top: 5px; margin-bottom: 5px;}*/
.form-group {margin-bottom: 10px;}

/*.input-group {width: 280px;}*/

/* GRIDS */
.gridEmpty, .gridEmpty TD { font-size: 16px!important; font-style: italic; }
.myPager {color: #009D9C;}
.myPager TD A, .myPager TD SPAN{ margin: 3px 16px 3px 16px; font-weight: bold; }
.myFooter {color: #2F4694; font-weight: bold;}

/* CONTROLS */
.myCB{ margin: 0px!important; padding: 0px!important; }
.myCBL{ width: 100%; }
.myCBL TR { display: inline; }
.myCBL TR TD { min-width: 210px!important; height: 36px; display: inline-block; }
.myCBL label{ font-size: 14px; margin-left: 5px; color: #2F4694; font-weight: normal; }
.myCBLSelection { color: #009D9C; font-weight: bold; }

.myCheckList>tbody>tr>td>input[type=checkbox]{margin-left: 5px; margin-right: 5px;}

.dxpcLite .dxpc-header, .dxdpLite .dxpc-header {
    color: inherit;
    background-color: inherit;
    border-color: inherit;
}
.myInfoPopup{ height: 35px; width: 210px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px; margin-top: 10px; /*background-color: #d9edf7;*/ }
.myPopupGreen{color:#3c763d; background-color:#dff0d8; border-color: #d6e9c6;}
.myPopupBlue{color:#2f4694; background-color:#d9edf7; border-color: #bce8f1;}
.myPopupRed {color:#a94442!important; background-color:#f2dede!important; border-color: #ebccd1!important;}

.maxWidth350 {max-width: 350px; }
.myInfoPopup .dxpc-contentWrapper{ display: none!important}
.dx-dashboard-title {font-size: 24px !important;}

/* Color overrides */
/* PRIMARY: from 428bca to 2F4694 (hover: from 3071a9 to 4359A6 ) */
/* SUCCESS: from 3c763d to 009D9C (hover: from 2b542c to 00C1C1 )*/

/* UPDATE-PROGRESS */

#OuterTableCellOverlay{ /*background-color: #DDD;*/ width: 100%; min-width: 320px; }
/*#BetweenTableCellOverlay{}*/
#InnerTableCellOverlay{	
    position: absolute; top: 0px; bottom: 0px;left: 0px; right: 0px; 
    background-color: #FFF; text-align: center; margin: 0px; 
    z-index: 1000; display: block;
}
.sk-chase {
    width: 100px;
    height: 100px;
    top: 25%;
    left: 50%;
    z-index: 9999;
    position: relative;
    animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    animation: sk-chase-dot 2.0s infinite ease-in-out both;
}

    .sk-chase-dot:before {
        content: '';
        display: block;
        width: 25%;
        height: 25%;
        background-color: #398740;
        border-radius: 100%;
        animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
    }

    .sk-chase-dot:nth-child(1) {
        animation-delay: -1.1s;
    }

    .sk-chase-dot:nth-child(2) {
        animation-delay: -1.0s;
    }

    .sk-chase-dot:nth-child(3) {
        animation-delay: -0.9s;
    }

    .sk-chase-dot:nth-child(4) {
        animation-delay: -0.8s;
    }

    .sk-chase-dot:nth-child(5) {
        animation-delay: -0.7s;
    }

    .sk-chase-dot:nth-child(6) {
        animation-delay: -0.6s;
    }

    .sk-chase-dot:nth-child(1):before {
        animation-delay: -1.1s;
    }

    .sk-chase-dot:nth-child(2):before {
        animation-delay: -1.0s;
    }

    .sk-chase-dot:nth-child(3):before {
        animation-delay: -0.9s;
    }

    .sk-chase-dot:nth-child(4):before {
        animation-delay: -0.8s;
    }

    .sk-chase-dot:nth-child(5):before {
        animation-delay: -0.7s;
    }

    .sk-chase-dot:nth-child(6):before {
        animation-delay: -0.6s;
    }

@keyframes sk-chase {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes sk-chase-dot {
    80%, 100% {
        transform: rotate(360deg);
    }
}

@keyframes sk-chase-dot-before {
    50% {
        transform: scale(0.4);
    }

    100%, 0% {
        transform: scale(1.0);
    }
}

/* AJAX TOOLKIT */

.myAjaxCalendar A {text-decoration: none;}
.myAjaxCalendar{ /*background-color: #2F4694;*/ border: solid 1px #2F4694; color: #2F4694; font-size: 13px; }
.myAjaxCalendar .ajax__calendar_day, .myAjaxCalendar .ajax__calendar_month, .myAjaxCalendar .ajax__calendar_year { font-size: 13px; }
.myAjaxCalendar .ajax__calendar_header{ background-color: #009D9C; color: White; font-size: 13px; height: 25px; padding: 3px 0px 3px 0px; /*padding: 5px;*/}
.myAjaxCalendar .ajax__calendar_body{ background-color: White; font-size: 13px; height: 139px; width: 200px;}
.myAjaxCalendar .ajax__calendar_dayname{ color: #2F4694; font-size: 13px; font-weight: bold;}
.myAjaxCalendar .ajax__calendar_today{ /*background-color: #2F4694;*/ font-weight: bold; color: #009D9C; background-color: #EEE; font-size: 13px; height: 25px; /*padding: 5px;*/}
.myAjaxCalendar .ajax__calendar_hover{ background-color: #2F4694; font-weight: normal; color: White; font-size: 13px;}
.myAjaxCalendar .ajax__calendar_active{ background-color: #009D9C; font-weight: bold; color: White; text-align: center; vertical-align: middle; font-size: 13px;}
.myAjaxCalendar .ajax__calendar_container {padding: 0px; width: 200px;}
.myAjaxCalendar .ajax__calendar_container TD{padding: 3px;}
.myAjaxCalendar .ajax__calendar_days, .myAjaxCalendar  .ajax__calendar_months, .myAjaxCalendar  .ajax__calendar_years{width: 100%; height: 139px;}
.myAjaxCalendar #MainContent_CalendarExtender1_daysTableHeader {/*background-color:#2F4694;*/ }
.myAjaxCalendar #MainContent_CalendarExtender1_daysBody {background-color:white; }
.myAjaxCalendar #MainContent_CalendarExtender1_daysTable {width: 100%;}

.myAjaxCalendar .ajax__calendar_month{height: 40px;}

/* MEDIA QUERIES */

@media (min-width: 768px){
    /*#page-wrapper{  }*/
    .container-fluid{ background-color: #FFF; /*-moz-border-radius: 15px; border-radius: 15px; -webkit-border-radius: 15px;*/ min-height: 600px; }
    .side-nav {background-color: transparent; top: 50px; }
    .navbar-nav > li > a {padding-top: 14px;}
    .jumbotron {margin-top: 20px;}
    .body-content {padding: 0;}
    #InnerTableCellOverlay {margin-left: 200px;}
    .noPL {padding-left: 0px;}
} 
@media (max-width: 767px){
    .side-nav, #leftnav {background-color: #4359A6 /*#2F4694*/;}
    .topFilter SELECT{ border-color: white; border-style: solid;}
    ul.nav.navbar-right.top-nav { background-color: #4359A6;}
    /* UPDATE-PROGRESS*/
    /*
    #OuterTableCellOverlay{border: solid 2px red;}
    #InnerTableCellOverlay {border: solid 2px orange;}
    .spinner{border: solid 2px yellow;}
    */
    /*
    #InnerTableCellOverlay {background-color: #4359A6;}
    .dot1, .dot2 {background-color: #FFF;}
    */
    body{background-image: none;}
    H1{ font-size: 21px;}
    .snapNewLine{text-align: left!important; margin-top: 7px; padding-left: 15px!important;}
} 
/* iPhone & iPad disable enlarging of entry fields */
@media only screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 767px) { 
 select, textarea, input[type="text"], input[type="password"]{
 /*font-size: 16px;*/
  }
 select:focus, textarea:focus, input:focus {
 font-size: 16px;
 /*background:#eee;*/
  }
 }
/* iPhone & iPad */
@media only screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width: 1024px) {
	.noPadTop {padding-top: 2px;}
 }

/* 1280 and up (1280-x) */
@media screen and (min-width: 1280px), (min-device-width:1280px) {
    TD.hideBelow1280, TH.hideBelow1280 { display: table-cell; }
	TD.hideBelow1024, TH.hideBelow1024 { display: table-cell; }
	TD.hideBelow768, TH.hideBelow768   { display: table-cell; }
	TD.hideBelow640, TH.hideBelow640   { display: table-cell; }
	TD.hideBelow480, TH.hideBelow480   { display: table-cell; }
    TD.showBelow1024, TH.showBelow1024 { display: none;}
}
/* 1024 and up (1024-x) */
/* @media screen and (min-width: 1024px) {*/
@media screen and (min-width: 1024px) and (max-width: 1279px), (min-device-width:1024px) and (max-device-width:1279px) {
    TD.hideBelow1280, TH.hideBelow1280 { display: none; }
	TD.hideBelow1024, TH.hideBelow1024 { display: table-cell; }
	TD.hideBelow768, TH.hideBelow768   { display: table-cell; }
	TD.hideBelow640, TH.hideBelow640   { display: table-cell; }
	TD.hideBelow480, TH.hideBelow480   { display: table-cell; }
    TD.showBelow1024, TH.showBelow1024 { display: none;}
}
/* < 1024 (768-1024) */
@media screen and (min-width: 768px) and (max-width: 1023px), (min-device-width:768px) and (max-device-width:1023px) {
    TD.hideBelow1280, TH.hideBelow1280 { display: none; }
	TD.hideBelow1024, TH.hideBelow1024 { display: none; }
	TD.hideBelow768, TH.hideBelow768   { display: table-cell; }
	TD.hideBelow640, TH.hideBelow640   { display: table-cell; }
	TD.hideBelow480, TH.hideBelow480   { display: table-cell; }
    TD.showBelow1024, TH.showBelow1024 { display: table-cell; }
}
/* < 768 (640-768) */
@media screen and (max-width: 767px), (max-device-width:767px) {
    TD.hideBelow1280, TH.hideBelow1280 { display: none; }
	TD.hideBelow1024, TH.hideBelow1024 { display: none; }
	TD.hideBelow768, TH.hideBelow768   { display: none; }
	TD.hideBelow640, TH.hideBelow640   { display: table-cell; }
	TD.hideBelow480, TH.hideBelow480   { display: table-cell; }
    .page-header{margin-top: 40px;}
}
/* 480-640px : landscape cellphones */
@media screen and (max-width: 639px), (max-device-width:639px)
{
    TD.hideBelow1280, TH.hideBelow1280 { display: none; }
	TD.hideBelow1024, TH.hideBelow1024 { display: none; }
	TD.hideBelow768, TH.hideBelow768   { display: none; }
	TD.hideBelow640, TH.hideBelow640   { display: none; }
	TD.hideBelow480, TH.hideBelow480   { display: table-cell; }
}
/* 320-480px: portrait cellphones */
@media screen and (max-width: 479px), (max-device-width:479px) 
{
    TD.hideBelow1280, TH.hideBelow1280 { display: none; }
	TD.hideBelow1024, TH.hideBelow1024 { display: none; }
	TD.hideBelow768, TH.hideBelow768   { display: none; }
	TD.hideBelow640, TH.hideBelow640   { display: none; }
	TD.hideBelow480, TH.hideBelow480   { display: none; }
}
@media only screen and (max-device-width: 480px) and (orientation : landscape)
{
    TD.hideBelow1280, TH.hideBelow1280 { display: none; }
	TD.hideBelow1024, TH.hideBelow1024 { display: none; }
	TD.hideBelow768, TH.hideBelow768   { display: none; }
	TD.hideBelow640, TH.hideBelow640   { display: table-cell; }
	TD.hideBelow480, TH.hideBelow480   { display: table-cell; }
}

/*
@media screen and (max-height: 480px) , (max-device-height:480px) {
    .myDashViewer{ min-height: 300px; height: 300px;} 
}
@media screen and (max-height: 600px), (max-device-height:600px) {
    .myDashViewer{ min-height: 450px; height: 450px;}
}
@media screen and (max-height: 768px), (max-device-height:768px) {
    .myDashViewer{ min-height: 600px; height: 600px;}
}
*/

@media screen and (min-height: 1080px), (min-device-height:1080px) {
    .myDashViewer{ min-height: 800px!important; height: 800px!important;}
}
@media screen and (min-height: 1200px), (min-device-height:1200px) {
    .myDashViewer {min-height: 1024px !important;height: 1024px !important;}
}
@media screen and (min-height: 1600px), (min-device-height:1600px) {
    .myDashViewer {min-height: 1400px !important;height: 1400px !important;}
}
@media screen and (min-width: 850px) {
    .snapNewLine{padding-right: 15px!important;}
}
    


.navbar li a
{
 -webkit-transition:all .1s ease-in-out;
	-moz-transition:all .1s ease-in-out; 
 	 -ms-transition:all .1s ease-in-out; 
 	  -o-transition:all .1s ease-in-out; 
	     transition:all .1s ease-in-out; 
}
.forceWrap { word-wrap: break-word; word-break: break-all; }


/*
@media print {
	img { max-width: 100% !important; }
	p, h2, h3 { orphans: 3; widows: 3; }
} */

.rbl input[type=radio], .rbl input[type=checkbox] {
    margin-right: 10px;
}