/* PAGE LOADER */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../images/Preloader_21.gif) center no-repeat #fff;
}


/* modal avviso targa e immagini*/
.modal {
  text-align: center;
  padding: 0!important;

}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.icoModalAlert {
    color :#d15b47  !important;
}

.icoModalWarn {
    color :#ffb752 !important;
}

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

/*#ImgBtn {
    
    position: absolute;
    top: 55%;
    left: 30%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
#ImgBtn,*/ #ImgPres {
    line-height: 50px;
}

#ImgPres {
    vertical-align: middle;
    color:#4f99c6 ;
    margin-left: 10px;
}

.image-emoji {
    margin: 5px;
    width: 20px;
    height: 20px;
}

.image-emoji:hover {
    border: 2px solid #03b1fc;
    border-radius: 10px;
    width: 25px;
    height: 25px;
}

.image-emoji-selected {
    border: 2px solid #03b1fc;
    border-radius: 10px;
    width: 25px;
    height: 25px;
}

.bottone-cerca-emoticon {
    border-radius: 8px !important;
    height: 28px;
}

.bottoniForm {
    border-radius: .25em !important;
}

.bottoniInputGroup {
    border-radius: 0 .25em .25em 0 !important;
}


.contForm {
    /*margin: 5%;*/
    border: 1px solid #cccccc;
    border-top: none;
    padding: 1% 3% 3% 3%;
    margin-top: -5px;
}

.errore{
    min-height: 50px;
    color: red;
}
.errore div {
    margin-top: 6px;
    margin-bottom: 6px;
}
/*.errore div:last-child {
    margin-bottom: 15px !important;
}*/
#esito{
    min-height: 10px;
}
#esito div {
    margin-top: 6px;
    margin-bottom: 6px;
}

#editRichiesta{
    line-height: 1.7em;
}
#editRichiesta  .form-group{
    padding-top: 2px;
}
.lobel {
    /*padding-top: .2em;
    padding-bottom: .2em;*/
    vertical-align: middle;
    font-weight: 700;
    color: #fff;
    border-radius:.25em;
    width:100%;
    opacity: 0.7;
    text-align:center;
}
.lobel  h3,h4,h5,h6,p{
    line-height: 2em !important;
}
.lobelLeft {    
    /*padding-top: .2em;
    padding-bottom: .2em;*/
    font-weight: 700;
    color: #fff;
    border-radius:.25em;
    opacity: 0.7;
    text-align:left;
    text-indent: 2%;
    vertical-align:middle;
}
.lobelLeft  h5,h4,h5,h6,p {
    line-height: 2em !important;
}
.err {
    margin-bottom: -10px !important;
    margin-top: -10px !important;
}
#msga{
    min-height: 50px;
    }
#bSubmit{
     border-radius:.25em;
}
/*
    NON SERVE PIU - ALLEGATI ORA SONO IN UN MODAL
.dpCont {
    background-color: #ccc;
    border-radius: .25em;
    margin-bottom: auto;
    min-height: 70px;
}*/

.vcenter
 {
    display: inline-block;
    vertical-align: middle;
    float: none;   
}
.ruolo {
    margin-right: 2px;
}

.titoliIndex{
    font-size: 22px;
    margin: 0px;
    padding:4px 9px;
    line-height: 1.38;
    border-width: 4px;
}
.row-titolo{
    margin-bottom: 5px;
}


#adalogo{
    height: 100px;
}

/*datatables*/
#BackOffice, #RecordList, #Richieste, #Manutenzione, #Marche, #RegimeIVA, #StoricoRichieste, #Utenti td, th {
    text-align: center;
}

#BackOffice, #RecordList, #Richieste, #Manutenzione, #Marche, #RegimeIVA, #StoricoRichieste {
    border-collapse: collapse !important;
}

/*navbar top*/
.user-info{
    text-align: center !important;
    line-height: normal !important;
}
.mainTitle{
    left: 0;
    right:0;
}

/*dropzone*/
.dropzone .dz-preview img {
    padding: 3px;
    border: 0px !important;
    margin: 5px;
    border-radius: 14px !important;
    /*object-fit: contain;*/
}



.dz-preview.dz-complete.dz-image-preview {
    /*width: 12em !important;*/
    margin-left: 10px;
    margin-right:10px;
}
.dropzone.dz-clickable{
    text-align: center;
}

