@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400;500;600;700;800;900&display=swap');

*, 
body, 
html {
	margin: 0;
	padding: 0;
	/* border-radius: 4px; */
	box-sizing: border-box;
	transition: all 0.1s ease;
	font-family: 'Barlow', sans-serif;
	font-family: 'Poppins', sans-serif;
}

.rsocialtags {
    width: 35px;
    height: 35px;
    max-height: 65px;
    padding: 0;
	border: none;
	outline: none;
    font-size: 28px;
    margin-right: 15px;
    margin-bottom: 15px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    flex-direction: column;
    justify-content: center;
    padding: 5px 0;
    color: gray;
    background: var(--rdr-diamond);
}

.rsocialtags:hover {
    color: gray;
}

.rsocialtags:focus {
	color: gray;
}
.rsocialtags:active,
.rsocialtags:active:focus {
	outline: none;
	color: var(--rdr-shadow5);
}

#modal-template {
	.rsocialtags:hover {
	    color: gray !important;
	}
}

.rsocialtags svg {
    width: 35px;
    max-height: 35px;
    fill: gray !important;
}

.rsocialtags.active {
    background: rgb(240, 240, 240) !important;
    color: var(--rdr-blue-sapphire) !important;
    border: 1px solid var(--rdr-blue-sapphire);
    outline: none !important;
}

.rsocialtags:active > svg {
    background: rgb(240, 240, 240) !important;
    fill: var(--rdr-blue-sapphire) !important;
    border: none;
    outline: none !important;
}

.rsocialtags.active svg {
	fill: var(--rdr-blue-sapphire) !important;
}

.rsocialtags .media_Name {
    font-size: 10px;
    font-weight: 500;
    margin-top: 2px;
    white-space: pre-wrap;
    line-height: 8px;
    
}

/*  Set Standard for popup  */
.w_340_1200_40vw {
	max-width: max(min(1200px, 40vw), 340px);
	margin: auto;
	width: 100%;
}

.w_340_1200_60vw {
	max-width: max(min(1200px, 60vw), 340px);
	margin: auto;
	width: 100%;
}

.w_340_1200_80vw {
	max-width: max(min(1200px, 80vw), 340px);
	margin: auto;
	width: 100%;
}