/* Popup css */
#element_to_pop_up{
    background-color : #fff;
    color            : #000;
    display          : none;
    padding          : 20px;
    min-width        : 700px;
    min-height       : 405px;
}

.bClose{
    cursor   : pointer;
    position : absolute;
    right    : 10px;
    top      : 5px;
    float    : right;
}

.b-iframe{
    width  : 100%;
    height : 100%;
    border : none;
}

/* Login */

.card-inloggen{
    box-shadow       : 0 3px 6px rgba(0, 0, 0, 0.16);
    background-color : #ffffff;
    margin-left      : auto;
    margin-right     : auto;
}


body{
    font-family : Arial;
}

/* blokkeren van input velden */
.locked{
    pointer-events: none;
}

/* breedte van de knoppen in de datatable */
.button_column{
    min-width: 25px;
    max-width: 25px;
}

/* links lijnen in de datatable */
td.left_column, th.left_column{
    text-align: left;
    padding-left: 10px !important;
}

/* rechts lijnen in de datatable */
td.right_column, th.right_column{
    text-align: right;
    padding-right: 10px !important;
}

/* centreren in de datatable */
td.center_column, th.center_column{
    text-align: center;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* hoogte van de cellen in de datatable */
#table_id td{height: 61px;vertical-align: middle;}

/* marge verkleinen tussen logo en menu */
.scroll-sidebar{padding-top:0px;}

/*.sidebar-nav ul li ul li a{padding-top:0px;padding-bottom:0px;} */



@media (orientation:portrait) , (max-width: 480px) {
    .hide_mobile{display:none;}

    .sidebar-nav ul li a{display: flex;min-width:125px;}

    #element_to_pop_up{
        min-width        : 95%;
    }

    .page-wrapper-auth{
        top: 70px;
        position: relative;
        height: calc(100vh - 70px);
    }

    .container-fluid{
        padding-right: 5px;
        padding-left: 5px;
    }
}

    /* Styles for Landscape screen */
@media (orientation:landscape) and (min-width: 481px){
    .hide_desktop{display:none;}
}

@media only screen and (max-width : 800px){
    .card-inloggen{
        width : 90%;
    }

    .inlogbalk{
        display : none
    }
}

@media only screen and (min-width : 801px){
    .card-inloggen{
        min-width : 700px;
        width     : 50%;
    }
}

.card-body-login{
    width   : 100%;
    padding : 5px 30px 30px 30px;
}

/* Bij de login de linker witte balk weghalen, maar wel nog de goede kleur laten zien*/
.page-wrapper-auth{
    background-color : #f2f7f8; /*Standaard achtergrond kleur*/
}

.login-icon{
    float        : right;
    font-size    : 70px !important;
    margin-right : 30px;
    margin-top   : 15px;
    color        : #9d9e9c;
}

.inlogbalk{
    height        : 150px;
    padding       : 15px 0 0 30px;
    border-bottom : 1px solid #424242;
}

.btn-primary-login{
    border        : none !important;
    border-radius : 0 !important;
    color         : white;
    padding       : 16px 32px !important;
    text-align    : center;
    font-size     : 16px;
    width         : 100%;
    margin        : 54px 2px 4px 2px;
    transition    : 0.3s;
}

/* Form */
.form_padding_top{
    padding-top : 40px !important;
}

.form-control{
    border        : none !important;
    border-radius : 0 !important;
    border-bottom : solid 2px #ececec !important;
    max-width     : 629px !important;
    padding-left  : 0 !important;
    box-shadow    : none;
}

.form-group{
    padding-bottom : 15px;
}

.form-control:hover{
    border-bottom : solid 2px #55ce63 !important;
    transition    : 0.3s;
}

.form-control:focus{
    box-shadow    : none;
    border-bottom : solid 2px #55ce63 !important;
    transition    : 0.3s;
}

.form-control-wijzigen{
    border        : none !important;
    border-radius : 0 !important;
    border-bottom : solid 2px #ececec !important;
    width         : 100%;
}

.form-control-wijzigen:hover{
    border-bottom : solid 2px #1a83c3 !important;
    transition    : 0.3s;
}