/*  EB 03/03/2017 */
 .dropzone .dz-preview  {
     height : 200px !important;
     width: 240px !important;
 }

 .dz-image > img {
    height: /* 10em  */ 200px !important;
    width: /*  12em  */ 240px !important;

}
 /*  EB 03/03/2017 - fine*/

 .dz-message{
    margin-top: 20px;
    font-size: 1em;
    text-align: center;
}
 .dropzone {
     cursor: pointer;
 }
/*IE9 o meno (no dropzone)*/
.fallback{
    text-align: center;
    margin-bottom: 15px;
    margin-top: 5px;
}
.fallback input[type=file]{
    text-align:center;
}
 #file {
    margin-bottom: 5px;
    margin-top:5px;
    height:30px;
}
 #anteprime{
     text-align: center;
 }
    #anteprime div {
        display: inline-block;
    }
#anteprime div img {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 0.25em;
    
}
.dropzone.dz-browser-not-supported{
    border: none;
}
 .form-horizontal{
        margin-top: -5px;
    }
 .ie8 body { 
    font-size: 130% !important;
}

 .anteie{
    position:relative;
    display:inline-block;
    text-align:center;
    margin-bottom: 15px;
}
    .anteie img {
        z-index: 11;
    }
.antbotS {
    z-index:12;
   margin-left: 30% !important;
    margin-right:30% !important;
    bottom: 0px;
    width: 40%;

    position:absolute;

}
.antbotC {
    z-index:12;
    margin-left: 30% !important;
    margin-right: 30% !important;
    bottom: 0px;
    width: 40%;
    margin-top: 3px !important;
    position:absolute;

}
#titlestorico {
    cursor: pointer;
}
#StoricoRichieste_filter{
    display: none;
}
#StoricoRichieste_info{
    display: none;
}
#StoricoRichieste_paginate{
    display: none;
}
#StoricoRichieste  th{
    color: black;
}
#editRichiesta input:disabled {
    color : #666 !important;
    font-weight: 700;
}
#editRichiesta select[disabled] {
    color:#666 !important;
    font-weight: 700;
}
#editRichiesta textarea:disabled {
    color:#666 !important;
    font-weight: 700;
}

.multiselect-container.dropdown-menu {
    width: 100%;
}

.multiselect-container.dropdown-menu .checkbox {
        background: #fff;
        color: #000;
}
.multiselect-container.dropdown-menu .checkbox:hover {
        background: #ccc;
        color: #000;
}

/*********************************************************
**************   MEDIA QUERIES   *************************
**************   x datatables    *************************
**********************************************************

    le classi nascondibili sono applicate alle tabelle
    la classe è assegnata dal web.config
    quelle con il numero più basso sono 
    le 1° ad essere nascoste
    quelle con il numero più alto le ultime

*********************************************************/

/* colonne da visualizzare tab richieste*/

@media screen and (max-width: 460px) {
    /*dettagli utente (utente ultima modifica) */
    .nascondibile3 {
        display: none;
    }
}
@media screen and (max-width: 550px) {
    /*dettagli auto (modello e marca) */
    .nascondibile2 {
        display: none;
    }
}
@media screen and (max-width: 888px) {   
    .nascondibile1{
        display: none;
    }
}

@media screen and (max-width: 1220px) {
    /*venditore*/
    .nascondibile0 {
        display: none;
    }
}


/*colonne da visualizzare tab storico*/
@media screen and (max-width: 1180px) {
    /*dettagli auto  (ritiro e targa)*/
    .nascondibileS1 {
        display: none;
    }
}
@media screen and (max-width: 950px) {
    .nascondibileS2 {
        display: none;
    }
}


/*colonne da visualizzare utenti*/
@media screen and (max-width: 1150px) {
    /*dettagli auto  (ritiro e targa)*/
    .nascondibile1U {
        display: none;
    }
}
@media screen and (max-width: 900px) {
    .nascondibile2U {
        display: none;
    }
}
@media screen and (max-width: 550px) {
    .nascondibile3U {
        display: none;
    }
}


/*comandi tabella richieste*/

