/*Navbar */

#main{
  margin-left: 200px;
  transition: margin-left 0.5s;
  z-index: 999988;
  display: flex;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif ;
}

.Logo{
  height: 100%;
  align-items: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

.open-slide{
  position: fixed;
  top: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
}

.navbar{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 63px;
  background-color: #3b5998 ;
  overflow: hidden;
  z-index: 999999;
  box-shadow: -4px 5px 13px -1px rgba(0,0,0,0.32);
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a{
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  font-size: 17px;

}
#openlogo{
  color: #3b5998 ;
  margin-top: 12px;
  margin-left: 7px;
  width: 0px;
  text-align: center;
  vertical-align: middle;
}

.logo{
  
  width: 157px;
  height: 52px;
  z-index: 999999;
}
.navbar ul {
 
  list-style: none;
}
#logozoom{
  font: 25px;
}
.navbar a #logozoom:hover{
  color: rgb(32, 0, 83);
}

.side-nav{
  height: 95%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1) ;
  overflow-x:hidden;
  padding-top: 60px;
  transition: 0.5s;
}


.side-nav .menuitem{
  padding: 10px 10px 10px 30px ;
  text-decoration: none;
  font-size: 16px;
  color: #333;
  font-weight: 500 ;
  font: arial ;
  display: flex;
  flex-direction: row;
  transition: 0.3s;
}

.navicon{
  width: 30px;
}

.side-nav .menuitem:hover{
  text-decoration: none;
  color: #3b5998;
  background-color: rgb(229, 231, 231);
}

.secondheader{
  background-color: grey !important;
}

.moduleblok {
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 200px;
  color: #f2f2f2;
  height: 25px;
  transition: 0.5s;
}

.module{
  width: 80%;
  height: 100%;
  text-align: center;
  background-color: #3b5998;
}

.sluiten{
  width: 20%;
  height: 100%;
  background-color: #a7a5a5;
  color: rgb(17, 15, 15);
  font-weight: bold;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
}

.sluiten:hover{
  background-color: #570000;
  color: red;
  text-decoration: none;
}

/* Login page */

 .loginscreen{
  position: fixed;
  width: 525px;
  min-height: 450px;
  background-color: rgb(255, 255, 255);
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}


@media (max-width: 350px) {
  .loginscreen {
      width: 350px;
      min-height: 450px;

  }
}

@media (max-width: 480px) {
  .loginscreen {
      top: 50%; /* IMPORTANT */
      left: 50%; /* IMPORTANT */
      display: block;
      position: absolute;
     
      width: 750px;
      min-height: 417px;

      margin-top: -208.5px; /* HALF OF THE HEIGHT */
      margin-left: -375px; /* HALF OF THE WIDTH */
  }
}

.distance-login{
 margin-top: 30px;
 z-index: 999999;
}

.active{
  color: #3b5998 !important;
  background-color: rgb(229, 231, 231);
}
.background {
    position: fixed;
    top: 0px;
    left:0px;
    z-index: -1;
    width:100%;
    height: 100%;
    opacity:0.9;
}


.logologin {
  position:relative;
  margin-left: 90px;
  margin-bottom: 10px;
  z-index: 999999;
  width: 209px;
  height: 60px;

}


.flexbox-container-logout{
  display:flex;
  margin-left: 5%;
  margin-top: 20px;
  width: 90%;
  box-shadow: 0 0 20px rgba(0, 0, 0, .15);
  overflow: hidden;
  border-radius: 9px;
  flex-wrap: wrap;
  justify-content:space-around;
  align-items: start;
  text-align: center;
}

.flexbox-container-logout-2{
  display:flex;
  margin-left: 5%;
  margin-top: 20px;
  min-height: 310px;
  width: 90%;
  overflow: hidden;
  border-radius: 9px;
  flex-wrap: wrap;
  justify-content:space-around;
  align-items: start;
  text-align: center;
}

.holder{
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  width:98%;
}


