body{background-color: #f5f8fa;font-family: 'Raleway', sans-serif !important;}
.google_avatar{width: 50px;height: 50px;border-radius: 25px;margin-right: 10px;}
.custom-card{background-color: white !important;margin-top: 20px;}
.custom-card-sm{max-width: 600px;margin: 20px auto 0;}
.custom-card .card-header{background-color: white !important;}

nav .logo img{width: 40px;height: auto;}
.subnav{font-size: 18px;padding: 5px 0;}
.subnav .submenu{display: none;width: calc(100% - 55px);text-align: right;}
.subnav .submenu a{color: white;text-decoration: none;font-size: 15px;padding: 0 10px;}
.subnav.fixed{position: fixed;top: 0;left: 0;z-index: 1000;color: white;background-color: #212529;width: 100%;font-size: 15px;}
.subnav.fixed .back{color: white;}

#home figure{display: block;margin: auto;margin-top: 15px;}
#home figure img{display: block;margin: auto;width: 100%;max-width: 200px;height: auto;}
#home .main-description{text-align: center;font-size: 20px;width: 90%;max-width: 345px; margin: auto;}

#login-form figure{display: block;margin: auto;margin-top: 15px;}
#login-form figure img{display: block;margin: auto;width: 100%;max-width: 100px;height: auto;}
#login-form p.title{text-align: center;font-size: 25px;}
#login-form p.login-google{text-align: center;}
#login-form p.login-laravel{text-align: center;}
#login-form p.login-laravel a{background-color: white;padding: 8px 10px;border: 1px solid #747775;border-radius: 18px;text-decoration: none;color: #1f1f1f;}


.bi-star{color: grey !important;}
.bi-star-half{color: #e3e353 !important;}
.bi-star-fill-custom{color: #e3e353 !important;}

.success-checkmark {width: 80px;height: 115px;margin: 0 auto;}.success-checkmark .check-icon {width: 80px;height: 80px;position: relative;border-radius: 50%;box-sizing: content-box;border: 4px solid #4CAF50;}.success-checkmark .check-icon::before {top: 3px;left: -2px;width: 30px;transform-origin: 100% 50%;border-radius: 100px 0 0 100px;}.success-checkmark .check-icon::after {top: 0;left: 30px;width: 60px;transform-origin: 0 50%;border-radius: 0 100px 100px 0;animation: rotate-circle 4.25s ease-in;}.success-checkmark .check-icon::before, .success-checkmark .check-icon::after {content: "";height: 100px;position: absolute;background: #FFFFFF;transform: rotate(-45deg);}.success-checkmark .check-icon .icon-line {height: 5px;background-color: #4CAF50;display: block;border-radius: 2px;position: absolute;z-index: 10;}.success-checkmark .check-icon .icon-line.line-tip {top: 46px;left: 14px;width: 25px;transform: rotate(45deg);animation: icon-line-tip 0.75s;}.success-checkmark .check-icon .icon-line.line-long {top: 38px;right: 8px;width: 47px;transform: rotate(-45deg);animation: icon-line-long 0.75s;}.success-checkmark .check-icon .icon-circle {top: -4px;left: -4px;z-index: 10;width: 80px;height: 80px;border-radius: 50%;position: absolute;box-sizing: content-box;border: 4px solid rgba(76, 175, 80, 0.5);}.success-checkmark .check-icon .icon-fix {top: 8px;width: 5px;left: 26px;z-index: 1;height: 85px;position: absolute;transform: rotate(-45deg);background-color: #FFFFFF;}@keyframes rotate-circle {0% {transform: rotate(-45deg);}5% {transform: rotate(-45deg);}12% {transform: rotate(-405deg);}100% {transform: rotate(-405deg);}}@keyframes icon-line-tip {0% {width: 0;left: 1px;top: 19px;}54% {width: 0;left: 1px;top: 19px;}70% {width: 50px;left: -8px;top: 37px;}84% {width: 17px;left: 21px;top: 48px;}100% {width: 25px;left: 14px;top: 45px;}}@keyframes icon-line-long {0% {width: 0;right: 46px;top: 54px;}65% {width: 0;right: 46px;top: 54px;}84% {width: 55px;right: 0px;top: 35px;}100% {width: 47px;right: 8px;top: 38px;}}
.success-checkmark-text p{text-align: center;font-size: 22px;font-weight: bold;}
.success-checkmark-text .end{text-align: center;}

#nav_footer{max-width: 600px;margin: 100px auto 0;}
#nav_footer ul{display: block;overflow: hidden;text-align: center;}
#nav_footer ul li{list-style-type: none;display: inline-block;margin: 0 5px;}
#nav_footer ul li a{color: grey;}

footer{max-width: 600px;margin: 5px auto 0;}
footer .legal{color: grey;font-size: 11px;text-align: center;}
footer .legal a{color: grey;}

footer .instagram{font-family: Arial, Helvetica, sans-serif;text-align: center;margin-bottom: 3px;}
footer .instagram a{color: gray;}
footer .instagram i{font-size: 20px;}

footer .contact{text-align: center;}



.rating_list .loader{text-align: center;}
.rating_list .see_more{text-align: center;}
.rating_list .rating{overflow: hidden;width: 100%;}
.rating_list .rating .line_icon_wr{width: 90px;float: left;padding-top: 7px;}
.rating_list .rating .user{float: left;width: 250px;height: 50px;overflow: hidden;}
.rating_list .rating .user .avatar{float: left;width: 50px;height: 50px;}
.rating_list .rating .user .avatar img{width: 100%;height: 100%; border-radius: 25px;border: 1px solid #aaa;}
.rating_list .rating .user .user_name_and_time_ago{float: left;padding-left: 10px;}
.rating_list .rating .user .user_name_and_time_ago .user_name{font-size: 18px;}
.rating_list .rating .user .user_name_and_time_ago .time_ago{height: 20px;font-style: italic;font-size: 12px;}
.rating_list .rating .user .user_name_and_time_ago .time_ago a{color: grey;}
.rating_list .rating .stars{float: left;width: 175px;font-size: 25px;margin-top: 3px;}
.rating_list .rating .stars.stars .bi-star-fill{color: #e3e353;}
.rating_list .rating .description{font-style: italic;font-size: 15px;clear: both;padding-top: 11px;margin-bottom: 7px;}
.rating_list .rating .buttons{margin-top: 10px;}
.rating_list .rating .buttons .custom_btn{font-size: 12px;padding: 2px;margin-right: 2px;margin-bottom: 2px;}
.rating_list .rating .buttons .reaction_btn{font-size: 14px;padding: 2px 15px;margin-right: 5px;margin-bottom: 5px;}
.rating_list .rating .buttons .buttons_1{overflow: hidden;clear: both;}
.rating_list .rating .buttons .buttons_2{margin-top: 8px;}
.rating_list .rating .buttons .buttons_2 .comments_counter{font-weight: bold;}

.rating_list .rating .rating_detail{overflow: hidden;}
.rating_list .rating .rating_detail table{max-width: 300px;}
.rating_list .rating .rating_detail table td{font-size: 12px;}

.rating_list .rating .rating_values_detail{overflow: hidden;}
.rating_list .rating .rating_values_detail table{max-width: 300px;}
.rating_list .rating .rating_values_detail table td{font-size: 12px;}
.rating_list .rating .rating_values_detail .stars_det{float: left;font-size: 12px;margin-top: 3px;}
.rating_list .rating .rating_values_detail .stars_det .bi-star-fill{color: #e3e353;}

.rating_list .rating_list_content .custom_btn{font-size: 12px;padding: 2px;margin-right: 2px;margin-bottom: 2px;}


.line_icon{width: 65px;height: 40px;border: 1px solid #aaa;border-radius: 0 8px 8px 0;overflow: hidden;padding: 1px;background-color: white;}
.line_icon .element{float: left;height: 100%;}
.line_icon .colors{width: 20%;height: 100%;}
.line_icon .name{width: 80%;font-size: 24px;font-weight: bold;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;text-align: center;vertical-align: middle;line-height: 36px;}
.line_link{color: unset;text-decoration: unset;}


.bus_icon{overflow: hidden;width: 100px;height:53px; position: relative;overflow: hidden;}
.bus_icon img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.bus_icon .colors{width: 100%;height: 44px;position: absolute;left: 0;overflow: hidden;border-radius: 10px 10px 3px 3px;}
.bus_icon .colors .color{width: 100%;position: absolute;left: 0;overflow: hidden;}


#delete_user h1{font-size: 24px;}

.email_confirmation_sent{padding: 10px;font-style: italic;font-size: 12px;color: green;}
.message_confirm_email{padding: 16px;font-style: italic;font-size: 12px;color: green;}
.email_confirmation_pend{padding: 10px;font-style: italic;font-size: 12px;color: red;}
.email_confirmation_pend button{border: none;background-color: unset;cursor: pointer;color: red;text-decoration: underline;}
.subir{position: fixed; bottom: 2px;right: 2px;z-index: 100000;padding: 2px 10px;font-size: 12px;display: none;}

.comments_list{text-align: left;border-top: 1px solid #dee2e6;padding: 0.75rem;max-height: 300px;overflow-y: auto;}
#ratings_index .comments_list{overflow: unset;max-height: unset;}
.comments_list .comment{border-left: 6px solid #dee2e6;padding: 11px;margin-bottom: 25px;float: none;clear: both;}
.comments_list .comment.highlighted{border: 1px solid blue;border-radius: 5px;}
.comments_list .comment .custom_btn{font-size: 12px;padding: 2px;margin-right: 2px;margin-bottom: 2px;}
.comments_list .comment .user{height: 50px;overflow: hidden;clear: both;float: none;width: 100%;}
.comments_list .comment .user .avatar{float: left;width: 40px;height: 40px;margin-right: 10px;}
.comments_list .comment .user .avatar img{width: 100%;height: 100%; border-radius: 25px;border: 1px solid #aaa;}
.comments_list .comment .user .user_name_and_time_ago{padding-left: 10px;;}
.comments_list .comment .user .user_name_and_time_ago .user_name{font-size: 15px;}
.comments_list .comment .user .user_name_and_time_ago .time_ago{height: 20px;font-style: italic;font-size: 12px;}
.comments_list .comment .user .user_name_and_time_ago .time_ago a{color: grey;}
.comments_list .text{font-style: italic;}
.comments_list .delete_comment_button{overflow: hidden;margin-top: 15px;}


.certified_user{width: 20px;height: auto;}

.btn:focus {
    outline: none;
    box-shadow: none;
}

@media only screen and (max-width:768px){
    .rating_list .rating .user{width: 250px;}
    .comments_list .comment .user{width: 100%;}
    .rating_list .rating .stars{width: 100%;text-align: right;}
    .rating_list .rating .buttons{padding-bottom: 15px;}
}

@media only screen and (max-width:530px){
    .rating_list .rating .line_icon_wr{width: 78px;}
    .comments_list .comment .user{width: 100%;}
}

@media only screen and (max-width:500px){
    .rating_list .rating_list_content{padding: 10px 6px;}
    .rating_list .rating .stars{clear: both;width: 100%;text-align: right;}
    .rating_list .rating .user{width: calc(100% - 119px);}
    #ratings_index .rating_list .rating .user{width: 210px;}
    
}

@media only screen and (max-width:420px){
    .rating_list .rating .user .user_name_and_time_ago .user_name{font-size: 16px;}
    
}

@media only screen and (max-width:410px){
    .rating_list .rating .line_icon_wr{width: 60px;padding-top: 0px;}
    .line_icon .name{font-size: 18px;}
    .line_icon{width: 54px;}
    .rating_list .rating .user .avatar{width: 40px;height: 40px;}
    .rating_list .rating .user{width: calc(100% - 65px);}
    
}

@media only screen and (max-width:350px){
    .rating_list .rating .user{width: 100%;margin-top: 8px;}
}