@media only screen and (max-width: 460px) {

    #BackOffice_paginate, #RecordList_paginate, #Richieste_paginate, #Marche_paginate, #Manutenzione_paginate, #RegimeIVA_paginate,
    .dataTables_filter {
        font-size: 80%;
    }
    .dataTables_filter{
        float:none;
    }
    .dataTables_wrapper label {
       font-size: 95% !important;
    }
    .dataTables_filter label input {
        height: 12px !important;
    }
}
@media only screen and (min-width: 460px) and (max-width: 780px) {
    #BackOffice_paginate, #RecordList_paginate, #Richieste_paginate, #Marche_paginate, #Manutenzione_paginate, #RegimeIVA_paginate,
    .dataTables_filter {
        font-size: 100%;
    }

    .dataTables_wrapper label {
        font-size: 105% !important;
    }
    .dataTables_filter label input {
        height: 15px !important;
    }
}
@media only screen and (max-width: 550px) {
    #BackOffice_paginate, #RecordList_paginate, #Richieste_paginate, #Marche_paginate, #Manutenzione_paginate, #RegimeIVA_paginate,
    .dataTables_filter {
        text-align: center !important;
    } 
      .dataTables_filter {
        float: none;
    }
}
@media only screen and (min-width: 550px) and (max-width: 780px) {
    #BackOffice_paginate, #RecordList_paginate, #Richieste_paginate, #Marche_paginate, #Manutenzione_paginate, #RegimeIVA_paginate,
    .dataTables_filter {
        text-align: right !important;
    } 
      .dataTables_filter {
        float: none;
    }

}

@media screen and (max-width: 780px) {
    #BackOffice_info, #RecordList_info, #Richieste_info, #Manutenzione_info, #Marche_info, #RegimeIVA_info {
        display: none;
    }

}

/*********************************************************
**************   MEDIA QUERIES   *************************
**************   x form esporta  *************************
**************    e parametri    *************************
**********************************************************
*********************************************************/


/*allineamento campi form esporta*/
@media screen and (max-width: 770px) {
    .campiFiltri{
        margin-top: 5px;
        float: none !important;
        margin-left: auto;
        margin-right: auto;
    }
    .form-horizontal{
        margin-left:auto;
        margin-right:auto;
    }

}
@media only screen and (max-width: 650px) {
    #inattivibtn, #attivibtn, #esportabtn {
        align-content: center;
        display: block;
        width: 100%;
        margin-bottom: 5px;
        font-size: 90% !important;
        line-height: 80%;
    }
}

/*titolo index e bottone esporta*/

@media screen and (max-width: 460px) {
    .row-titolo {       
        width: 90%;
        margin: auto;
    }
    .ridimensionaTitoli {
        font-size: 120%;
    }
    .vcenter{
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    #titleEdit.lobelLeft h5, #titleFiltri.lobelLeft h5{
        font-size: 100% !important;
        padding-left: 5%;
    }
}
@media screen and (max-height: 500px) {
    .form-horizontal .container-fluid.errore{
        min-height:0px !important;
    }
}

/*********************************************************
**************   MEDIA QUERIES   *************************
**************   x nav bar       *************************
**********************************************************
*********************************************************/


@media screen and (max-width: 550px) {

    /*ridimensiono titolo web app*/
    .ridimensiona {
        font-size: 60% !important;
    }

    /*tolgo nome utente navbar*/
    .user-info{
        display: none !important;
    }   

     
        .nav:before, .nav:after,
    .navbar:before, .navbar:after,
    .navbar-header:before, .navbar-header:after,
    .navbar-collapse:before, .navbar-collapse:after {
        display: inline;


    }

}



@media screen and (max-width: 46em) {

    /*descrizione titolo web app*/
    .descrizioneApp {
        display: none;
    }
    .mainTitle{
        text-align: center;
    }
  .navbar-brand.text-center{
      text-align: center;
  }
       .ridimensiona {
        font-size: 70% !important;
        text-align: center;
    }

    .navbar:not(.navbar-collapse) .ace-nav {
        text-align: right !important;
    }
    .navbar-fixed-top + .main-container {
        padding-top: 4em !important;
    }
}


/*********************************************************
*************    MEDIA QUERIES     ***********************
*************       x edit         ***********************
*************  dashboard e utenti  ***********************
*********************************************************/
/*anteprime dropzone*/
@media only screen and (max-width: 360px) {
    .dz-preview.dz-complete.dz-image-preview {
        /*width: 4em !important;*/
        margin-left: 5px;
        margin-right: 5px;
    }

    /*.dz-image > img {
        height: 4em !important;
        width: 4em !important;
    }*/
     

}
@media only screen and (min-width: 360px) and (max-width: 495px){
    .dz-preview.dz-complete.dz-image-preview {
        /*width: 5em !important;*/
        margin-left: 5px;
        margin-right:5px;
    }

    /*.dz-image > img {
        height: 5em !important;
        width: 5em !important;
    }*/

}