.boxenholder2{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.titelbalk{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 5px;
  height: 30px;
  background-color: #2D323E;
  color: #ffffff;

}

.titel{
  width: 62%;
  margin-left: 2%;
  height: 100%;
  align-items: center;
}
 
.extra{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 10px;
  width: 35%;
  height: 100%;
}

.titel2{
  width: 62%;
  height: 100%;
  align-items: center;
}
 
.extra2{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 10px;
  width: 35%;
  height: 100%;
}

.infobalk{
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  width: 100%;
  border-radius: 5px ;
  border:1px solid rgb(160, 159, 159);
  min-height: 25px;
  background-color: #cecece;
  color: #333;
  font-size: 14px;
 
}

.infotekst{
  display: flex;
  flex-wrap: wrap;
  width: 55%;
  margin-left: 2%;
  height: 100%;
}

.infoextra{
  display: flex;
  flex-wrap: wrap;
  width: 45%;
  height: 100%;
  justify-content: flex-end;
}

.infotekst2{
  display: flex;

  width: 100%;
  margin-left: 2%;
  height: 100%;
}

.infoextra2{
  width: 0%;
  display: flex;
  float: right;
  height: 100%;
  justify-content: flex-end;
}

.beheermenu{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-top: 7px;
  width:100%;
  
}

.topicbox{
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  vertical-align: middle;
  min-width: 250px;
  width:15%;
  font-weight: bold;
  height: 40px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid rgb(192, 190, 190);
}

.topicbox2{
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  vertical-align: middle;
  min-width: 175px;
  width:10%;
  font-weight: bold;
  height: 40px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid rgb(192, 190, 190);
}

.topicbox:hover,
.topicbox2:hover{
  background: rgb(209, 209, 209);
  text-decoration: none;
  color: #3b5998;
}

.activetopic{
  color: #3b5998;;
  border-bottom: 3px solid #3b5998;;
}

.shadowholder{
  display: flex;
  margin-top: 10px;
  border-radius: 5px;
  width: 100%;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(0, 0, 0, .15);


}

.shadowholder2{
  display: flex;
  margin-top: 10px;
  border-radius: 5px;
  width: 100%;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(0, 0, 0, .15);


}

.subtitel,
.subtitel2{
  display: flex;
  flex-direction: row;
  margin-left: 20px;
  margin-top: 10px;
  color: #333;
  font-weight: bold;
  font-size: 16px;  
}

.subtitel2{
  justify-content: space-between;
}

.content{
  width: 98%;
  margin-left: 1%;
  margin-top: 1%;

}

.contentreiskosten{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 98%;
  margin-left: 1%;
  margin-top: 1%;

}

.formuliercontainer{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 98%;
  margin-left: 1%;
  margin-top: 1%;
}

.timingcontainer{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;

  width: 98%;
  margin-left: 1%;
  margin-top: 1%;
}

.formuliercontainer2{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 98%;
  margin-left: 1%;
}

.formholder1,
.formholder2,
.formholder3{
  width: 33%;
  min-width: 250px;
  display: flex;
 
  flex-direction: column;
  align-items: center;
}

.Pauzeweek{
  background-color: rgb(253, 200, 103) !important;
}

.formholder11{
  width: 30%;
  min-width: 250px;
  display: flex;
 
  flex-direction: column;
  align-items: center;
}

#Hoog{
  color: rgb(169, 8, 8);
}

#Laag{
  color: green;
}

#Gemiddeld{
  color: orange;
}