.form-control-wijzigen:focus{
    border-bottom : solid 2px #1a83c3 !important;
    transition    : 0.3s;
}

/* Button */
.btn{
    border-radius : 0 !important;
}

.btn-primary{
    border     : none !important;
    color      : white;
    padding    : 16px 32px !important;
    text-align : center;
    font-size  : 16px;
    margin     : 4px 2px;
    transition : 0.3s;
    float      : right;
    background : linear-gradient(to left, #55ce63 8.82%, rgb(78, 190, 96) 39.5%, #44b641 86.13%) !important;
}

.btn-wijzigen{
    border     : none !important;
    color      : white;
    padding    : 16px 32px !important;
    text-align : center;
    font-size  : 16px;
    width      : 100%;
    margin     : 4px 2px;
    transition : 0.3s;
    cursor     : pointer;
}

.btn-success{
    background    : linear-gradient(to left, #55ce63 8.82%, rgb(78, 190, 96) 39.5%, #44b641 86.13%) !important;
    border        : none !important;
    border-radius : 0 !important;
    padding       : 15px 30px !important;
    display       : inline !important;
}

.btn-secondary{
    border        : none !important;
    border-radius : 0 !important;
    padding       : 15px 30px !important;
}

.btn-danger{
    border : none !important;
}

/* Table */
.table_id_paginate{
    border           : none !important;
    background-color : #ed5153 !important;
}

.nieuws{
    border-collapse : separate !important;
    line-height     : 61px;
}

.contacten{
    border-collapse : separate !important;
    line-height     : 61px;
}

.kinderen{
    border-collapse : separate !important;
    line-height     : 61px;
}

.ouders-verzorgers{
    border-collapse : separate !important;
    line-height     : 61px;
}

.incidenten{
    border-collapse : separate !important;
    line-height     : 61px;
}

.table{
    border-collapse : separate !important;
}


.table-striped tbody tr:nth-of-type(odd){
    box-shadow : 0 3px 6px rgba(0, 0, 0, 0.16);
}

.table-striped tbody tr:nth-of-type(even){
    box-shadow : 0 3px 6px rgba(0, 0, 0, 0.16);
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after{
    border-radius    : 50% !important;
    background-color : #ffffff !important;
    padding          : 4px 8px !important;
    box-shadow       : 0 3px 6px rgba(0, 0, 0, 0.16) !important;
}

tr{
    max-width : 100% !important;
}

th{
    border-bottom  : none !important;
    padding-bottom : 0 !important;
}

td{
    background-color : #ffffff;
}

.table td, .table th{
    border  : none !important;
    padding: 0;
}

/* Algemeen*/
.text-themecolor{
    color : #1A83C3;
}

.navbar-collpase{
    background-color : #1a83c3 !important;
}

.dropdown-menu-right{
    text-align : center !important;
    padding    : 0 !important;
}

.uitloggen-knop a{
    padding : 20px !important;
}

.uitloggen-knop a:hover{
    padding          : 20px !important;
    background-color : #55ce63 !important;
    color            : white !important;
    transition       : 0.3s;
}

.wachtwoord-knop a{
    padding : 20px !important;
}

.wachtwoord-knop a:hover{
    padding          : 20px !important;
    background-color : #55ce63 !important;
    color            : white !important;
    transition       : 0.3s;
}

label h5{
    font-size : 60px;
    color     : #1A83C3;
}

.hidden_input{
    display : none;
}

.content_text{
    height : 450px !important;
}

.margin-right-5{
    margin-right : 5px;
}

.margin-bottom-15{
    margin-bottom : 15px;
}

.padding-left-15{
    padding-left : 15px;
}

.werkelijkheid_padding_top{
    padding-top : 40px;
}

.img-thumbnail{
    max-width : 300px !important;
}

.navbar-brand{
    max-width  : 210px;
    line-height: 70px;
}

.header_img{
    width      : 100%; /* Moet erbij zodat hij ook goed klein word gemaakt als het linkermenu klein word gemaakt */
}

.logo{
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 120px;
}

#wachtwoord-wijzigen{
    background-color : #1a83c3;
    height           : 150px;
    margin           : 0;
    padding          : 3.5%;
    align-items      : center;
    color            : white;
    font-size        : 40px;
    font-weight      : 500;
}

#wachtwoord-vergeten{
    padding-top : 50px;
}

.card-body-geen-account{
    box-shadow       : 0 3px 6px rgba(0, 0, 0, 0.16);
    height           : 100px;
    margin-top       : 45px;
    max-width        : 50%;
    background-color : #ffffff;
    align-items      : center;
    display          : flex;
    justify-content  : center;
    margin-left      : 25%;
}
/*
#tekst{
    text-align : center;
    color      : #000000;
}

#tekst a{
    color : #1a83c3;
}*/

.link-registreer{
    margin-left : 5px;
}

.card-body-wachtwoord-wijzigen{
    box-shadow      : 0 3px 6px rgba(0, 0, 0, 0.16);
    height          : 650px;
    align-items     : center;
    display         : flex;
    justify-content : center;
}

#table_id{
    border-spacing : 0 12px;
}