@media only screen and (min-width: 495px) and (max-width: 585px){
    .dz-preview.dz-complete.dz-image-preview {
        /*width: 8em !important;*/
        margin-left: 5px;
        margin-right:5px;
    }

    /*.dz-image > img {
        height: 6em !important;
        width: 8em !important;
    }*/


}
@media only screen and (min-width: 585px) and (max-width: 768px) {
    .dz-preview.dz-complete.dz-image-preview {
        /*width: 10em !important;*/
        margin-left: 5px;
        margin-right: 5px;
    }

    /*.dz-image > img {
        height: 8em !important;
        width: 10em !important;
    }*/

}



/*form*/

@media only screen and (max-width: 500px){
  #insert, #editRichiesta,#insertManutenzione, #insertMarche, #insertRegimeIVA .row{
        width: 95%;
    }

  .lobelLeft h5 {
        font-size: 97%;
    } 

}
@media only screen and (max-width: 768px){
            .bot-richieste {
        width:80%;
        margin:auto;
    }
    #indietro,#salvaa,#revisiona {
        align-content: center;
        display: block;
        width:100%;
        margin-bottom: 5px;
    }
}
/*@media only screen and (min-width: 500px) and (max-width: 760px) {
        .bot-richieste {
        width:80%;
        margin:auto;
    }
          #indietro,#salvaa,#revisiona {
        align-content: center;
        display: block;
        width:100%;
    }
}*/
@media only screen and (min-width: 500px) and (max-width: 768px){
  #insert, #editRichiesta,#insertManutenzione, #insertMarche, #insertRegimeIVA  .row{
       width: 90%;

    }
      /*.bot-richieste {
        width:80%;
    }*/
    

}
@media screen and (max-width: 768px){
    .lobel {
        margin-top: 10px;
    } 
    .lobel h3 {
        font-size: 110%;
    } 
    .contForm label{
        font-size: 98%;
    }  
  /*
.dpCont {
        max-width:90%;
        margin:auto;
    }
  */  
    #editRichiesta .row{

        margin-left: auto;
        margin-right: auto;
    }
  
     #insert, #editRichiesta,#insertManutenzione, #insertMarche, #insertRegimeIVA {
         margin: auto !important;
     }
       
    #storiconascosto{
         margin:auto;
    }
 

}
/*@media screen and (max-width: 980px) {
         /*.bot-richieste {
         text-align: right;
         font-size: 98%;
                 
     }    
    #salvaa {
        
        margin-left: 10px !important;
    }
}*/

@media screen and (max-height: 660px ) {

    /*dpCont {
        min-height: 10px;
    }*/
    .dropzone .dz-default.dz-message {
        vertical-align: middle;
        line-height: 50%;
        margin-top: 10px;
        margin-bottom: -25px;
    }

    .dz-message > span {
        font-size: 60%;
    }
 
}
/*********************************************************
*************    MEDIA QUERIES     ***********************
*************       x login        ***********************
**********************************************************
*********************************************************/
@media screen and (max-height: 600px ) {

    #id-text2 {
        font-size: 80%;
    }

    #adalogo {
        height: 75px !important;
    }

    .header {
        line-height: initial;
        margin-bottom: initial;
        margin-top: initial;
    }

    #msga {
        min-height: 0px;
    }
    .header.blue.lighter.bigger{
        font-size: 120% !important;
        margin-top: 0px;
    }
}
@media screen and (max-width: 360px ){
    #bSubmit {
        width: 90px !important;
    }
}




/* The switch - the box around the slider */
.coolChk {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

/* Hide default HTML checkbox */
.coolChk input {display:none;}

/* The slider */
.coolChk_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #666;
  -webkit-transition: .4s;
  transition: .4s;
}

.coolChk_disabled {
    opacity: 0.65;
}

.coolChk_disabled .coolChk_slider {
    cursor: not-allowed !important;
}