.formholder9{
  width: 66%;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.formholder19{
  width: 99%;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.formsetholder1,
.formsetholder2,
.formsetholder3,
.formsetholder4,
.formsetholder5{
  min-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.formsetholder1,
.formsetholder5{
  width:20%;
}

.formsetholder2,
.formsetholder3,
.formsetholder4{
  width:15%;
}


.formsetholder6{
  display: flex;
  justify-content: center;
  vertical-align: middle;

  width: 5%;
}

.formseticon{
  margin-top: 15px !important;
  color: red !important;
}

.formseticon:hover{
  color: rgb(65, 0, 0) !important;
}

.filterholder1,
.filterholder2,
.filterholder3,
.filterholder4,
.filterholder5{
  width: 19%;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.orderholder1,
.orderholder2,
.orderholder3,
.orderholder4{
  width: 24%;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dataTables_info,
.dataTables_length,
.dataTables_paginate {
  font-size: 14px;
  color: #333;
  font: arial ;
  margin-top: 10px;
  margin-bottom: 10px;
  
}

.bottom{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.dt-buttons{
  margin-top: 10px;
}

.dt-buttons,
.dataTables_length,
.dataTables_info,
.dataTables_paginate{
  display: flex;
  min-width: 150px;
}

.beheertable,
.beheertable2 {
  border-collapse: collapse;
  width: 98%;
  margin:0px;
  font-size: 0.9em;
  min-width: 400px;
  border-radius: 7px 7px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, .15);
  margin-left: 1%;
  margin-left: 1%;
} 

.beheertable th {
  background-color: #2D323E;
  color: white;
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.select2 {
  width: 100% !important;
  color: #333;
}

.beheertable tfoot th {
  background-color: #e7e7e9 !important;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid rgb(0, 0, 41);
}

tfoot {
  display: table-header-group !important;
}

th select{
  width: 80%;
  border-radius: 5px;
  height: 25px;
}

.tekstje input{
  border-radius: 5px;
  height: 32px;
  border : 1px solid rgb(201, 199, 199)
}
.select2-results,
.select2-dropdown{
  min-width:300px !important;
}
.beheertable2 th{
  background-color: #3B5998 !important;
}

.beheertable2 th,
.beheertable2 td,
.beheertable th,
.beheertable td {
  padding: 4px 3px;
  text-align: left;
}

.beheertable2 td,
.beheertable td {
  font-size:12px;
}

.beheertable tbody tr {
  border-bottom: 1px solid #dddddd;
}

.beheertable tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.beheertable tbody tr:last-of-type {
  border-bottom: 2px solid #3d70b2;
}



.boxenholder{
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.boxenholder2{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.factbox{
  display: flex;
  min-width: 190px;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-top: 15px;
  flex-direction: column;
  text-align: center;
  width: 15%;
  color: #333;
  box-shadow: -4px 5px 13px -1px rgba(0,0,0,0.32);
}

.factbox2{
  display: flex;
  min-width: 190px;
  border-radius: 5px;
  margin-bottom: 5px;
  margin-top: 10px;
  flex-direction: column;
  text-align: center;
  width: 15%;
  color: #333;
  box-shadow: -4px 5px 13px -1px rgba(0,0,0,0.32);
}

.factbox-title{
  font-size: 12px;
  font-weight: bold;
}

.factbox-fact{
  font-size: 22px;
  font-weight: bold;
}


.dropbtn{
  position: fixed;
  right: 20px;
  top: 15px;
  z-index: 999999;
  background-color: #3B5998;
  border-radius: 5px;
  border: none;
  color: white;
  box-shadow: -4px 5px 13px -1px rgba(0,0,0,0.32);
  padding: 5px;
}

.dropbtn:hover{
  background-color: #102044;
}
.doubleLabel{
  display: flex;
  flex-direction: row;
}

#form1{
  width: 90%;
  margin-bottom: 20px !important;
  align-items: center;
}

#formwarning{
  display: flex;
  font-size: 10px;
  width: 90%;
  color: red;
  margin-left: 7px;
  margin-top: 2px;

}

#NeeIcoon{
 color: red;
}

#JaIcoon{
 color: green;
}

#formwarning select{
  display: flex;
  font-size: 10px;
  width: 90%;
  color: red;


}
#form2{
  width: 45%;
  margin-bottom: 0px !important;
  align-items: center;
}

.tweeineen{
  display: flex;
  justify-content: space-between;
  width: 90%;
}

#filterform1{
  width: 90%;
  align-items: center;
}

.form-group label{
  font-weight: bold !important;
  font-size: 12px;
}

.bevestigenknop,
.bevestigenknop2,
#meerdere_uitvoeren{
  background-color: #3B5998 !important;
  border: 1px solid rgb(255, 255, 255) !important;
  border-radius: 5px;
  margin-bottom:1px;

  color: white;
  font-size: 12px;
  font-weight: bold;
  height: 22px;
}

.bevestigenknop:hover,
.bevestigenknop2:hover,
#meerdere_uitvoeren:hover{
  background-color: darkgreen;
}



