@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');

body {font-family: 'Lato', sans-serif;font-weight:400;font-style:normal; color: #4A4A4A;}

.font-weight-bold, .fw-700{font-family: 'Lato', sans-serif;font-weight:700;font-style:normal}
.font-weight-normal, .fw-400{font-family: 'Lato', sans-serif;font-weight:400;font-style:normal}
.text-red{color:#CA0E66;}
.box-shadow{box-shadow: 0 2px 10px 0 rgba(0,0,0,0.19);}


header{width: 250px; height: calc(100vh); position: fixed;}
header nav a{font-size: 15px; color: #EEE; display: block; padding:10px 0 10px 26px; border-left: 0px solid #EEE; font-weight: 400; transition: 0.2s}
header nav a:hover{color: #EEE;border-left: 3px solid #EEE; text-decoration: none;}
header nav ul{list-style: none; padding: 0; margin: 0}

main{padding-left: 250px;}

.winemaster .text-primary{color: #AE261E!important}
strong{font-weight: bold!important;}

.bg-magenta{background-color: #CA0E66}
.bg-grey{background-color: #3D4043}

.logo{max-height: 40px}

.user-info{}

.section-description{
	margin-bottom: 40px;
}
h1{
	font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0px;
}

.winemaster h1{font-family: 'Roboto Condensed', sans-serif;color: black!important;}
.winemaster h2{font-family: 'Roboto Condensed', sans-serif;font-weight: 700;}

.section-description p{color: #999}

.toggle-menu{display: none;}

.module-item{text-decoration: none; text-align: center;}
.module-item-icon{height: 150px; width: 150px; background-color: #CA0E66; border-radius: 50%; margin-bottom: 5px; border:1px solid transparent; color: #FFF; transition: 0.3s all}
.module-item-icon i{text-align: center; line-height: 140px;}
.module-item-icon .new{position: absolute; left: 5px; top:-7px; display: inline-block; padding: 3px 8px; background-color:#4A4A4A; box-shadow: 0 2px 10px 0 rgba(0,0,0,0.19); transform: rotate(-4deg); }
.module-item-name{font-size:14px; color:#9B9B9B; padding-left: 0}
.module-item:hover{text-decoration: none;}
/*
.module-item:hover > .module-item-icon{background-color: #FFF; border:1px solid #CA0E66; color: #CA0E66;}
.module-item:hover > .module-item-icon i{transform: translateY(-50%) scale(0.9);}
*/
.cursor-pointer{cursor: pointer;}

.navbar-brand{padding: 0}


#delete-span{cursor: pointer;}

.btn-fondis{background-color:#CA0E66; color: #FFF; border-radius: 0}

.ism-project .resume{}
.ism-project .resume h3{margin-top: 40px;}
.ism-project .ism-line{padding: 8px 0; border-top: 1px solid #D2D5D6;}
.ism-project .total-line{font-weight: bold; font-size: 20px;}

/* ISM CALCULATOR */
table.ism-list .ism-project-ventiliation{text-align: center;}
table.ism-list .ism-project-ventiliation img{max-height: 32px;}

.ism-calculator .next-step,
.ism-calculator .prev-step {position: absolute; top:48%; width: 90px; height: 70px; line-height: 70px; border:0; background-color: rgba(0,0,0,0.2); transition: all 0.3s; color:#FFF; cursor: pointer; font-size: 24px;}
.ism-calculator .next-step{text-align: left; right: 0; padding-left: 20px;}
.ism-calculator .prev-step{text-align: right; left: 250px; padding-right: 20px;}
.ism-calculator .next-step:hover{width: 100px; }
.ism-calculator .prev-step:hover{width: 100px; }

.ism-calculator h3{color: #4A4A4A; font-size: 20px; margin-bottom: 10px;}

.ism-calculator .step-1 button{border:0; background: transparent; border-bottom:1px solid rgba(150, 150, 150, 0.35); display: block; width:100%; line-height: 50px; height: 50px; padding-left: 10px; box-sizing: border-box;  margin: 0; transition: all .2s; text-align: left;}
.ism-calculator .step-1 button > i{visibility: hidden;}
.ism-calculator .step-1 button:hover{background-color: rgba(221, 0, 102, 0.2);}
.ism-calculator .step-1 button.activ{background-color: rgba(221, 0, 102, 1); color:#FFF;}
.ism-calculator .step-1 button.activ > i{visibility: visible; margin-right: 10px; font-size: 18px; line-height: 45px;}

.ism-calculator .step-2 input{display: none;}
.ism-calculator .step-2 label{clear:both; position: relative; padding:15px 50px 15px 70px; border:0; background: transparent; border-bottom:1px solid rgba(150, 150, 150, 0.35);
 display: block; width:100%; min-height: 50px; line-height: 16px; box-sizing: border-box;  margin: 0; transition: all .2s; text-align: left;}
.ism-calculator .step-2 label > i{visibility: hidden;}
.ism-calculator .step-2 label:hover{background-color: rgba(221, 0, 102, 0.2);}
.ism-calculator .step-2 label.activ{background-color: rgba(221, 0, 102, 1); color:#FFF;}
.ism-calculator .step-2 label.activ > i{visibility: visible; margin-right: 10px; font-size: 18px; line-height: 45px; position: absolute; right: 8px; top: 0;}
.ism-calculator .step-2 .icon-ventilation{height: 32px; position: absolute; top: 8px; left:8px;}
.ism-calculator .step-2 .ventillate-desc{line-height: normal; font-size: 12px; color: #757474; margin-top: 8px;}

.step-3 .edit-dimensions{position: absolute;}
.step-3 .edit-dimensions label{display: block; font-size: 18px; margin:0;}
.step-3 .edit-dimensions input{background: #FFF; padding: 10px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); border:0;}
.step-3 .dimensions{list-style: none; padding: 0; font-weight: 400;}
.step-3 .dimensions li{border-bottom:1px solid rgba(150, 150, 150, 0.35); line-height: 50px; height: 50px; padding-left: 10px; box-sizing: border-box;  margin: 0;}
.step-3 .dimensions li span{float: right; margin-right: 10px;}

.step-3 .edit-dimensions span:after{z-index: 9999; position: absolute;}
.step-3 .edit-dimensions img{position: absolute; z-index: 9998}

.step-3 .edit-dimensions-width{top:52%; left:38%;}
.step-3 .edit-dimensions-width span:after{content:""; display:block; bottom:-10px; left:40%; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #ffffff transparent transparent transparent;}
.step-3 .edit-dimensions-width img{bottom:-20px; left: 0;}

.step-3 .edit-dimensions-lenght{top:45%; left:44%;}
.step-3 .edit-dimensions-lenght label{color: #FFF;}
.step-3 .edit-dimensions-lenght span:after{content:""; display:block; bottom:13px; left:-10px; width: 0; height: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #ffffff transparent transparent;}
.step-3 .edit-dimensions-lenght img{top:-24px; left: -18px;}

.step-3 .edit-dimensions-depth{top:56.5%; left:50%;}
.step-3 .edit-dimensions-depth label{color: #FFF;}
.step-3 .edit-dimensions-depth span:after{content:""; display:block; bottom:13px; left:-10px; width: 0; height: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #ffffff transparent transparent;}
.step-3 .edit-dimensions-depth img{top:30px; left: -50px;}

.btn-finished{margin-top:50px}

@keyframes enterToaster{ from {transform: translateY(100px); opacity: 0} to {transform: translateY(0); opacity: 1}}
.info-toaster{background-color: #333344; color:#FFF; padding: 30px 30px 20px 30px; position: absolute; bottom: 20px; left: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.3);
animation-name: enterToaster; animation-duration: 0.5s;}


/* FLASH INFO */
.flash-right-col{background-color: #FFF; padding-top: 20px; box-shadow: 0 4px 8px rgba(150,150,150,0.5); border-radius: 4px;}
.greylight{background-color: #e8e8e8}



.autocomplete-input{
	background-color: #FFF!important;
}


.link{color:#5F7EBB; text-decoration: underline; cursor: pointer;}


/* SHEMA */
.shema{border-spacing: 0; padding: 0; border-collapse: collapse; margin-bottom: 40px; margin-left: auto; margin-right: auto;}
.shema td,
.shema tr,
.shema img{padding: 0; margin: 0; line-height: 0; border:none;}
.shema td{position: relative;}
.shema.flip{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
.cote-poignet{position: absolute; top:50%; left:0; transform: translateY(-50%);}

.face-tube, .face-bas{position: absolute; top:0; left:50%; transform: translateX(-50%);}
.face-poignet{position: absolute; top:50%; right:0; transform: translateY(-50%);}

@media (max-width: 768px) {
	.toggle-menu{display: inline-block; position: absolute; right: 15px; top: 5px; font-size: 36px; cursor: pointer; color: white;}
	nav{position: fixed; width: 100%; height: calc(100vh - 72px); background: #FFF; top:72px; left: 0; display: none; z-index: 9999;}
	nav ul{padding-top: 2rem!important;}
	header nav a{display: block; color: black!important; padding: 10px 0 10px 20px; animation-name: enterToaster; animation-duration: 0.2s; font-size: 18px}
	nav a:nth-child(2){animation-duration: 0.2s;}
	nav a:nth-child(3){animation-duration: 0.4s;}
	nav a:nth-child(4){animation-duration: 0.6s;}
	nav a:nth-child(5){animation-duration: 0.8s;}
	nav a:nth-child(6){animation-duration: 0.9s;}
	nav a:nth-child(7){animation-duration: 1s;}
	nav a:nth-child(8){animation-duration: 1.1s;}
	nav a:nth-child(9){animation-duration: 1.15s;}
	h1{font-size: 26px}

	/*table, tbody, tr, td {display: block; width: auto!important;}
	thead{display: none;}*/
	.table td{border-top:none}

	table.ism-list{margin:0 -15px; max-width: inherit!important}
	table.ism-list tr{padding: 15px; position: relative;}
	table.ism-list tr td{padding: 0}
	table.ism-list .ism-project-title{font-size: 22px}
	table.ism-list .ism-project-type{display: inline-block; font-family:'Avenir Next';font-weight:400;font-style:normal; font-size: 18px}
	table.ism-list .ism-project-ventiliation{display: inline-block;}
	table.ism-list .ism-project-date{font-size: 12px; font-family:'Avenir Next';font-weight:400;font-style:normal; color: #999}
	table.ism-list .ism-project-show{position: absolute; z-index: 999; top:0; left: 0; width: 100%!important; height: 100%;}
	table.ism-list .ism-project-show a{opacity: 0; width: 100%; height: 100%; display: block; position: absolute;}
	.btn-new-ism-project{position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; line-height: 50px; text-align: center; border-radius: 50%; font-size: 32px; box-shadow: 0 4px 8px rgba(0,0,0,0.3);}
}


@media (min-width: 1200px){
	.container, .container-sm, .container-md, .container-lg, .container-xl {
    	max-width: 1440px;
    }
}

.cursor-p{cursor: pointer;}

.winemaster .autocomplete-input{padding: 0.375rem 0.75rem!important;
    font-size: 0.9rem!important;
    font-weight: 400!important;
    line-height: 1.6!important;
    color: #495057!important;
    box-shadow: none!important;
    background-color: #fff!important;
    background-clip: padding-box!important;
    border: 1px solid #ced4da!important;
    display: block!important;
    height: 50px!important;
    border-radius: 2px!important;
    width: 100%!important;
    padding-left: 2.75rem!important;}


.winemaster .bg-magenta{background: linear-gradient(126.44deg, #901221 1.45%, #C91A2E 88.89%);}
.winemaster .bg-grey{background-color: #2A2727;}
.winemaster main{background-image: url('../img/stripe.png'); background-repeat: repeat-x; background-repeat-y: no-repeat; background-position: 0 72px;}
.winemaster main a:not(.btn){color: #AE261E;}
.winemaster main .top-banner{height: 72px; display: flex; align-items: center; justify-content: flex-end;}
.winemaster .btn{border-radius: 2px; border: none}
.winemaster .btn-primary{background-color: #AE261E;}
.winemaster .btn-primary:focus{background-color: #931f18!important; box-shadow: 0 0 0 0.2rem rgb(174 38 30 / 50%)!important;}
.winemaster .btn-primary:hover{background-color: #931f18!important;}

.winemaster .module-item-icon{background: linear-gradient(126.44deg, #901221 1.45%, #C91A2E 88.89%);}

.winemaster .card-header{background-color: #E9ECEE!important; border-bottom: 0;}

@media (max-width: 992px){
	main{padding-left: 0; padding-top: 72px;}
	header{height: 72px; width: 100%; z-index: 1010;}
	header h5{width: 50%;}
	.module-item-icon{width: 115px; height: 115px;}
	.module-item-icon i{font-size: 3.5rem; line-height: 115px;}


	.table-scrollable{max-width: 100%; overflow: scroll;}
}