.coolChk_slider:before {
  position: absolute;
  content: "";
  height: 23px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .coolChk_slider {
  background-color: #629b58;
}

input:focus + .coolChk_slider {
  box-shadow: 0 0 1px #629b58;
}




input:checked + .coolChk_slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.coolChk_slider.round {
  border-radius: 34px;
}

.coolChk_slider.round:before {
  border-radius: 50%;
}


/*Red sliders*/

input:checked + .coolChk_slider.coolChkRed {
  background-color: #982121;
}

input:focus + .coolChk_slider.coolChkRed  {
  box-shadow: 0 0 1px #982121;
}



input:disabled + input:checked  + .coolChk_slider {
     background-color: #87b87f 
}

input:disabled + input:checked + .coolChk_slider.coolChkRed {
  background-color: #ad6464;
}

input:disabled + :not(.coolChk_slider) {
     background-color: #AAA

}


/* SOVRASCRIVO LABEL STANDARD PER FAVORIRE FORMATTAZIONE*/
label {
    display: block !important;
    margin-bottom: 1px;
}
.radio-inline {
    display: inline-block !important;
}



/* INPUT VERDI CONDIZIONATI*/
.greenInput {
    background-color: rgba(98, 155, 88, 0.50)  !important;
    color: #000 !important;
}

.redInput {
    background-color: rgba(210, 16, 16, 0.50) !important;
    color: #000 !important;
}


/* BOTTONE LAMPEGGIANTE */
.flash {
  background-color: #629b58;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #000;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}


@-webkit-keyframes glowing {
  0% { background-color: #629b58; border-color:#629b58; -webkit-box-shadow: 0 0 3px #629b58; }
  50% { background-color: #0bce24; border-color:#0bce24; -webkit-box-shadow: 0 0 40px #0bce24; }
  100% { background-color: #629b58; border-color:#629b58; -webkit-box-shadow: 0 0 3px #629b58; }
}

@-moz-keyframes glowing {
  0% { background-color: #629b58; border-color:#629b58;  -moz-box-shadow: 0 0 3px #629b58; }
  50% { background-color: #0bce24; border-color:#0bce24; -moz-box-shadow: 0 0 40px #0bce24; }
  100% { background-color: #629b58; border-color:#629b58;  -moz-box-shadow: 0 0 3px #629b58; }
}

@-o-keyframes glowing {
  0% { background-color: #629b58; border-color:#629b58;  box-shadow: 0 0 3px #629b58; }
  50% { background-color: #0bce24; border-color:#0bce24; box-shadow: 0 0 40px #0bce24; }
  100% { background-color: #629b58; border-color:#629b58; box-shadow: 0 0 3px #629b58; }
}

@keyframes glowing {
  0% { background-color: #629b58; border-color:#629b58;  box-shadow: 0 0 3px #629b58; }
  50% { background-color: #0bce24; border-color:#0bce24; box-shadow: 0 0 40px #0bce24; }
  100% { background-color: #629b58; border-color:#629b58;  box-shadow: 0 0 3px #629b58; }
}

.customTooltip {
 
  font-size:1.2em;
  top: 60px;
  background-color:#d5d5d5;
  color:black;
  border-radius:5px;
  position:absolute;
  box-sizing:content-box;
  min-width:550px;
  opacity:0;
  -webkit-transition: opacity 0.5s;
  -moz-transition:  opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition:  opacity 0.5s;
  transition:  opacity 0.5s;
  z-index: -1000;
}


.customTooltip > * {
    margin-top:10px;
    margin-bottom: 10px;
}

.customTooltip ul li, 
.customTooltip p
{
     margin-left: 20px;
     margin-left: 20px;
}


/*.tooltipContainer {
    position:relative;
    display:inline-block;
}

.tooltipContainer:hover .customTooltip {
    opacity:1;
}*/









a, button, input[type=button], input[type=radio] {
outline: 0 !important;
}

a:hover, a:active, a:focus,
button:hover, button:active, button:focus,
input[type=button]:hover, input[type=button]:active, input[type=button]:focus,
input[type=radio]:hover, input[type=radio]:active, input[type=radio]:focus {
     outline: none !important;
}

input::-moz-focus-inner {
border: 0 !important;
}

.switch {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 30px;
}

.switch-normal {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 30px;
    
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #c9c5c5;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider-normal {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ca2222;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before,
.slider-normal:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 6px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #ca2222;
}

input:checked + .slider-normal {
    background-color: #2ab934;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:focus + .slider-normal {
    box-shadow: 0 0 1px #FFFFFF;
}

input:checked + .slider:before {
    -webkit-transform: translateX(55px);
    -ms-transform: translateX(55px);
    transform: translateX(55px);
}

input:checked + .slider-normal:before {
    -webkit-transform: translateX(55px);
    -ms-transform: translateX(55px);
    transform: translateX(55px);
}

.on {
    display: none;
}

.on, .off {
    color: white;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
}

input:checked + .slider .on {
    display: block;
}

input:checked + .slider-normal .on {
    display: block;
}

input:checked + .slider .off {
    display: none;
}

input:checked + .slider-normal .off {
    display: none;
}

.slider.round {
    border-radius: 34px;
}

.slider-normal.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}
.slider-normal.round:before {
    border-radius: 50%;
}

.border-selected {
    border-style:solid;
    border-color: red;
    border-width: 2px;
}


.border-round-selected {
    border-style: solid;
    border-color: red;
    border-width: 3px;
    border-radius: 34px;
}