.errorlist,
.error{
  width: 100%;
  height: 25px;
  border-radius: 5px;
  box-shadow: -4px 5px 13px -1px rgba(0,0,0,0.32);
  list-style-type: none;
  background: rgb(253, 104, 104);
  color: rgb(136, 0, 0);
}


.positive{
  color: green;
}

.negative{
  color: red;
}

.up,
.down{
  display:block;
  height: 30;
  width: 30;
  border-radius: 50%;
  color: white;
  border: 1px solid darkgrey;
}

.up{
  background: green;
}

.down{
  background: red;
}

#bedrijvenknop{
  background-color: #4E4E4E;
  border-radius: 5px;

  margin-right: 5px;
  border: none;
  color: white;
  font-size: 10px;
  font-weight: bold;
  min-height: 20px;
  padding-left: 7px;
  padding-right: 7px;
  align-items: center;
  vertical-align: middle;
  text-decoration: none;
}

#bedrijvenknop:hover{
  background-color: green;
}
.reiskostenbox{
  display: flex;
  min-width: 250px;
  width:30%;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, .15);
  flex-direction: column;
  margin-bottom: 20px;
}

.reiskostentitel{
  display: flex;
  margin-top: 7px;
  margin-bottom: 7px;
  margin-left: 5%;
  width:95%;
  font-weight: bold;
  font-size: 12px;
  color: #333;
}
.reiskostencontent{
  display: flex;
  align-items: center;
  width:100%;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
}
.extrateskstje{
  margin-left: 5%;
  margin-bottom: 10px;
  width: 95%;
  font-size: 12px;
}
.detailboxen{
  width: 90%;
  background-color: rgb(243, 241, 241);
  border-radius: 5px;
  border: 1px solid grey;
  margin-bottom: 10px;
}

.detailboxentitel{
  display: flex;
  margin-top: 7px;
  align-items: center;
  margin-bottom: 15px;
  margin-left: 5%;
  width:95%;
  font-weight: bold;
  font-size: 12px;
  color: #333;
  
}

.detailboxeninfo{
  display: flex;
  margin-top: 7px;
  align-items: center;
  margin-bottom: 7px;
  margin-left: 5%;
  width:95%;
  font-size: 12px;
  color: #333;
  
}

.warningboxje{
  display: flex;
  margin-top: 7px;
  align-items: center;
  margin-bottom: 7px;
  margin-left: 5%;
  width:95%;
  font-weight: bold;
  font-size: 12px;
  color: rgb(86, 3, 3);
}

.gefactureerd{
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 12px;
  width: 100%;
  background-color: rgb(239, 218, 218);
  border-radius: 8px;
  color: rgb(45, 27, 27);
}

.gefactureerd12{
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 12px;
  width: 100%;
  background-color: rgb(163, 234, 175);
  border-radius: 8px;
  color: rgb(45, 27, 27);
}

.gefactureerd2{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-left: 5%;
  font-size: 12px;
  width: 90%;
  background-color: rgb(163, 234, 175);
  border-radius: 8px;
  color: rgb(45, 27, 27);
}

.gefactureerd3{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-left: 5%;
  font-size: 12px;
  width: 90%;
  background-color: rgb(245, 117, 113);
  border-radius: 8px;
  color: rgb(45, 27, 27);
}

#bedrijvenknop2{
  background-color: green;
  border-radius: 5px;

  margin-right: 5px;
  border: none;
  color: white;
  font-size: 10px;
  font-weight: bold;
  min-height: 20px;
  padding-left: 7px;
  padding-right: 7px;
  align-items: center;
  vertical-align: middle;
  text-decoration: none;
}

#bedrijvenknop2:hover{
  background-color: rgb(1, 46, 1);
}

#statusknop{
  border-radius: 5px;
  margin-right: 5px;
  border: none;
  color: white;
  font-size: 12px;
  font-weight: bold;
  height: 21px;
  padding-left: 7px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-right: 7px;
  align-items: center;
  vertical-align: middle;
  text-decoration: none;
}

.resetknop,
.nogo{
 background-color: #570000;
}
.resetknop:hover,
.nogo:hover{
  background-color: #b60909;
 }

.gepland,
.resetknop2,
.updateknop{
  background-color: #3B5998;
}