#table_id_next:hover{
    cursor : pointer;
}

#table_id_previous:hover{
    cursor : pointer;
}

th.sorting{
    font-weight      : normal !important;
    background-color : #f2f7f8 !important;
    border-width     : 10px !important;
}

.dataTables_filter input{
    height           : 40px !important;
    background-color : transparent;
    padding-top      : 10px !important;
    border-bottom    : solid 2px #55ce63 !important;
}

.dataTables_filter input:hover{
    background-color : transparent;
    border-bottom    : solid 2px #55ce63 !important;
}

.dataTables_filter input:focus{
    background-color : transparent;
    border-bottom    : solid 2px #55ce63 !important;
}

.verwijderen{
    text-align : right !important;
}

.autocomplete-suggestions{
    border             : 1px solid #999;
    background         : #FFF;
    cursor             : default;
    overflow           : auto;
    -webkit-box-shadow : 1px 4px 3px rgba(50, 50, 50, 0.64);
    -moz-box-shadow    : 1px 4px 3px rgba(50, 50, 50, 0.64);
    box-shadow         : 1px 4px 3px rgba(50, 50, 50, 0.64);
}

.autocomplete-suggestion{
    padding     : 2px 5px;
    white-space : nowrap;
    overflow    : hidden;
}

.autocomplete-no-suggestion{
    padding : 2px 5px;
}

.autocomplete-selected{
    background : #F0F0F0;
}

.autocomplete-suggestions strong{
    font-weight : bold;
    color       : #000;
}

.autocomplete-group{
    padding : 2px 5px;
}

.autocomplete-group strong{
    font-weight   : bold;
    color         : #000;
    display       : block;
    border-bottom : 1px solid #000;
}

div[class^='form_']{
    display : none;
}

label[class^='toggle_']{
    border-bottom : 1px solid #cccc;
    width         : 100%;
    margin-bottom : 14px;
}

span[class^='arrow_']{
    margin-left : 5px;
    float       : right;
}

.rotate_1{
    transform  : rotate(-90deg);
    transition : 0.5s;
}

.rotate_2{
    transition : 0.5s;
}

textarea{
    /*resize: none !important;*/
    /*overflow   : hidden !important;*/
    min-height: 100px !important;
}

textarea:not(.mce-textbox){
    overflow: hidden !important;
}

/*Voor de euro, procent, etc. tekens zodat deze gelijk lopen met de invoervelden*/
div[class=row] > div[class^='col-xs-'] > p{
    padding       : 6px 0 6px 0;
    text-align    : center;
    height        : 34px;
    border-bottom : 2px;
}

.mini-sidebar .sidebar-nav #sidebarnav > li > ul{
    top   : 60px;
    float : right;
}

.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a{
    color           : white;
    text-decoration : none;
}

.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a > i{
    width : 60px;
}

/* Maakt alle icons die in de datatables staan groter */
td > a > i.mdi{
    font-size:20px !important;
}