.gepland:hover,
.updateknop:hover{
  background-color: #02194b;
}
.akkoord,
.Akkoord,
.go,
.verzenden{
  background-color: green !important;
}

.go:hover,
.akkoord:hover,
.verzenden:hover{
  background-color: rgb(2, 70, 2);
}

.nietakkoord,
.Niet,
.afsluiten{
  background-color: rgb(136, 6, 6) !important;
}

.nietakkoord:hover,
.afsluiten:hover{
  background-color: rgb(226, 0, 0)!important;
}
.Afsluiten{
  background-color: #4b4b4b !important;
}
.open,

.Afronden,
.afronden{
  background-color: #3B5998 !important;
}

.onderaan{
  background-color: white!important;
}


.bovenaan{
  background-color: rgb(224, 222, 222)!important;
}

.bovenaan td{
  border-bottom: 2px solid #3B5998 !important;
}

.longbar{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  color: white;
  background-color: #3B5998;
}
.Verzonden{
  background-color: rgb(2, 99, 2) !important
}
.Afgesloten{
  background-color: #2d2d2e;
}

.open:hover,
.afronden:hover{
  background-color: #082563;
}

.ongedaan{
  background-color: #4e4e4e;
}

.ongedaan:hover{
  background-color: #2e2d2d;
}

.Klant,
.GO{
  background-color: green!important ;
}

.Geen,
.Voorbereiding,
.voorbereiding{
  background-color: rgb(243, 158, 0) !important;
}

.voorbereiding:hover{
  background-color: rgb(253, 185, 57) !important;
}
.Oud,
.NO-GO{
  background-color: rgb(136, 6, 6) !important;
}


.form-group {
  margin-bottom: 0px !important;
}

.form-group{
  width: 90%;
}

.form-group input, 
.form-group select, 
.form-group textarea{
  color: rgb(29, 29, 29);
}

#cross{
  color: rgb(92, 0, 0);
}
#check{
  color: darkgreen;
}

.searchholder{
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
  width: 100%;
  float: right;
}

.rechtsaf{
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.stevige_tekst{
  margin-bottom: 0px !important;
}

#keuzeveld{
  display: flex;
  flex-direction: row;
}

.smaller{
  font-size: 12px;
}
.waarde{
  width: 85%;
}

.iconen{
  display: flex;
  justify-content: space-between;
  width: 15%;
}

.planning_zoeken{
  color: darkgreen !important;
}

.planning_zoeken:hover{
  color: rgb(5, 173, 5) !important;
}

.planning_verwijder{
  color: #570000 !important;
}

.planning_verwijder:hover{
  color: #990505 !important;
}

.selecteerknop{
  background: none;
  color: #1e51c0;
  text-decoration: underline;
  font-weight: bold;
  border: none;
}

.selecteerknop:hover{
  color: #165cf3;
  text-decoration: underline;

}

#id_timing_set-0-opmerking,
#id_timing_set-1-opmerking,
#id_timing_set-2-opmerking,
#id_timing_set-3-opmerking,
#id_timing_set-4-opmerking,
#id_timing_set-5-opmerking,
#id_timing_set-6-opmerking,
#id_timing_set-7-opmerking,
#id_timingcomment
{
  color: red;
}

.meerdere{
  display: flex;
  flex-direction: row;
}

.blokjes{
  background: #165cf3;
  color: white;
  border-radius: 5px;
  margin-right: 2px;
  margin-bottom: 1px;
  padding: 2px;
}




td.details-control {
  background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
  cursor: pointer;
}
tr.shown td.details-control {
  background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

td.details-control {
  background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center;
  cursor: pointer;
  width: 30px;
  transition: .5s;
}

tr.shown td.details-control {
  background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center;
  width: 30px;
  transition: .5s;
}

td.details-control1 {
  background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center;
  cursor: pointer;
  width: 40px;
  transition: .5s;
}

tr.shown td.details-control1 {
  background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center;
  width: 40px;
  transition: .5s;
}

td.details-control2 {
  background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center;
  cursor: pointer;
  width: 50px;
  transition: .5s;
}

tr.shown td.details-control2 {
  background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center;
  width: 50px;
  transition: .5s;
}